From: Anthony Talarico Date: Thu, 1 Dec 2016 21:33:11 +0000 (-0500) Subject: adding more glm-grid support via scss X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=c247ebd08b69202754cc295477415e4a260ff260;p=WP-Plugins%2Fglm-member-db.git adding more glm-grid support via scss --- diff --git a/css/glm-grid.css b/css/glm-grid.css index d0028ddc..dde605f6 100644 --- a/css/glm-grid.css +++ b/css/glm-grid.css @@ -1,3 +1,3 @@ -.glm-small-1{width:5.33333rem}.glm-small-2{width:10.66667rem}.glm-small-3{width:16rem}.glm-small-4{width:21.33333rem}.glm-small-5{width:26.66667rem}.glm-small-6{width:32rem}.glm-small-7{width:37.33333rem}.glm-small-8{width:42.66667rem}.glm-small-9{width:48rem}.glm-small-10{width:53.33333rem}.glm-small-11{width:58.66667rem}.glm-small-12{width:64rem}.glm-medium-1{width:5.33333rem}.glm-medium-2{width:10.66667rem}.glm-medium-3{width:16rem}.glm-medium-4{width:21.33333rem}.glm-medium-5{width:26.66667rem}.glm-medium-6{width:32rem}.glm-medium-7{width:37.33333rem}.glm-medium-8{width:42.66667rem}.glm-medium-9{width:48rem}.glm-medium-10{width:53.33333rem}.glm-medium-11{width:58.66667rem}.glm-medium-12{width:64rem}.glm-large-1{width:5.33333rem}.glm-large-2{width:10.66667rem}.glm-large-3{width:16rem}.glm-large-4{width:21.33333rem}.glm-large-5{width:26.66667rem}.glm-large-6{width:32rem}.glm-large-7{width:37.33333rem}.glm-large-8{width:42.66667rem}.glm-large-9{width:48rem}.glm-large-10{width:53.33333rem}.glm-large-11{width:58.66667rem}.glm-large-12{width:64rem} +.glm-small-1{width:5.33333rem}.glm-small-2{width:10.66667rem}.glm-small-3{width:16rem}.glm-small-4{width:21.33333rem}.glm-small-5{width:26.66667rem}.glm-small-6{width:32rem}.glm-small-7{width:37.33333rem}.glm-small-8{width:42.66667rem}.glm-small-9{width:48rem}.glm-small-10{width:53.33333rem}.glm-small-11{width:58.66667rem}.glm-small-12{width:64rem}.glm-medium-1{width:5.33333rem}.glm-medium-2{width:10.66667rem}.glm-medium-3{width:16rem}.glm-medium-4{width:21.33333rem}.glm-medium-5{width:26.66667rem}.glm-medium-6{width:32rem}.glm-medium-7{width:37.33333rem}.glm-medium-8{width:42.66667rem}.glm-medium-9{width:48rem}.glm-medium-10{width:53.33333rem}.glm-medium-11{width:58.66667rem}.glm-medium-12{width:64rem}.glm-large-1{width:5.33333rem}.glm-large-2{width:10.66667rem}.glm-large-3{width:16rem}.glm-large-4{width:21.33333rem}.glm-large-5{width:26.66667rem}.glm-large-6{width:32rem}.glm-large-7{width:37.33333rem}.glm-large-8{width:42.66667rem}.glm-large-9{width:48rem}.glm-large-10{width:53.33333rem}.glm-large-11{width:58.66667rem}.glm-large-12{width:64rem}@media only screen{.glm-small-1{width:8.33333%}.glm-small-2{width:16.66667%}.glm-small-3{width:25%}.glm-small-4{width:33.33333%}.glm-small-5{width:41.66667%}.glm-small-6{width:50%}.glm-small-7{width:58.33333%}.glm-small-8{width:66.66667%}.glm-small-9{width:75%}.glm-small-10{width:83.33333%}.glm-small-11{width:91.66667%}.glm-small-12{width:100%}}@media only screen and (min-width: 40.0625em){.glm-medium-1{width:8.33333%}.glm-medium-2{width:16.66667%}.glm-medium-3{width:25%}.glm-medium-4{width:33.33333%}.glm-medium-5{width:41.66667%}.glm-medium-6{width:50%}.glm-medium-7{width:58.33333%}.glm-medium-8{width:66.66667%}.glm-medium-9{width:75%}.glm-medium-10{width:83.33333%}.glm-medium-11{width:91.66667%}.glm-medium-12{width:100%}}@media only screen and (min-width: 64.0625em){.glm-large-1{width:8.33333%}.glm-large-2{width:16.66667%}.glm-large-3{width:25%}.glm-large-4{width:33.33333%}.glm-large-5{width:41.66667%}.glm-large-6{width:50%}.glm-large-7{width:58.33333%}.glm-large-8{width:66.66667%}.glm-large-9{width:75%}.glm-large-10{width:83.33333%}.glm-large-11{width:91.66667%}.glm-large-12{width:100%}}.glm-row{width:100%;position:relative}.glm-row::after{clear:both}.glm-row::before,.glm-row::after{content:" ";display:table}.glm-row::before,.glm-row::after{content:" ";display:table}.glm-row{margin-left:auto;margin-right:auto;max-width:64rem}.glm-column,.glm-columns{padding-left:0.9375rem;padding-right:0.9375rem;float:left}.glm-hide{display:none}.glm-left{float:left}.glm-right{float:right}.glm-text-center{text-align:center}.glm-text-right{text-align:right}.glm-text-left{text-align:left}.glm-text-justify{text-align:justify}.glm-horizontal-center{margin:auto 0}.glm-round{border-radius:1000px}.glm-radius{border-radius:4px}@media only screen{.glm-hide-for-small-up{display:none}.glm-small-up-text-right{text-align:right}.glm-small-up-text-left{text-align:left}.glm-small-up-text-center{text-align:center}.glm-small-up-text-justify{text-align:justify}}@media only screen and (max-width: 40em){.glm-hide-for-small-only{display:none}.glm-small-only-text-right{text-align:right}.glm-small-only-text-left{text-align:left}.glm-small-only-text-center{text-align:center}.glm-small-only-text-justify{text-align:justify}}@media only screen and (min-width: 0em) and (max-width: 64em){.glm-hide-for-medium-down{display:none}.glm-medium-down-text-right{text-align:right}.glm-medium-down-text-left{text-align:left}.glm-medium-down-text-center{text-align:center}.glm-medium-down-text-justify{text-align:justify}}@media only screen and (min-width: 40.063em) and (max-width: 64em){.glm-hide-for-medium-only{display:none}.glm-medium-only-text-right{text-align:right}.glm-medium-only-text-left{text-align:left}.glm-medium-only-text-center{text-align:center}.glm-medium-only-text-justify{text-align:justify}}@media only screen and (min-width: 40.063em){.glm-hide-for-medium-up{display:none}.glm-medium-up-text-right{text-align:right}.glm-medium-up-text-left{text-align:left}.glm-medium-up-text-center{text-align:center}.glm-medium-up-text-justify{text-align:justify}}@media only screen and (min-width: 64.063em){.glm-hide-for-large-up{display:none}.glm-large-up-text-right{text-align:right}.glm-large-up-text-left{text-align:left}.glm-large-up-text-center{text-align:center}.glm-large-up-text-justify{text-align:justify}}@media only screen and (min-width: 64.063em) and (max-width: 90em){.glm-hide-for-large-only{display:none}.glm-large-only-text-right{text-align:right}.glm-large-only-text-left{text-align:left}.glm-large-only-text-center{text-align:center}.glm-large-only-text-justify{text-align:justify}} /*# sourceMappingURL=glm-grid.css.map */ diff --git a/css/glm-grid.css.map b/css/glm-grid.css.map index 45152f45..70ffc6f7 100644 --- a/css/glm-grid.css.map +++ b/css/glm-grid.css.map @@ -1 +1 @@ -{"version":3,"file":"glm-grid.css","sources":["app.scss","_functions.scss","_settings.scss","_mixins.scss","_glm-grid.scss"],"sourcesContent":["@import 'functions';\n@import 'settings';\n@import 'mixins';\n@import 'glm-grid';\n","@function lower-bound($range){\n @if length($range) <= 0 {\n @return 0;\n }\n @return nth($range,1);\n}\n\n@function upper-bound($range) {\n @if length($range) < 2 {\n @return 999999999999;\n }\n @return nth($range, 2);\n}","$max-columns: 12;\n$max-width: 64rem;\n$prefix: glm;\n$sizes: \"small\" \"medium\" \"large\";\n$width-per-column: $max-width / $max-columns;\n\n$break-small: 0;\n$break-medium: 0;\n$break-large: 0;\n\n$small-range: (0em, 50em);\n$medium-range: (50.063em, $max-width);\n$large-range: (64.063em, 90em);\n$xlarge-range: (90.063em, 120em);\n$xxlarge-range: (120.063em, 99999999em);\n\n$screen: \"only screen\";\n\n$landscape: \"#{$screen} and (orientation: landscape)\";\n$portrait: \"#{$screen} and (orientation: portrait)\";\n\n$small-up: $screen;\n$small-only: \"#{$screen} and (max-width: #{upper-bound($small-range)})\";\n\n$medium-up: \"#{$screen} and (min-width:#{lower-bound($medium-range)})\";\n$medium-down: \"#{$screen} and (max-width:#{lower-bound($medium-range)})\";\n$medium-only: \"#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})\";\n\n$large-up: \"#{$screen} and (min-width:#{lower-bound($large-range)})\";\n$large-only: \"#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})\";\n\n$xlarge-up: \"#{$screen} and (min-width:#{lower-bound($xlarge-range)})\";\n$xlarge-only: \"#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})\";\n\n$xxlarge-up: \"#{$screen} and (min-width:#{lower-bound($xxlarge-range)})\";\n$xxlarge-only: \"#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})\";\n","@mixin box($color) {\n display: block;\n width: 200px;\n height: 200px;\n}\n\n@each $size in $sizes {\n @for $column from 1 through $max-columns {\n $column-width: $width-per-column * $column;\n .#{$prefix}-#{$size}-#{$column} {\n width: #{$column-width};\n }\n }\n}","/*#glm-member-detail-takeback-mini {\n //@include box(red);\n}\n\n@media #{$small-up} {\n // This is how you would use a media query\n}\n\n@media screen and (max-width: $break-small) {\n // Something needs to happen here eventually. Maybe?\n}\n@media only screen {\n\n .glm-small-1 {\n width: 8.33333%; }\n\n .glm-small-2 {\n width: 16.66667%; }\n\n .glm-small-3 {\n width: 25%; }\n\n .glm-small-4 {\n width: 33.33333%; }\n\n .glm-small-5 {\n width: 41.66667%; }\n\n .glm-small-6 {\n width: 50%; }\n\n .glm-small-7 {\n width: 58.33333%; }\n\n .glm-small-8 {\n width: 66.66667%; }\n\n .glm-small-9 {\n width: 75%; }\n\n .glm-small-10 {\n width: 83.33333%; }\n\n .glm-small-11 {\n width: 91.66667%; }\n\n .glm-small-12 {\n width: 100%; }\n\n}\n@media only screen and (min-width: 40.0625em){\n .glm-medium-1 {\n width: 8.33333%; }\n\n .glm-medium-2 {\n width: 16.66667%; }\n\n .glm-medium-3 {\n width: 25%; }\n\n .glm-medium-4 {\n width: 33.33333%; }\n\n .glm-medium-5 {\n width: 41.66667%; }\n\n .glm-medium-6 {\n width: 50%; }\n\n .glm-medium-7 {\n width: 58.33333%; }\n\n .glm-medium-8 {\n width: 66.66667%; }\n\n .glm-medium-9 {\n width: 75%; }\n\n .glm-medium-10 {\n width: 83.33333%; }\n\n .glm-medium-11 {\n width: 91.66667%; }\n\n .glm-medium-12 {\n width: 100%; }\n}\n@media only screen and (min-width: 64.0625em) {\n .glm-large-1 {\n width: 8.33333%; }\n\n .glm-large-2 {\n width: 16.66667%; }\n\n .glm-large-3 {\n width: 25%; }\n\n .glm-large-4 {\n width: 33.33333%; }\n\n .glm-large-5 {\n width: 41.66667%; }\n\n .glm-large-6 {\n width: 50%; }\n\n .glm-large-7 {\n width: 58.33333%; }\n\n .glm-large-8 {\n width: 66.66667%; }\n\n .glm-large-9 {\n width: 75%; }\n\n .glm-large-10 {\n width: 83.33333%; }\n\n .glm-large-11 {\n width: 91.66667%; }\n\n .glm-large-12 {\n width: 100%; }\n}\n.glm-row {\n width: 100%;\n position: relative;\n &::after {\n clear: both;\n }\n}\n.glm-row::before, .glm-row::after {\n content: \" \";\n display: table;\n}\n*, *::before, *::after {\n box-sizing: inherit;\n}\n.glm-row::before, .glm-row::after {\n content: \" \";\n display: table;\n}\n*, *::before, *::after {\n box-sizing: inherit;\n}\n.glm-row {\n clear: both;\n}\n.glm-row {\n margin-left: auto;\n margin-right: auto;\n max-width: $max-width;\n}\nglm-column, glm-columns{\n padding-left: 0.9375rem;\n padding-right: 0.9375rem;\n width: 100%;\n float: left; \n}\n*/\n"],"mappings":"AGSQ,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,UAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,UAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,cAAc,AAAd,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,cAAc,AAAd,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,cAAc,AAAd,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,UAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,KAAC,CACR","names":[],"sourceRoot":"/source/"} \ No newline at end of file +{"version":3,"file":"glm-grid.css","sources":["app.scss","_functions.scss","_settings.scss","_mixins.scss","_glm-grid.scss","_utilities.scss"],"sourcesContent":["@import 'functions';\n@import 'settings';\n@import 'mixins';\n@import 'glm-grid';\n@import 'utilities';\n","@function lower-bound($range){\n @if length($range) <= 0 {\n @return 0;\n }\n @return nth($range,1);\n}\n\n@function upper-bound($range) {\n @if length($range) < 2 {\n @return 999999999999;\n }\n @return nth($range, 2);\n}","$max-columns: 12;\n$max-width: 64rem;\n$prefix: glm;\n$sizes: \"small\" \"medium\" \"large\";\n\n$width-per-column: $max-width / $max-columns;\n\n$break-small: 0;\n$break-medium: 0;\n$break-large: 0;\n\n$small-range: (0em, 40em);\n$medium-range: (40.063em, 64em);\n$large-range: (64.063em, 90em);\n$xlarge-range: (90.063em, 120em);\n$xxlarge-range: (120.063em, 99999999em);\n\n$screen: \"only screen\";\n\n$landscape: \"#{$screen} and (orientation: landscape)\";\n$portrait: \"#{$screen} and (orientation: portrait)\";\n\n$small-up: $screen;\n$small-only: \"#{$screen} and (max-width: #{upper-bound($small-range)})\";\n\n$medium-up: \"#{$screen} and (min-width:#{lower-bound($medium-range)})\";\n$medium-only: \"#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})\";\n\n$medium-down: \"#{$screen} and (min-width:#{lower-bound($small-range)}) and (max-width:#{upper-bound($medium-range)})\";\n\n$large-up: \"#{$screen} and (min-width:#{lower-bound($large-range)})\";\n$large-only: \"#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})\";\n\n$large-down: \"#{$screen} and (min-width:#{lower-bound($small-range)}) and (max-width:#{upper-bound($large-range)})\";\n\n$xlarge-up: \"#{$screen} and (min-width:#{lower-bound($xlarge-range)})\";\n$xlarge-only: \"#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})\";\n\n$xxlarge-up: \"#{$screen} and (min-width:#{lower-bound($xxlarge-range)})\";\n$xxlarge-only: \"#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})\";\n\n// Legacy\n$small: $medium-up;\n$medium: $medium-up;\n$large: $large-up;\n\n$breakpoint-values: '#{$small-up}' '#{$small-only}' '#{$medium-down}' '#{$medium-only}' '#{$medium-up}' '#{$large-up}' '#{$large-only}';\n$breakpoints: 'small-up' 'small-only' 'medium-down' 'medium-only' 'medium-up' 'large-up' 'large-only';","@mixin box($color) {\n display: block;\n width: 200px;\n height: 200px;\n}\n\n@each $size in $sizes {\n @for $column from 1 through $max-columns {\n $column-width: $width-per-column * $column;\n .#{$prefix}-#{$size}-#{$column} {\n width: #{$column-width};\n }\n }\n}","#glm-member-detail-takeback-mini {\n //@include box(red);\n}\n\n@media #{$small-up} {\n // This is how you would use a media query\n}\n\n@media screen and (max-width: $break-small) {\n // Something needs to happen here eventually. Maybe?\n}\n@media only screen {\n\n .glm-small-1 {\n width: 8.33333%; }\n\n .glm-small-2 {\n width: 16.66667%; }\n\n .glm-small-3 {\n width: 25%; }\n\n .glm-small-4 {\n width: 33.33333%; }\n\n .glm-small-5 {\n width: 41.66667%; }\n\n .glm-small-6 {\n width: 50%; }\n\n .glm-small-7 {\n width: 58.33333%; }\n\n .glm-small-8 {\n width: 66.66667%; }\n\n .glm-small-9 {\n width: 75%; }\n\n .glm-small-10 {\n width: 83.33333%; }\n\n .glm-small-11 {\n width: 91.66667%; }\n\n .glm-small-12 {\n width: 100%; }\n\n}\n@media only screen and (min-width: 40.0625em){\n .glm-medium-1 {\n width: 8.33333%; }\n\n .glm-medium-2 {\n width: 16.66667%; }\n\n .glm-medium-3 {\n width: 25%; }\n\n .glm-medium-4 {\n width: 33.33333%; }\n\n .glm-medium-5 {\n width: 41.66667%; }\n\n .glm-medium-6 {\n width: 50%; }\n\n .glm-medium-7 {\n width: 58.33333%; }\n\n .glm-medium-8 {\n width: 66.66667%; }\n\n .glm-medium-9 {\n width: 75%; }\n\n .glm-medium-10 {\n width: 83.33333%; }\n\n .glm-medium-11 {\n width: 91.66667%; }\n\n .glm-medium-12 {\n width: 100%; }\n}\n@media only screen and (min-width: 64.0625em) {\n .glm-large-1 {\n width: 8.33333%; }\n\n .glm-large-2 {\n width: 16.66667%; }\n\n .glm-large-3 {\n width: 25%; }\n\n .glm-large-4 {\n width: 33.33333%; }\n\n .glm-large-5 {\n width: 41.66667%; }\n\n .glm-large-6 {\n width: 50%; }\n\n .glm-large-7 {\n width: 58.33333%; }\n\n .glm-large-8 {\n width: 66.66667%; }\n\n .glm-large-9 {\n width: 75%; }\n\n .glm-large-10 {\n width: 83.33333%; }\n\n .glm-large-11 {\n width: 91.66667%; }\n\n .glm-large-12 {\n width: 100%; }\n}\n.glm-row {\n width: 100%;\n position: relative;\n &::after {\n clear: both;\n }\n}\n.glm-row::before, .glm-row::after {\n content: \" \";\n display: table;\n}\n.glm-row::before, .glm-row::after {\n content: \" \";\n display: table;\n}\n.glm-row {\n margin-left: auto;\n margin-right: auto;\n max-width: $max-width;\n}\n.glm-column, .glm-columns{\n padding-left: 0.9375rem;\n padding-right: 0.9375rem;\n float: left; \n}\n\n",".glm-hide{\n display: none;\n}\n.glm-left{\n float: left;\n}\n.glm-right{\n float: right;\n}\n.glm-text-center{\n text-align: center;\n}\n.glm-text-right{\n text-align: right;\n}\n.glm-text-left{\n text-align: left;\n}\n.glm-text-justify{\n text-align: justify;\n}\n.glm-horizontal-center{\n margin: auto 0;\n}\n.glm-round{\n border-radius: 1000px;\n}\n.glm-radius{\n border-radius: 4px;\n}\n\n// create the utility classes based on the breakpoints string literal; small-only, large-up etc\n// use the breakpoint values for the media queries\n@each $bp-values, $bp in zip($breakpoint-values, $breakpoints){\n @media #{$bp-values}{\n .glm-hide-for-#{$bp}{\n display: none;\n }\n .glm-#{$bp}-text-right{\n text-align: right;\n }\n .glm-#{$bp}-text-left{\n text-align: left;\n }\n .glm-#{$bp}-text-center{\n text-align: center;\n }\n .glm-#{$bp}-text-justify{\n text-align: justify;\n }\n }\n}\n"],"mappings":"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","names":[],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/scss/_glm-grid.scss b/scss/_glm-grid.scss index d5a95d92..d2041be9 100644 --- a/scss/_glm-grid.scss +++ b/scss/_glm-grid.scss @@ -1,4 +1,4 @@ -/*#glm-member-detail-takeback-mini { +#glm-member-detail-takeback-mini { //@include box(red); } @@ -133,28 +133,18 @@ content: " "; display: table; } -*, *::before, *::after { - box-sizing: inherit; -} .glm-row::before, .glm-row::after { content: " "; display: table; } -*, *::before, *::after { - box-sizing: inherit; -} -.glm-row { - clear: both; -} .glm-row { margin-left: auto; margin-right: auto; max-width: $max-width; } -glm-column, glm-columns{ +.glm-column, .glm-columns{ padding-left: 0.9375rem; padding-right: 0.9375rem; - width: 100%; float: left; } -*/ + diff --git a/scss/_settings.scss b/scss/_settings.scss index 0604f940..5b45d734 100644 --- a/scss/_settings.scss +++ b/scss/_settings.scss @@ -2,14 +2,15 @@ $max-columns: 12; $max-width: 64rem; $prefix: glm; $sizes: "small" "medium" "large"; + $width-per-column: $max-width / $max-columns; $break-small: 0; $break-medium: 0; $break-large: 0; -$small-range: (0em, 50em); -$medium-range: (50.063em, $max-width); +$small-range: (0em, 40em); +$medium-range: (40.063em, 64em); $large-range: (64.063em, 90em); $xlarge-range: (90.063em, 120em); $xxlarge-range: (120.063em, 99999999em); @@ -23,14 +24,25 @@ $small-up: $screen; $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"; $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})"; -$medium-down: "#{$screen} and (max-width:#{lower-bound($medium-range)})"; $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})"; +$medium-down: "#{$screen} and (min-width:#{lower-bound($small-range)}) and (max-width:#{upper-bound($medium-range)})"; + $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})"; $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})"; +$large-down: "#{$screen} and (min-width:#{lower-bound($small-range)}) and (max-width:#{upper-bound($large-range)})"; + $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})"; $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})"; $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})"; $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})"; + +// Legacy +$small: $medium-up; +$medium: $medium-up; +$large: $large-up; + +$breakpoint-values: '#{$small-up}' '#{$small-only}' '#{$medium-down}' '#{$medium-only}' '#{$medium-up}' '#{$large-up}' '#{$large-only}'; +$breakpoints: 'small-up' 'small-only' 'medium-down' 'medium-only' 'medium-up' 'large-up' 'large-only'; \ No newline at end of file diff --git a/scss/_utilities.scss b/scss/_utilities.scss new file mode 100644 index 00000000..4532b82e --- /dev/null +++ b/scss/_utilities.scss @@ -0,0 +1,52 @@ +.glm-hide{ + display: none; +} +.glm-left{ + float: left; +} +.glm-right{ + float: right; +} +.glm-text-center{ + text-align: center; +} +.glm-text-right{ + text-align: right; +} +.glm-text-left{ + text-align: left; +} +.glm-text-justify{ + text-align: justify; +} +.glm-horizontal-center{ + margin: auto 0; +} +.glm-round{ + border-radius: 1000px; +} +.glm-radius{ + border-radius: 4px; +} + +// create the utility classes based on the breakpoints string literal; small-only, large-up etc +// use the breakpoint values for the media queries +@each $bp-values, $bp in zip($breakpoint-values, $breakpoints){ + @media #{$bp-values}{ + .glm-hide-for-#{$bp}{ + display: none; + } + .glm-#{$bp}-text-right{ + text-align: right; + } + .glm-#{$bp}-text-left{ + text-align: left; + } + .glm-#{$bp}-text-center{ + text-align: center; + } + .glm-#{$bp}-text-justify{ + text-align: justify; + } + } +} diff --git a/scss/app.scss b/scss/app.scss index e8100020..eb6e7d5c 100644 --- a/scss/app.scss +++ b/scss/app.scss @@ -2,3 +2,4 @@ @import 'settings'; @import 'mixins'; @import 'glm-grid'; +@import 'utilities';