app/assets/stylesheets/application.scss
%contain-floats {
&:after {
content: "";
display: block;
clear: both;
}
}
$tablet-width: 768px;
$desktop-width: 1025px;
$blackish: #6F777B;
$darkblue: #005EA5;
$turqoise: rgba(#28A197, 0.5);
$opaqueblue: rgba(#2B8CC4, 0.25);
$paleblue: rgba(#9BB7CE, 0.5);
$blueish: #27A097;
$error-text: #DF3034;
$error-border: $error-text;
$error-bg: #FBE1E1;
$palegreen: #c9d8bd;
$notice-bg: $blueish;
$paleorange: #FFBF47;
$warning-bg: $paleorange;
$pink-bg: #FEF7F7;
$grey-bg: #DEE0E2;
$green: #006435;
$border-color: #bfc1c3;
@mixin mobile($orientation: landscape) {
@media (max-width: #{$tablet-width - 1px}) and (orientation: $orientation){
@content;
}
}
@mixin tablet($orientation: landscape) {
@media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) and (orientation: $orientation){
@content;
}
}
@mixin tablet($orientation: landscape) {
@media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) and (orientation: $orientation){
@content;
}
}
@mixin desktop($orientation: landscape) {
@media (min-width: #{$desktop-width}) and (orientation: $orientation){
@content;
}
}
@mixin setSize($size:100%, $multiply:true){
width: $size;
@include mobile(landscape){
width: $size/4;
}
@include tablet(landscape){
width: $size/4;
}
@include tablet(portrait){
width: $size/4;
}
@include desktop{
width: $size/4;
}
}
// Settings (variables)
@import "colours"; // Colour variables
@import "font_stack"; // Font family variables
@import "measurements"; // Widths and gutter variables
// Mixins
@import "conditionals"; // Media query mixin
@import "device-pixels"; // Retina image mixin
@import "grid_layout"; // Basic grid layout mixin
@import "typography"; // Core bold and heading mixins, also external links
@import "shims"; // Inline block mixin, clearfix placeholder
// Mixins to generate components (chunks of UI)
@import "design-patterns/alpha-beta";
@import "design-patterns/buttons";
@import "design-patterns/breadcrumbs";
// Functions
@import "url-helpers"; // Function to output image-url, or prefixed path (Rails and Compass only)
// GOV.UK elements
@import "elements/helpers"; // Helper functions and classes
// Generic (normalize/reset.css)
@import "elements/reset";
// Objects (unstyled design patterns)
@import "elements/layout"; // Main content container. Grid layout - rows and column widths
// Components (chunks of UI)
@import "elements/elements-typography"; // Typography
@import "elements/buttons"; // Buttons
@import "elements/icons"; // Icons - numbered steps, calendar, search
@import "elements/lists"; // Lists - numbered, bulleted
@import "elements/tables"; // Tables - regular, numeric
@import "elements/details"; // Details summary
@import "elements/panels"; // Panels with a left grey border
@import "elements/forms"; // Form - wrappers, inputs, labels
@import "elements/forms/form-block-labels"; // Chunky labels for radios and checkboxes
@import "elements/forms/form-date"; // Date of birth pattern
@import "elements/forms/form-validation"; // Errors and validation
@import "elements/breadcrumbs"; // Breadcrumbs
@import "elements/phase-banner"; // Alpha and beta banners and tags
@import "elements/components"; // GOV.UK prefixed styles - blue highlighted box
@import "elements/shame"; // Hacks and workarounds that will go away eventually
@import "Jcrop/css/jquery.Jcrop.min";
@import "elements-local/*";
@import "modules/*";
@import "print";
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
.hide {
display: none !important;
}
.show {
display: block !important;
}
.invisible {
visibility: hidden;
}
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.hidden {
display: none !important;
}
.affix {
position: fixed;
}
.clear-both{
clear:both;
}
.audit {
td, th{
@include core-16;
}
}
.formatted-text {
word-wrap: break-word;
ul li {
list-style-type: disc;
margin-left: 20px;
}
ol li {
list-style-type: decimal;
margin-left: 25px;
}
ul, ol{
margin-bottom: $gutter;
}
h4{
margin-top: $gutter;
@include core-19;
font-weight: 700;
}
}
.mobile-hide{
display: block;
@include mobile(landscape){
display: none;
}
@include mobile(portrait){
display: none;
}
@include tablet(landscape){
display: block;
}
@include tablet(portrait){
display: block;
}
@include desktop(landscape){
display: block;
}
@include desktop(portrait){
display: block;
}
}
.mobile-show{
display: none;
margin: -20px 10px 10px 0px;
@include mobile(landscape){
display: block;
}
@include mobile(portrait){
display: block;
}
}
#proposition-links{
width: 100%;
@include desktop(){
width: auto;
}
}
.govuk-header__service-name{
font-size: 24px;
}
.govuk-header{
border-bottom: none;
}
.govuk-header__container{
border-bottom: none;
}
#global-header .header-wrapper {
padding-top: 0;
padding-bottom: 0;
}