From: Laury GvR Date: Tue, 27 Sep 2016 15:32:40 +0000 (-0400) Subject: GLM-grid coding, not yet implemented X-Git-Tag: v2.7.0^2~17^2~8 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=2199f7dedf8aa9d94de6c6663cdbe8d06881599f;p=WP-Plugins%2Fglm-member-db.git GLM-grid coding, not yet implemented These are the styles for our new glm-grid, intended to make us independent from Foundation, but still giving us the ability to use equivalent functionality on our view files. --- diff --git a/css/front.css b/css/front.css index 42664cd4..0786d26a 100644 --- a/css/front.css +++ b/css/front.css @@ -705,10 +705,14 @@ input[type="submit"].glm-member-button { .glm-member-detail-content-data { padding: 10px; display: none; + clear: both; } #glm-member-detail-description-container { /* display: block;*/ } +#glm-member-detail-description { +/* margin-top: 10px;*/ +} #glm-member-detail-fullprofile-toggle { text-align: center; padding: 3px 6px; @@ -737,6 +741,7 @@ input[type="submit"].glm-member-button { color: #57b649; font-size: 18px; padding: 10px; + float: left; } #glm-member-detail-data-container > .glm-member-detail-content-toggle:nth-child(n-1) { border-width: 0 0 1px 0; @@ -892,6 +897,12 @@ input[type="submit"].glm-member-button { padding: 5px; } } +glm-member-detail-content-toggle { + float: left; +} +.glm-member-detail-link-to-top { + float: right; +} .glm-member-detail-live-cam-descr, .glm-member-detail-video-descr { margin-top: 20px; diff --git a/css/glm-grid.css b/css/glm-grid.css index 7466a853..ab0f8b7c 100644 --- a/css/glm-grid.css +++ b/css/glm-grid.css @@ -1,2 +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-row{width:100%;position:relative}.glm-row::after{clear:both}.glm-row::before,.glm-row::after{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:64rem} /*# sourceMappingURL=glm-grid.css.map */ diff --git a/css/glm-grid.css.map b/css/glm-grid.css.map index 5cd26453..002251b5 100644 --- a/css/glm-grid.css.map +++ b/css/glm-grid.css.map @@ -1 +1 @@ -{"version":3,"file":"glm-grid.css","sources":["app.scss","_glm-grid.scss","_settings.scss"],"sourcesContent":["@import 'glm-grid';\n@import 'settings';","",""],"mappings":"","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"],"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.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}"],"mappings":"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","names":[],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/scss/_functions.scss b/scss/_functions.scss new file mode 100644 index 00000000..e8c8ffc6 --- /dev/null +++ b/scss/_functions.scss @@ -0,0 +1,13 @@ +@function lower-bound($range){ + @if length($range) <= 0 { + @return 0; + } + @return nth($range,1); +} + +@function upper-bound($range) { + @if length($range) < 2 { + @return 999999999999; + } + @return nth($range, 2); +} \ No newline at end of file diff --git a/scss/_glm-grid.scss b/scss/_glm-grid.scss index e69de29b..6a1f43dd 100644 --- a/scss/_glm-grid.scss +++ b/scss/_glm-grid.scss @@ -0,0 +1,40 @@ +#glm-member-detail-takeback-mini { + //@include box(red); +} + +@media #{$small-up} { + // This is how you would use a media query +} + +@media screen and (max-width: $break-small) { + // Something needs to happen here eventually. Maybe? +} +.glm-row { + width: 100%; + position: relative; + &::after { + clear: both; + } +} +.glm-row::before, .glm-row::after { + 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; +} \ No newline at end of file diff --git a/scss/_mixins.scss b/scss/_mixins.scss new file mode 100644 index 00000000..1f9e9736 --- /dev/null +++ b/scss/_mixins.scss @@ -0,0 +1,14 @@ +@mixin box($color) { + display: block; + width: 200px; + height: 200px; +} + +@each $size in $sizes { + @for $column from 1 through $max-columns { + $column-width: $width-per-column * $column; + .#{$prefix}-#{$size}-#{$column} { + width: #{$column-width}; + } + } +} \ No newline at end of file diff --git a/scss/_settings.scss b/scss/_settings.scss index e69de29b..0604f940 100644 --- a/scss/_settings.scss +++ b/scss/_settings.scss @@ -0,0 +1,36 @@ +$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); +$large-range: (64.063em, 90em); +$xlarge-range: (90.063em, 120em); +$xxlarge-range: (120.063em, 99999999em); + +$screen: "only screen"; + +$landscape: "#{$screen} and (orientation: landscape)"; +$portrait: "#{$screen} and (orientation: portrait)"; + +$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)})"; + +$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)})"; + +$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)})"; diff --git a/scss/app.scss b/scss/app.scss index 95c71f3d..e8100020 100644 --- a/scss/app.scss +++ b/scss/app.scss @@ -1,2 +1,4 @@ +@import 'functions'; +@import 'settings'; +@import 'mixins'; @import 'glm-grid'; -@import 'settings'; \ No newline at end of file