assets/test/kitchensink.scss in edge_framework-1.4.1 vs assets/test/kitchensink.scss in edge_framework-2.0.0.a
- old
+ new
@@ -1,9 +1,28 @@
@import "../sass/edge/base";
@import "../sass/edge/helpers";
+@mixin crow(
+ $gutter: 0,
+ $collapse: 0,
+ $width: 0
+) {
+
+}
+@mixin ccolumn(
+ $size: 0,
+ $small: 0,
+ $mini: 0,
+ $offset: 0,
+ $gutter: 0,
+ $collapse: false,
+ $centered: false
+) {
+
+}
+
.custom-grid {
@include column(3);
}
.custom-gridx {
@@ -22,134 +41,47 @@
width: 50px;
height: 50px;
}
}
-[data-page="visibility"] {
-
- .visibility-class,
- .visibility-mixin {
- p:nth-child(1) {
- color: $red-color;
- }
- p:nth-child(2) {
- color: $blue-color;
- }
- p:nth-child(3) {
- color: $green-color;
- }
- p:nth-child(4) {
- color: $yellow-color;
- }
- p:nth-child(5) {
- color: #333;
- }
- p:nth-child(6) {
- color: #bbb;
- }
- }
-
- .visibility-table {
- table:nth-child(1) td {
- color: $red-color;
- }
- table:nth-child(2) td {
- color: $blue-color;
- }
- table:nth-child(3) td {
- color: $green-color;
- }
- table:nth-child(4) td {
- color: $yellow-color;
- }
- table:nth-child(5) td {
- color: #333;
- }
- table:nth-child(6) td {
- color: #bbb;
- }
- }
-
- .visibility-td {
- table:nth-child(1) td {
- color: $red-color;
- }
- table:nth-child(2) td {
- color: $blue-color;
- }
- table:nth-child(3) td {
- color: $green-color;
- }
- table:nth-child(4) td {
- color: $yellow-color;
- }
- table:nth-child(5) td {
- color: #333;
- }
- table:nth-child(6) td {
- color: #bbb;
- }
- table td[class*="-for-"] {
- color: #222;
- }
- }
-
- .visibility-span {
- p:nth-child(1) span {
- color: $red-color;
- }
- p:nth-child(2) span {
- color: $blue-color;
- }
- p:nth-child(3) span {
- color: $green-color;
- }
- p:nth-child(4) span {
- color: $yellow-color;
- }
- p:nth-child(5) span {
- color: #333;
- }
- p:nth-child(6) span {
- color: #bbb;
- }
- }
-}
-
.demo-grid {
@include transition($g-transition);
p {
text-align : center;
margin : 0;
}
- .column,
- .columns {
+
+ h-column {
p {
margin-bottom : em(15px);
padding-top : em(10px);
padding-bottom : em(10px);
background : #eee;
text-align : center;
}
- .column,
- .columns {
+ h-column {
p {
background : #ddd;
}
- .column,
- .columns {
+ h-column {
p {
background : #ccc;
}
}
}
}
}
.demo-tile {
+ @include tile(2);
+
+ @include below(small) {
+ @include tile(3);
+ }
+
p {
background : #eee;
margin-bottom : em(15px);
padding-top : em(10px);
padding-bottom : em(10px);
@@ -157,121 +89,79 @@
}
}
/* Custom Grid */
-.cgrid-1 {
- @include column($size:5);
-}
-.cgrid-2 {
- @include column($size:7);
-}
-.cgrid-a1 {
- @include column($size:5, $small:10);
-}
-.cgrid-a2 {
- @include column($size:7, $small:2);
-}
+.cgrid-l1 { @include column(5); }
+.cgrid-l2 { @include column(7); }
+.cgrid-ls1 { @include column(5, 10); }
+.cgrid-ls2 { @include column(7, 2); }
+
.cgrid-center {
- @include column($size: 8, $centered: true);
+ @include column(8, $centered: true);
+
@include below(small) {
- @include column($size: 6, $centered: false);
+ @include column(6, $centered: false);
}
}
-.cgrid-b1 {
+.cgrid-losom1 {
@include column(10, $offset: 2);
@include below(small) {
@include column(6, $offset: 6);
}
@include below(mini) {
- @include column(4, $offset: 1)
+ @include column(4);
}
}
-.cgrid-b2 {
- @include column($size:2, $small:4, $mini:6);
-}
-.cgrid-c1 {
- @include column($size:6, $offset:4, $small:6);
-}
-.cgrid-c2 {
- @include column($size:2, $small:6);
-}
+.cgrid-lsm1 { @include column(4, 6, 8); }
+.cgrid-lsm2 { @include column(8, 6, 4); }
-.cgrid-d1 {
- @include column($size:3, $offset:6);
+.cgrid-los1 { @include column(6, 6, $offset:4); }
+.cgrid-los2 { @include column(2, 6); }
- @include below(small) {
- @include column($size:4, $offset:6);
- }
-}
-.cgrid-d2 {
- @include column($size:3, $small:4);
-}
+// Nesting
-// .cgrid-e1 {
-// @include column($size:3, $offset:6, $small:4, $small-offset:4, $mini:6);
-// }
-// .cgrid-e2 {
-// @include column($size:3, $small:4, $mini:6);
-// }
+.cgrid-nest1 { @include column(6, 6); }
+ .cgrid-nest1-1 { @include column(8, 8); }
+ .cgrid-nest1-2 { @include column(4, 4); }
+.cgrid-nest2 { @include column(4, 4); }
+.cgrid-nest3 { @include column(2, 2); }
+.cgrid-c { @include row($collapse: true); }
-// .cgrid-f1 {
-// @include column($size:3, $offset:6, $small:4, $small-offset:4, $mini:5);
-// }
-// .cgrid-f2 {
-// @include column($size:3, $small:4, $mini:6);
-// }
+// Gutter
-.cgrid-g1 {
- @include column($size:4, $push:8);
+.cgrid-gutter-r1 {
+ @include row($gutter: 50px, $width: 960px);
}
-.cgrid-g2 {
- @include column($size:8, $pull:4);
-}
-.cgrid-h1 {
- @include column($size:8, $small:8);
+.cgrid-gutter-r2 {
+ @include row($gutter: 10px);
}
- .cgrid-h1-1 {
- @include column($size:5, $small:5);
- }
- .cgrid-h1-2 {
- @include column($size:7, $small:7);
- }
-.cgrid-h2 {
- @include column($size:4, $small:4);
-}
- .cgrid-h2-1 {
- @include column($size:6, $small:6, $centered:true);
- }
-.cgrid-i0 {
- @include row($gutter:50px);
-}
-.cgrid-i1 {
- @include column($size:6, $gutter:50px);
-}
-.cgrid-i2 {
- @include column($size:6, $gutter:50px);
-}
+.cgrid-gutter1 { @include column(8, 6); }
+.cgrid-gutter2 { @include column(4, 6); }
/* Custom Tile */
-.custom-tile-1 {
- @include tile($size:5);
+.ctile-1 {
+ @include tile(5, $gutter: 5px);
}
-.custom-tile-2 {
- @include tile($size:5, $small:3, $collapse:true);
+.ctile-2 {
+ @include tile(5, $collapse: true);
+
+ @include below(small) {
+ @include tile(3);
+ }
}
-.custom-tile-3 {
+.ctile-3 {
@include tile(5, 3, 2);
}
/* --------------------
DESIGN CUSTOM GRID
@@ -300,45 +190,7 @@
}
[data-page="triangle"] {
.triangle1 {
@include triangle($color:$main-color, $width:100px, $direction:right);
- }
-}
-
-[data-page="button"] {
- .button {
- margin-top: 20px;
-
- &.blue-button {
- @include button($blue-color);
- }
-
- &.red-button {
- @include button($red-color);
- }
-
- &.green-button {
- @include button($green-color);
- }
-
- &.yellow-button {
- @include button($yellow-color);
- }
-
- &.white-button {
- @include button(#f0f0f0);
- }
-
- &.grey-button {
- @include button(#bbb);
- }
-
- &.darkgrey-button {
- @include button(#777);
- }
-
- &.black-button {
- @include button(#333);
- }
}
}
\ No newline at end of file