Grid push and pull, tidied up css and gruntfile, addded more form variables
This commit is contained in:
parent
4f1d9febce
commit
aa2f2231f0
@ -34,7 +34,7 @@ module.exports = function(grunt) {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
files: 'src/scss/**/*',
|
files: 'src/scss/**/*',
|
||||||
tasks: ['sass', 'csslint', 'cssmin']
|
tasks: ['sass', 'csslint:scssoutput', 'cssmin']
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -455,6 +455,66 @@ hr {
|
|||||||
padding-left: 840px; }
|
padding-left: 840px; }
|
||||||
.container .offset-by-fifteen {
|
.container .offset-by-fifteen {
|
||||||
padding-left: 900px; }
|
padding-left: 900px; }
|
||||||
|
.container .pull-by-one {
|
||||||
|
left: -60px; }
|
||||||
|
.container .pull-by-two {
|
||||||
|
left: -120px; }
|
||||||
|
.container .pull-by-three {
|
||||||
|
left: -180px; }
|
||||||
|
.container .pull-by-four {
|
||||||
|
left: -240px; }
|
||||||
|
.container .pull-by-five {
|
||||||
|
left: -300px; }
|
||||||
|
.container .pull-by-six {
|
||||||
|
left: -360px; }
|
||||||
|
.container .pull-by-seven {
|
||||||
|
left: -420px; }
|
||||||
|
.container .pull-by-eight {
|
||||||
|
left: -480px; }
|
||||||
|
.container .pull-by-nine {
|
||||||
|
left: -540px; }
|
||||||
|
.container .pull-by-ten {
|
||||||
|
left: -600px; }
|
||||||
|
.container .pull-by-eleven {
|
||||||
|
left: -660px; }
|
||||||
|
.container .pull-by-twelve {
|
||||||
|
left: -720px; }
|
||||||
|
.container .pull-by-thirteen {
|
||||||
|
left: -780px; }
|
||||||
|
.container .pull-by-fourteen {
|
||||||
|
left: -840px; }
|
||||||
|
.container .pull-by-fifteen {
|
||||||
|
left: -900px; }
|
||||||
|
.container .push-by-one {
|
||||||
|
left: 60px; }
|
||||||
|
.container .push-by-two {
|
||||||
|
left: 120px; }
|
||||||
|
.container .push-by-three {
|
||||||
|
left: 180px; }
|
||||||
|
.container .push-by-four {
|
||||||
|
left: 240px; }
|
||||||
|
.container .push-by-five {
|
||||||
|
left: 300px; }
|
||||||
|
.container .push-by-six {
|
||||||
|
left: 360px; }
|
||||||
|
.container .push-by-seven {
|
||||||
|
left: 420px; }
|
||||||
|
.container .push-by-eight {
|
||||||
|
left: 480px; }
|
||||||
|
.container .push-by-nine {
|
||||||
|
left: 540px; }
|
||||||
|
.container .push-by-ten {
|
||||||
|
left: 600px; }
|
||||||
|
.container .push-by-eleven {
|
||||||
|
left: 660px; }
|
||||||
|
.container .push-by-twelve {
|
||||||
|
left: 720px; }
|
||||||
|
.container .push-by-thirteen {
|
||||||
|
left: 780px; }
|
||||||
|
.container .push-by-fourteen {
|
||||||
|
left: 840px; }
|
||||||
|
.container .push-by-fifteen {
|
||||||
|
left: 900px; }
|
||||||
|
|
||||||
@media only screen and (max-width: 959px) {
|
@media only screen and (max-width: 959px) {
|
||||||
.container {
|
.container {
|
||||||
@ -531,6 +591,66 @@ hr {
|
|||||||
padding-left: 672px; }
|
padding-left: 672px; }
|
||||||
.container .offset-by-fifteen {
|
.container .offset-by-fifteen {
|
||||||
padding-left: 720px; }
|
padding-left: 720px; }
|
||||||
|
.container .pull-by-one {
|
||||||
|
left: -48px; }
|
||||||
|
.container .pull-by-two {
|
||||||
|
left: -96px; }
|
||||||
|
.container .pull-by-three {
|
||||||
|
left: -144px; }
|
||||||
|
.container .pull-by-four {
|
||||||
|
left: -192px; }
|
||||||
|
.container .pull-by-five {
|
||||||
|
left: -240px; }
|
||||||
|
.container .pull-by-six {
|
||||||
|
left: -288px; }
|
||||||
|
.container .pull-by-seven {
|
||||||
|
left: -336px; }
|
||||||
|
.container .pull-by-eight {
|
||||||
|
left: -384px; }
|
||||||
|
.container .pull-by-nine {
|
||||||
|
left: -432px; }
|
||||||
|
.container .pull-by-ten {
|
||||||
|
left: -480px; }
|
||||||
|
.container .pull-by-eleven {
|
||||||
|
left: -528px; }
|
||||||
|
.container .pull-by-twelve {
|
||||||
|
left: -576px; }
|
||||||
|
.container .pull-by-thirteen {
|
||||||
|
left: -624px; }
|
||||||
|
.container .pull-by-fourteen {
|
||||||
|
left: -672px; }
|
||||||
|
.container .pull-by-fifteen {
|
||||||
|
left: -720px; }
|
||||||
|
.container .push-by-one {
|
||||||
|
left: 48px; }
|
||||||
|
.container .push-by-two {
|
||||||
|
left: 96px; }
|
||||||
|
.container .push-by-three {
|
||||||
|
left: 144px; }
|
||||||
|
.container .push-by-four {
|
||||||
|
left: 192px; }
|
||||||
|
.container .push-by-five {
|
||||||
|
left: 240px; }
|
||||||
|
.container .push-by-six {
|
||||||
|
left: 288px; }
|
||||||
|
.container .push-by-seven {
|
||||||
|
left: 336px; }
|
||||||
|
.container .push-by-eight {
|
||||||
|
left: 384px; }
|
||||||
|
.container .push-by-nine {
|
||||||
|
left: 432px; }
|
||||||
|
.container .push-by-ten {
|
||||||
|
left: 480px; }
|
||||||
|
.container .push-by-eleven {
|
||||||
|
left: 528px; }
|
||||||
|
.container .push-by-twelve {
|
||||||
|
left: 576px; }
|
||||||
|
.container .push-by-thirteen {
|
||||||
|
left: 624px; }
|
||||||
|
.container .push-by-fourteen {
|
||||||
|
left: 672px; }
|
||||||
|
.container .push-by-fifteen {
|
||||||
|
left: 720px; }
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 768px; }
|
width: 768px; }
|
||||||
@ -583,8 +703,7 @@ hr {
|
|||||||
.clearfix:after {
|
.clearfix:after {
|
||||||
clear: both; }
|
clear: both; }
|
||||||
|
|
||||||
.row,
|
.row, .clearfix {
|
||||||
.clearfix {
|
|
||||||
zoom: 1; }
|
zoom: 1; }
|
||||||
|
|
||||||
.clear {
|
.clear {
|
||||||
@ -713,7 +832,7 @@ ol {
|
|||||||
list-style: decimal; }
|
list-style: decimal; }
|
||||||
|
|
||||||
ol, ul.square, ul.circle, ul.disc {
|
ol, ul.square, ul.circle, ul.disc {
|
||||||
margin: 0 0 0 30px; }
|
margin: 0 0 0 10px; }
|
||||||
|
|
||||||
ul.square {
|
ul.square {
|
||||||
list-style: square outside; }
|
list-style: square outside; }
|
||||||
@ -852,7 +971,8 @@ select {
|
|||||||
background: white; }
|
background: white; }
|
||||||
|
|
||||||
select {
|
select {
|
||||||
padding: 10px; }
|
padding: 10px;
|
||||||
|
width: 220px; }
|
||||||
|
|
||||||
input[type="text"]:focus,
|
input[type="text"]:focus,
|
||||||
input[type="password"]:focus,
|
input[type="password"]:focus,
|
||||||
@ -878,9 +998,6 @@ legend {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 13px; }
|
font-size: 13px; }
|
||||||
|
|
||||||
select {
|
|
||||||
width: 220px; }
|
|
||||||
|
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
display: inline; }
|
display: inline; }
|
||||||
|
|
||||||
@ -991,10 +1108,10 @@ table {
|
|||||||
-webkit-border-top-left-radius: 3px;
|
-webkit-border-top-left-radius: 3px;
|
||||||
-moz-border-radius-topleft: 3px;
|
-moz-border-radius-topleft: 3px;
|
||||||
border-top-left-radius: 3px; }
|
border-top-left-radius: 3px; }
|
||||||
.table-bordered caption + thead tr:first-child th:last-child,
|
.table-bordered caption thead tr:first-child th:last-child,
|
||||||
.table-bordered caption + tbody tr:first-child td:last-child,
|
.table-bordered caption tbody tr:first-child td:last-child,
|
||||||
.table-bordered colgroup + thead tr:first-child th:last-child,
|
.table-bordered colgroup thead tr:first-child th:last-child,
|
||||||
.table-bordered colgroup + tbody tr:first-child td:last-child {
|
.table-bordered colgroup tbody tr:first-child td:last-child {
|
||||||
-webkit-border-top-right-radius: 3px;
|
-webkit-border-top-right-radius: 3px;
|
||||||
-moz-border-radius-topright: 3px;
|
-moz-border-radius-topright: 3px;
|
||||||
border-top-right-radius: 3px; }
|
border-top-right-radius: 3px; }
|
||||||
|
4
build/css/Ribs.min.css
vendored
4
build/css/Ribs.min.css
vendored
File diff suppressed because one or more lines are too long
@ -90,7 +90,7 @@ select {
|
|||||||
font: $form_input_font_size $form_element_font;
|
font: $form_input_font_size $form_element_font;
|
||||||
color: $form_input_text_colour;
|
color: $form_input_text_colour;
|
||||||
width: $form_input_width;
|
width: $form_input_width;
|
||||||
max-width: 100%;
|
max-width: $form_input_max_width;
|
||||||
display: block;
|
display: block;
|
||||||
margin: $form_input_margin;
|
margin: $form_input_margin;
|
||||||
background: $form_input_background;
|
background: $form_input_background;
|
||||||
@ -98,6 +98,7 @@ select {
|
|||||||
|
|
||||||
select {
|
select {
|
||||||
padding: $form_input_select_padding;
|
padding: $form_input_select_padding;
|
||||||
|
width: $form_input_select_width;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"]:focus,
|
input[type="text"]:focus,
|
||||||
@ -125,17 +126,13 @@ legend {
|
|||||||
font-size: $legend_font_size;
|
font-size: $legend_font_size;
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
|
||||||
width: $form_input_select_width;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
display: $form_input_checkbox_display;
|
display: $form_input_checkbox_display;
|
||||||
}
|
}
|
||||||
|
|
||||||
label span,
|
label span,
|
||||||
legend span {
|
legend span {
|
||||||
font-weight: normal;
|
font-weight: $form_label_legend_font_weight;
|
||||||
font-size: $form_input_font_size;
|
font-size: $form_input_font_size;
|
||||||
color: $form_label_legend_colour;
|
color: $form_label_legend_colour;
|
||||||
}
|
}
|
@ -2,8 +2,12 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
& .alpha { margin-left: 0; }
|
& .alpha {
|
||||||
& .omega { margin-right: 0; }
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
& .omega {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.column, .columns {
|
.column, .columns {
|
||||||
@ -17,7 +21,9 @@
|
|||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row { margin-bottom: $gutter; }
|
.row {
|
||||||
|
margin-bottom: $gutter;
|
||||||
|
}
|
||||||
|
|
||||||
@include grid($desktop-container-width, $column-count, $gutter);
|
@include grid($desktop-container-width, $column-count, $gutter);
|
||||||
|
|
||||||
@ -28,8 +34,12 @@
|
|||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: $tablet-container-width;
|
width: $tablet-container-width;
|
||||||
& .alpha { margin-right: 10px; }
|
& .alpha {
|
||||||
& .omega { margin-left: 10px; }
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
& .omega {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//--------------------------------------------------------------------
|
//--------------------------------------------------------------------
|
||||||
@ -85,7 +95,13 @@
|
|||||||
// #Clearing
|
// #Clearing
|
||||||
// ==================================================
|
// ==================================================
|
||||||
|
|
||||||
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
|
.container:after {
|
||||||
|
content: "\0020";
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
clear: both;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
// Use clearfix class on parent to clear nested columns,
|
// Use clearfix class on parent to clear nested columns,
|
||||||
// or wrap each row of columns in a <div class="row">
|
// or wrap each row of columns in a <div class="row">
|
||||||
@ -98,13 +114,17 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0; }
|
height: 0;
|
||||||
.row:after,
|
}
|
||||||
.clearfix:after {
|
|
||||||
clear: both; }
|
.row:after,
|
||||||
.row,
|
.clearfix:after {
|
||||||
.clearfix {
|
clear: both;
|
||||||
zoom: 1; }
|
}
|
||||||
|
|
||||||
|
.row, .clearfix {
|
||||||
|
zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
// You can also use a <br class="clear" /> to clear columns
|
// You can also use a <br class="clear" /> to clear columns
|
||||||
.clear {
|
.clear {
|
||||||
|
@ -159,6 +159,38 @@
|
|||||||
.offset-by-thirteen { padding-left: $grid-column-width*13; }
|
.offset-by-thirteen { padding-left: $grid-column-width*13; }
|
||||||
.offset-by-fourteen { padding-left: $grid-column-width*14; }
|
.offset-by-fourteen { padding-left: $grid-column-width*14; }
|
||||||
.offset-by-fifteen { padding-left: $grid-column-width*15; }
|
.offset-by-fifteen { padding-left: $grid-column-width*15; }
|
||||||
|
|
||||||
|
.pull-by-one { left: -$grid-column-width; }
|
||||||
|
.pull-by-two { left: -$grid-column-width*2; }
|
||||||
|
.pull-by-three { left: -$grid-column-width*3; }
|
||||||
|
.pull-by-four { left: -$grid-column-width*4; }
|
||||||
|
.pull-by-five { left: -$grid-column-width*5; }
|
||||||
|
.pull-by-six { left: -$grid-column-width*6; }
|
||||||
|
.pull-by-seven { left: -$grid-column-width*7; }
|
||||||
|
.pull-by-eight { left: -$grid-column-width*8; }
|
||||||
|
.pull-by-nine { left: -$grid-column-width*9; }
|
||||||
|
.pull-by-ten { left: -$grid-column-width*10; }
|
||||||
|
.pull-by-eleven { left: -$grid-column-width*11; }
|
||||||
|
.pull-by-twelve { left: -$grid-column-width*12; }
|
||||||
|
.pull-by-thirteen { left: -$grid-column-width*13; }
|
||||||
|
.pull-by-fourteen { left: -$grid-column-width*14; }
|
||||||
|
.pull-by-fifteen { left: -$grid-column-width*15; }
|
||||||
|
|
||||||
|
.push-by-one { left: $grid-column-width; }
|
||||||
|
.push-by-two { left: $grid-column-width*2; }
|
||||||
|
.push-by-three { left: $grid-column-width*3; }
|
||||||
|
.push-by-four { left: $grid-column-width*4; }
|
||||||
|
.push-by-five { left: $grid-column-width*5; }
|
||||||
|
.push-by-six { left: $grid-column-width*6; }
|
||||||
|
.push-by-seven { left: $grid-column-width*7; }
|
||||||
|
.push-by-eight { left: $grid-column-width*8; }
|
||||||
|
.push-by-nine { left: $grid-column-width*9; }
|
||||||
|
.push-by-ten { left: $grid-column-width*10; }
|
||||||
|
.push-by-eleven { left: $grid-column-width*11; }
|
||||||
|
.push-by-twelve { left: $grid-column-width*12; }
|
||||||
|
.push-by-thirteen { left: $grid-column-width*13; }
|
||||||
|
.push-by-fourteen { left: $grid-column-width*14; }
|
||||||
|
.push-by-fifteen { left: $grid-column-width*15; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -170,3 +202,13 @@
|
|||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin visible {
|
||||||
|
display: block !important;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin hidden {
|
||||||
|
display: none !important;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
@ -115,10 +115,10 @@ table {
|
|||||||
colgroup tbody tr:first-child td:first-child {
|
colgroup tbody tr:first-child td:first-child {
|
||||||
@include border-top-left-radius($table_border_radius);
|
@include border-top-left-radius($table_border_radius);
|
||||||
}
|
}
|
||||||
caption + thead tr:first-child th:last-child,
|
caption thead tr:first-child th:last-child,
|
||||||
caption + tbody tr:first-child td:last-child,
|
caption tbody tr:first-child td:last-child,
|
||||||
colgroup + thead tr:first-child th:last-child,
|
colgroup thead tr:first-child th:last-child,
|
||||||
colgroup + tbody tr:first-child td:last-child {
|
colgroup tbody tr:first-child td:last-child {
|
||||||
@include border-top-right-radius($table_border_radius);
|
@include border-top-right-radius($table_border_radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -77,7 +77,7 @@ p img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
em {
|
em {
|
||||||
font-style: italic;
|
font-style: $em_font_style;
|
||||||
}
|
}
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
@ -86,7 +86,7 @@ strong {
|
|||||||
}
|
}
|
||||||
|
|
||||||
small {
|
small {
|
||||||
font-size: 80%;
|
font-size: $small_font_size;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote, blockquote p {
|
blockquote, blockquote p {
|
||||||
|
@ -34,6 +34,7 @@ $form_input_text_colour: #777;
|
|||||||
$form_input_background: #fff;
|
$form_input_background: #fff;
|
||||||
$form_input_padding: 6px 4px;
|
$form_input_padding: 6px 4px;
|
||||||
$form_input_width: 210px;
|
$form_input_width: 210px;
|
||||||
|
$form_input_max_width: 100%;
|
||||||
$form_input_select_width: 220px;
|
$form_input_select_width: 220px;
|
||||||
$form_input_margin: 0 0 20px 0;
|
$form_input_margin: 0 0 20px 0;
|
||||||
$form_input_font_size: 13px;
|
$form_input_font_size: 13px;
|
||||||
@ -52,6 +53,7 @@ $form_input_focus_box_shadow_colour: rgba(0, 0, 0, .2);
|
|||||||
$form_input_select_padding: 10px;
|
$form_input_select_padding: 10px;
|
||||||
|
|
||||||
$form_label_legend_colour: #444;
|
$form_label_legend_colour: #444;
|
||||||
|
$form_label_legend_font_weight: normal;
|
||||||
$form_fieldset_margin: 0 0 20px 0;
|
$form_fieldset_margin: 0 0 20px 0;
|
||||||
|
|
||||||
$legend_font_weight: bold;
|
$legend_font_weight: bold;
|
||||||
@ -101,6 +103,10 @@ $paragraph_lead_font_size: 21px;
|
|||||||
$paragraph_lead_line_height: $paragraph_lead_font_size * 1.5;
|
$paragraph_lead_line_height: $paragraph_lead_font_size * 1.5;
|
||||||
$paragraph_lead_colour: #777;
|
$paragraph_lead_colour: #777;
|
||||||
|
|
||||||
|
$em_font_style: italic;
|
||||||
|
|
||||||
|
$small_font_size: 80%;
|
||||||
|
|
||||||
$strong_colour: #333;
|
$strong_colour: #333;
|
||||||
|
|
||||||
$blockquote_colour: #777;
|
$blockquote_colour: #777;
|
||||||
@ -126,7 +132,7 @@ $list_large_line_height: 21px;
|
|||||||
$ul_list_style: none outside;
|
$ul_list_style: none outside;
|
||||||
$ol_list_style: decimal;
|
$ol_list_style: decimal;
|
||||||
|
|
||||||
$list_styled_margin: 0 0 0 30px; // ul, ol with disc, square etc.
|
$list_styled_margin: 0 0 0 10px; // ul, ol with disc, square etc.
|
||||||
$list_styled_position: outside; // List item bullet position
|
$list_styled_position: outside; // List item bullet position
|
||||||
|
|
||||||
$nested_list_margin: 4px 0 5px 30px;
|
$nested_list_margin: 4px 0 5px 30px;
|
||||||
|
Loading…
Reference in New Issue
Block a user