vendor/kube/grid.less in kube-rails-0.0.10 vs vendor/kube/grid.less in kube-rails-0.2.0
- old
+ new
@@ -1,36 +1,33 @@
/* =Grid
-----------------------------------------------------------------------------*/
.units-container,
.units-row-end,
.units-row {
- .clearfixing;
+ .clearfix;
}
.units-container { /* it's the trick to not collapse padding-top in the child element */
padding-top: 1px;
margin-top: -1px;
}
-.units-container,
-.units-row-end,
.units-row {
- .box-sizing(border-box);
+ margin-bottom: @baseLine / @em;
}
-.units-row {
- margin-bottom: 1.5em;
-}
.units-row-end {
margin-bottom: 0;
}
.width-100, .unit-100 { width: 100%; }
.width-80, .unit-80 { width: 80%; }
.width-75, .unit-75 { width: 75%; }
.width-70, .unit-70 { width: 70%; }
.width-66, .unit-66 { width: 66.6%; }
+.width-65, .unit-65 { width: 65%; }
.width-60, .unit-60 { width: 60%; }
.width-50, .unit-50 { width: 50%; }
.width-40, .unit-40 { width: 40%; }
+.width-35, .unit-35 { width: 35%; }
.width-33, .unit-33 { width: 33.3%; }
.width-30, .unit-30 { width: 30%; }
.width-25, .unit-25 { width: 25%; }
.width-20, .unit-20 { width: 20%; }
@@ -39,129 +36,79 @@
textarea.width-100,
textarea.unit-100 { width: 98.8%; }
select.width-100,
select.unit-100 { width: 99.4%; }
-.width-100,
-.width-80,
-.width-75,
-.width-70,
-.width-66,
-.width-60,
-.width-50,
-.width-40,
-.width-33,
-.width-30,
-.width-25,
-.width-20,
-.units-row .unit-100,
.units-row .unit-80,
.units-row .unit-75,
.units-row .unit-70,
.units-row .unit-66,
+.units-row .unit-65,
.units-row .unit-60,
.units-row .unit-50,
.units-row .unit-40,
+.units-row .unit-35,
.units-row .unit-33,
.units-row .unit-30,
.units-row .unit-25,
.units-row .unit-20,
.units-row-end .unit-100,
.units-row-end .unit-80,
.units-row-end .unit-75,
.units-row-end .unit-70,
.units-row-end .unit-66,
+.units-row-end .unit-65,
.units-row-end .unit-60,
.units-row-end .unit-50,
.units-row-end .unit-40,
+.units-row-end .unit-35,
.units-row-end .unit-33,
.units-row-end .unit-30,
.units-row-end .unit-25,
.units-row-end .unit-20 {
- .box-sizing(border-box);
-}
-.units-row .unit-80,
-.units-row .unit-75,
-.units-row .unit-70,
-.units-row .unit-66,
-.units-row .unit-60,
-.units-row .unit-50,
-.units-row .unit-40,
-.units-row .unit-33,
-.units-row .unit-30,
-.units-row .unit-25,
-.units-row .unit-20,
-.units-row-end .unit-100,
-.units-row-end .unit-80,
-.units-row-end .unit-75,
-.units-row-end .unit-70,
-.units-row-end .unit-66,
-.units-row-end .unit-60,
-.units-row-end .unit-50,
-.units-row-end .unit-40,
-.units-row-end .unit-33,
-.units-row-end .unit-30,
-.units-row-end .unit-25,
-.units-row-end .unit-20 {
float: left;
margin-left: @gridGutterWidth/(@gridWidth/100)*1%;
+ &:first-child {
+ margin-left: 0;
+ }
}
-.units-row .unit-80:first-child,
-.units-row .unit-75:first-child,
-.units-row .unit-70:first-child,
-.units-row .unit-66:first-child,
-.units-row .unit-60:first-child,
-.units-row .unit-50:first-child,
-.units-row .unit-40:first-child,
-.units-row .unit-33:first-child,
-.units-row .unit-30:first-child,
-.units-row .unit-25:first-child,
-.units-row .unit-20:first-child,
-.units-row-end .unit-100:first-child,
-.units-row-end .unit-80:first-child,
-.units-row-end .unit-75:first-child,
-.units-row-end .unit-70:first-child,
-.units-row-end .unit-66:first-child,
-.units-row-end .unit-60:first-child,
-.units-row-end .unit-50:first-child,
-.units-row-end .unit-40:first-child,
-.units-row-end .unit-33:first-child,
-.units-row-end .unit-30:first-child,
-.units-row-end .unit-25:first-child,
-.units-row-end .unit-20:first-child {
- margin-left: 0;
-}
.units-row .unit-80,
.units-row-end .unit-80 { .columns(4, 5); }
.units-row .unit-75,
.units-row-end .unit-75 { .columns(3, 4); }
.units-row .unit-70,
.units-row-end .unit-70 { .columns(7, 10); }
.units-row .unit-66,
.units-row-end .unit-66 { .columns(2, 3); }
+.units-row .unit-65,
+.units-row-end .unit-65 { .columns(2, 3); }
.units-row .unit-60,
.units-row-end .unit-60 { .columns(3, 5); }
.units-row .unit-50,
.units-row-end .unit-50 { .column(2); }
.units-row .unit-40,
.units-row-end .unit-40 { .columns(2, 5); }
-.units-row .unit-30,
-.units-row-end .unit-30 { .columns(3, 10); }
+.units-row .unit-35,
+.units-row-end .unit-35 { .column(3); }
.units-row .unit-33,
.units-row-end .unit-33 { .column(3); }
+.units-row .unit-30,
+.units-row-end .unit-30 { .columns(3, 10); }
.units-row .unit-25,
.units-row-end .unit-25 { .column(4); }
.units-row .unit-20,
.units-row-end .unit-20 { .column(5); }
.unit-push-80,
.unit-push-75,
.unit-push-70,
.unit-push-66,
+.unit-push-65,
.unit-push-60,
.unit-push-50,
.unit-push-40,
+.unit-push-35,
.unit-push-33,
.unit-push-30,
.unit-push-25,
.unit-push-20 {
position: relative;
@@ -169,65 +116,165 @@
.unit-push-30 { .columns-push(3, 10); }
.unit-push-80 { .columns-push(4, 5); }
.unit-push-75 { .columns-push(3, 4); }
.unit-push-70 { .columns-push(7, 10); }
.unit-push-66 { .columns-push(2, 3); }
+.unit-push-65 { .columns-push(2, 3); }
.unit-push-60 { .columns-push(3, 5); }
.unit-push-50 { .column-push(2); }
.unit-push-40 { .columns-push(2, 5); }
+.unit-push-35 { .column-push(3); }
.unit-push-33 { .column-push(3); }
.unit-push-25 { .column-push(4); }
.unit-push-20 { .column-push(5); }
-.unit-push-right {
+.units-row .unit-push-right,
+.units-row-end .unit-push-right {
float: right;
}
.centered,
.unit-centered {
float: none !important;
margin: 0 auto !important;
}
.unit-padding {
- padding: @baseLine/@em;
+ padding: @baseLine / @em;
}
.units-padding .unit-100,
.units-padding .unit-80,
.units-padding .unit-75,
.units-padding .unit-70,
.units-padding .unit-66,
+.units-padding .unit-65,
.units-padding .unit-60,
.units-padding .unit-50,
.units-padding .unit-40,
+.units-padding .unit-35,
.units-padding .unit-33,
.units-padding .unit-30,
.units-padding .unit-25,
.units-padding .unit-20 {
- padding: @baseLine/@em;
+ padding: @baseLine / @em;
}
.units-split .unit-80,
.units-split .unit-75,
.units-split .unit-70,
.units-split .unit-66,
+.units-split .unit-65,
.units-split .unit-60,
.units-split .unit-50,
.units-split .unit-40,
+.units-split .unit-35,
.units-split .unit-33,
.units-split .unit-30,
.units-split .unit-25,
.units-split .unit-20 {
margin-left: 0;
}
.units-split .unit-80 { width: 80%; }
.units-split .unit-75 { width: 75%; }
.units-split .unit-70 { width: 70%; }
.units-split .unit-66 { width: 66.6%; }
+.units-split .unit-65 { width: 65%; }
.units-split .unit-60 { width: 60%; }
.units-split .unit-50 { width: 50%; }
.units-split .unit-40 { width: 40%; }
+.units-split .unit-35 { width: 35%; }
.units-split .unit-33 { width: 33.3%; }
.units-split .unit-30 { width: 30%; }
.units-split .unit-25 { width: 25%; }
.units-split .unit-20 { width: 20%; }
+
+/* =Responsive
+-----------------------------------------------------------------------------*/
+@media only screen and (max-width: 767px) {
+
+ .units-row .unit-80,
+ .units-row .unit-75,
+ .units-row .unit-70,
+ .units-row .unit-66,
+ .units-row .unit-65,
+ .units-row .unit-60,
+ .units-row .unit-50,
+ .units-row .unit-40,
+ .units-row .unit-35,
+ .units-row .unit-33,
+ .units-row .unit-30,
+ .units-row .unit-25,
+ .units-row .unit-20,
+ .units-row-end .unit-80,
+ .units-row-end .unit-75,
+ .units-row-end .unit-70,
+ .units-row-end .unit-66,
+ .units-row-end .unit-65,
+ .units-row-end .unit-60,
+ .units-row-end .unit-50,
+ .units-row-end .unit-40,
+ .units-row-end .unit-35,
+ .units-row-end .unit-33,
+ .units-row-end .unit-30,
+ .units-row-end .unit-25,
+ .units-row-end .unit-20 {
+ width: 100%;
+ float: none;
+ margin-left: 0;
+ margin-bottom: @baseLine/@em;
+ }
+
+ .unit-push-80,
+ .unit-push-75,
+ .unit-push-70,
+ .unit-push-66,
+ .unit-push-65,
+ .unit-push-60,
+ .unit-push-50,
+ .unit-push-40,
+ .unit-push-35,
+ .unit-push-33,
+ .unit-push-30,
+ .unit-push-25,
+ .unit-push-20 {
+ left: 0;
+ }
+
+ .units-row-end .unit-push-right,
+ .units-row .unit-push-right {
+ float: none;
+ }
+
+ .units-mobile-50 .unit-80,
+ .units-mobile-50 .unit-75,
+ .units-mobile-50 .unit-70,
+ .units-mobile-50 .unit-66,
+ .units-mobile-50 .unit-65,
+ .units-mobile-50 .unit-60,
+ .units-mobile-50 .unit-40,
+ .units-mobile-50 .unit-30,
+ .units-mobile-50 .unit-35,
+ .units-mobile-50 .unit-33,
+ .units-mobile-50 .unit-25,
+ .units-mobile-50 .unit-20 {
+ float: left;
+ margin-left: @gridGutterWidth/(@gridWidth/100)*1%;
+ .column(2);
+ }
+ .units-mobile-50 .unit-80:first-child,
+ .units-mobile-50 .unit-75:first-child,
+ .units-mobile-50 .unit-70:first-child,
+ .units-mobile-50 .unit-66:first-child,
+ .units-mobile-50 .unit-65:first-child,
+ .units-mobile-50 .unit-60:first-child,
+ .units-mobile-50 .unit-40:first-child,
+ .units-mobile-50 .unit-35:first-child,
+ .units-mobile-50 .unit-30:first-child,
+ .units-mobile-50 .unit-33:first-child,
+ .units-mobile-50 .unit-25:first-child,
+ .units-mobile-50 .unit-20:first-child {
+ margin-left: 0;
+ }
+
+
+}