diff --git a/.csscomb.json b/.csscomb.json index a7fd6ba..0277343 100644 --- a/.csscomb.json +++ b/.csscomb.json @@ -1,323 +1,404 @@ { - "always-semicolon": true, - "color-case": "lower", - "block-indent": "\t", - "color-shorthand": false, - "eof-newline": true, - "leading-zero": true, - "quotes": "double", - "space-before-colon": "", - "space-after-colon": " ", - "space-before-combinator": " ", - "space-after-combinator": " ", - "space-between-declarations": "\n", - "space-before-opening-brace": " ", - "space-after-opening-brace": "\n", - "space-before-selector-delimiter": "", - "space-before-closing-brace": "\n", - "strip-spaces": true, - "unitless-zero": true, - "vendor-prefix-align": true, - "sort-order": [ - [ "$include" ], - [ "$variable" ], - [ - "font", - "font-family", - "font-size", - "font-weight", - "font-style", - "font-variant", - "font-size-adjust", - "font-stretch", - "font-effect", - "font-emphasize", - "font-emphasize-position", - "font-emphasize-style", - "font-smooth", - "line-height" - ], - [ - "position", - "z-index", - "top", - "right", - "bottom", - "left" - ], - [ - "display", - "visibility", - "float", - "clear", - "overflow", - "overflow-x", - "overflow-y", - "-ms-overflow-x", - "-ms-overflow-y", - "clip", - "zoom", - "flex-direction", - "flex-order", - "flex-pack", - "flex-align" - ], - [ - "-webkit-box-sizing", - "-moz-box-sizing", - "box-sizing", - "width", - "min-width", - "max-width", - "height", - "min-height", - "max-height", - "margin", - "margin-top", - "margin-right", - "margin-bottom", - "margin-left", - "padding", - "padding-top", - "padding-right", - "padding-bottom", - "padding-left" - ], - [ - "table-layout", - "empty-cells", - "caption-side", - "border-spacing", - "border-collapse", - "list-style", - "list-style-position", - "list-style-type", - "list-style-image" - ], - [ - "content", - "quotes", - "counter-reset", - "counter-increment", - "resize", - "cursor", - "-webkit-user-select", - "-moz-user-select", - "-ms-user-select", - "user-select", - "nav-index", - "nav-up", - "nav-right", - "nav-down", - "nav-left", - "-webkit-transition", - "-moz-transition", - "-ms-transition", - "-o-transition", - "transition", - "-webkit-transition-delay", - "-moz-transition-delay", - "-ms-transition-delay", - "-o-transition-delay", - "transition-delay", - "-webkit-transition-timing-function", - "-moz-transition-timing-function", - "-ms-transition-timing-function", - "-o-transition-timing-function", - "transition-timing-function", - "-webkit-transition-duration", - "-moz-transition-duration", - "-ms-transition-duration", - "-o-transition-duration", - "transition-duration", - "-webkit-transition-property", - "-moz-transition-property", - "-ms-transition-property", - "-o-transition-property", - "transition-property", - "-webkit-transform", - "-moz-transform", - "-ms-transform", - "-o-transform", - "transform", - "-webkit-transform-origin", - "-moz-transform-origin", - "-ms-transform-origin", - "-o-transform-origin", - "transform-origin", - "-webkit-animation", - "-moz-animation", - "-ms-animation", - "-o-animation", - "animation", - "-webkit-animation-name", - "-moz-animation-name", - "-ms-animation-name", - "-o-animation-name", - "animation-name", - "-webkit-animation-duration", - "-moz-animation-duration", - "-ms-animation-duration", - "-o-animation-duration", - "animation-duration", - "-webkit-animation-play-state", - "-moz-animation-play-state", - "-ms-animation-play-state", - "-o-animation-play-state", - "animation-play-state", - "-webkit-animation-timing-function", - "-moz-animation-timing-function", - "-ms-animation-timing-function", - "-o-animation-timing-function", - "animation-timing-function", - "-webkit-animation-delay", - "-moz-animation-delay", - "-ms-animation-delay", - "-o-animation-delay", - "animation-delay", - "-webkit-animation-iteration-count", - "-moz-animation-iteration-count", - "-ms-animation-iteration-count", - "-o-animation-iteration-count", - "animation-iteration-count", - "-webkit-animation-direction", - "-moz-animation-direction", - "-ms-animation-direction", - "-o-animation-direction", - "animation-direction", - "text-align", - "-webkit-text-align-last", - "-moz-text-align-last", - "-ms-text-align-last", - "text-align-last", - "vertical-align", - "white-space", - "text-decoration", - "text-emphasis", - "text-emphasis-color", - "text-emphasis-style", - "text-emphasis-position", - "text-indent", - "-ms-text-justify", - "text-justify", - "letter-spacing", - "word-spacing", - "-ms-writing-mode", - "text-outline", - "text-transform", - "text-wrap", - "text-overflow", - "-ms-text-overflow", - "text-overflow-ellipsis", - "text-overflow-mode", - "-ms-word-wrap", - "word-wrap", - "word-break", - "-ms-word-break", - "-moz-tab-size", - "-o-tab-size", - "tab-size", - "-webkit-hyphens", - "-moz-hyphens", - "hyphens", - "pointer-events" - ], - [ - "opacity", - "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", - "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", - "-ms-interpolation-mode", - "color", - "border", - "border-width", - "border-style", - "border-color", - "border-top", - "border-top-width", - "border-top-style", - "border-top-color", - "border-right", - "border-right-width", - "border-right-style", - "border-right-color", - "border-bottom", - "border-bottom-width", - "border-bottom-style", - "border-bottom-color", - "border-left", - "border-left-width", - "border-left-style", - "border-left-color", - "-webkit-border-radius", - "-moz-border-radius", - "border-radius", - "-webkit-border-top-left-radius", - "-moz-border-radius-topleft", - "border-top-left-radius", - "-webkit-border-top-right-radius", - "-moz-border-radius-topright", - "border-top-right-radius", - "-webkit-border-bottom-right-radius", - "-moz-border-radius-bottomright", - "border-bottom-right-radius", - "-webkit-border-bottom-left-radius", - "-moz-border-radius-bottomleft", - "border-bottom-left-radius", - "-webkit-border-image", - "-moz-border-image", - "-o-border-image", - "border-image", - "-webkit-border-image-source", - "-moz-border-image-source", - "-o-border-image-source", - "border-image-source", - "-webkit-border-image-slice", - "-moz-border-image-slice", - "-o-border-image-slice", - "border-image-slice", - "-webkit-border-image-width", - "-moz-border-image-width", - "-o-border-image-width", - "border-image-width", - "-webkit-border-image-outset", - "-moz-border-image-outset", - "-o-border-image-outset", - "border-image-outset", - "-webkit-border-image-repeat", - "-moz-border-image-repeat", - "-o-border-image-repeat", - "border-image-repeat", - "outline", - "outline-width", - "outline-style", - "outline-color", - "outline-offset", - "background", - "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", - "background-color", - "background-image", - "background-repeat", - "background-attachment", - "background-position", - "background-position-x", - "-ms-background-position-x", - "background-position-y", - "-ms-background-position-y", - "-webkit-background-clip", - "-moz-background-clip", - "background-clip", - "background-origin", - "-webkit-background-size", - "-moz-background-size", - "-o-background-size", - "background-size", - "box-decoration-break", - "-webkit-box-shadow", - "-moz-box-shadow", - "box-shadow", - "filter:progid:DXImageTransform.Microsoft.gradient", - "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", - "text-shadow" - ] + "always-semicolon": true, + "color-case": "lower", + "block-indent": "\t", + "color-shorthand": false, + "eof-newline": true, + "leading-zero": true, + "quotes": "double", + "space-before-colon": "", + "space-after-colon": " ", + "space-before-combinator": " ", + "space-after-combinator": " ", + "space-between-declarations": "\n", + "space-before-opening-brace": " ", + "space-after-opening-brace": "\n", + "space-before-selector-delimiter": "", + "space-before-closing-brace": "\n", + "strip-spaces": true, + "unitless-zero": true, + "vendor-prefix-align": true, + "sort-order": [ + [ + "$include" + ], + [ + "position", + "top", + "right", + "bottom", + "left", + "z-index", + "display", + "visibility", + "-webkit-flex-direction", + "-moz-flex-direction", + "-ms-flex-direction", + "-o-flex-direction", + "flex-direction", + "-webkit-flex-order", + "-moz-flex-order", + "-ms-flex-order", + "-o-flex-order", + "flex-order", + "-webkit-flex-pack", + "-moz-flex-pack", + "-ms-flex-pack", + "-o-flex-pack", + "flex-pack", + "float", + "clear", + "-webkit-flex-align", + "-moz-flex-align", + "-ms-flex-align", + "-o-flex-align", + "flex-align", + "overflow", + "-ms-overflow-x", + "-ms-overflow-y", + "overflow-x", + "overflow-y", + "-webkit-overflow-scrolling", + "clip", + "-webkit-box-sizing", + "-moz-box-sizing", + "box-sizing", + "margin", + "margin-top", + "margin-right", + "margin-bottom", + "margin-left", + "padding", + "padding-top", + "padding-right", + "padding-bottom", + "padding-left", + "min-width", + "min-height", + "max-width", + "max-height", + "width", + "height", + "outline", + "outline-width", + "outline-style", + "outline-color", + "outline-offset", + "border", + "border-spacing", + "border-collapse", + "border-width", + "border-style", + "border-color", + "border-top", + "border-top-width", + "border-top-style", + "border-top-color", + "border-right", + "border-right-width", + "border-right-style", + "border-right-color", + "border-bottom", + "border-bottom-width", + "border-bottom-style", + "border-bottom-color", + "border-left", + "border-left-width", + "border-left-style", + "border-left-color", + "-webkit-border-radius", + "-moz-border-radius", + "border-radius", + "-webkit-border-top-left-radius", + "-moz-border-radius-topleft", + "border-top-left-radius", + "-webkit-border-top-right-radius", + "-moz-border-radius-topright", + "border-top-right-radius", + "-webkit-border-bottom-right-radius", + "-moz-border-radius-bottomright", + "border-bottom-right-radius", + "-webkit-border-bottom-left-radius", + "-moz-border-radius-bottomleft", + "border-bottom-left-radius", + "-webkit-border-image", + "-moz-border-image", + "-o-border-image", + "border-image", + "-webkit-border-image-source", + "-moz-border-image-source", + "-o-border-image-source", + "border-image-source", + "-webkit-border-image-slice", + "-moz-border-image-slice", + "-o-border-image-slice", + "border-image-slice", + "-webkit-border-image-width", + "-moz-border-image-width", + "-o-border-image-width", + "border-image-width", + "-webkit-border-image-outset", + "-moz-border-image-outset", + "-o-border-image-outset", + "border-image-outset", + "-webkit-border-image-repeat", + "-moz-border-image-repeat", + "-o-border-image-repeat", + "border-image-repeat", + "-webkit-border-top-image", + "-moz-border-top-image", + "-o-border-top-image", + "border-top-image", + "-webkit-border-right-image", + "-moz-border-right-image", + "-o-border-right-image", + "border-right-image", + "-webkit-border-bottom-image", + "-moz-border-bottom-image", + "-o-border-bottom-image", + "border-bottom-image", + "-webkit-border-left-image", + "-moz-border-left-image", + "-o-border-left-image", + "border-left-image", + "-webkit-border-corner-image", + "-moz-border-corner-image", + "-o-border-corner-image", + "border-corner-image", + "-webkit-border-top-left-image", + "-moz-border-top-left-image", + "-o-border-top-left-image", + "border-top-left-image", + "-webkit-border-top-right-image", + "-moz-border-top-right-image", + "-o-border-top-right-image", + "border-top-right-image", + "-webkit-border-bottom-right-image", + "-moz-border-bottom-right-image", + "-o-border-bottom-right-image", + "border-bottom-right-image", + "-webkit-border-bottom-left-image", + "-moz-border-bottom-left-image", + "-o-border-bottom-left-image", + "border-bottom-left-image", + "background", + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", + "background-color", + "background-image", + "background-attachment", + "background-position", + "-ms-background-position-x", + "-ms-background-position-y", + "background-position-x", + "background-position-y", + "-webkit-background-clip", + "-moz-background-clip", + "background-clip", + "background-origin", + "-webkit-background-size", + "-moz-background-size", + "-o-background-size", + "background-size", + "background-repeat", + "box-decoration-break", + "-webkit-box-shadow", + "-moz-box-shadow", + "box-shadow", + "color", + "table-layout", + "caption-side", + "empty-cells", + "list-style", + "list-style-position", + "list-style-type", + "list-style-image", + "quotes", + "content", + "counter-increment", + "counter-reset", + "-ms-writing-mode", + "vertical-align", + "text-align", + "-webkit-text-align-last", + "-moz-text-align-last", + "-ms-text-align-last", + "text-align-last", + "text-decoration", + "text-emphasis", + "text-emphasis-position", + "text-emphasis-style", + "text-emphasis-color", + "text-indent", + "-ms-text-justify", + "text-justify", + "text-outline", + "text-transform", + "text-wrap", + "-ms-text-overflow", + "text-overflow", + "text-overflow-ellipsis", + "text-overflow-mode", + "text-shadow", + "white-space", + "word-spacing", + "-ms-word-wrap", + "word-wrap", + "-ms-word-break", + "word-break", + "-moz-tab-size", + "-o-tab-size", + "tab-size", + "-webkit-hyphens", + "-moz-hyphens", + "hyphens", + "letter-spacing", + "font", + "font-weight", + "font-style", + "font-variant", + "font-size-adjust", + "font-stretch", + "font-size", + "font-family", + "src", + "line-height", + "opacity", + "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", + "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", + "-ms-interpolation-mode", + "-webkit-filter", + "-ms-filter", + "filter", + "resize", + "cursor", + "nav-index", + "nav-up", + "nav-right", + "nav-down", + "nav-left", + "-webkit-transition", + "-moz-transition", + "-ms-transition", + "-o-transition", + "transition", + "-webkit-transition-delay", + "-moz-transition-delay", + "-ms-transition-delay", + "-o-transition-delay", + "transition-delay", + "-webkit-transition-timing-function", + "-moz-transition-timing-function", + "-ms-transition-timing-function", + "-o-transition-timing-function", + "transition-timing-function", + "-webkit-transition-duration", + "-moz-transition-duration", + "-ms-transition-duration", + "-o-transition-duration", + "transition-duration", + "-webkit-transition-property", + "-moz-transition-property", + "-ms-transition-property", + "-o-transition-property", + "transition-property", + "-webkit-transform", + "-moz-transform", + "-ms-transform", + "-o-transform", + "transform", + "-webkit-transform-origin", + "-moz-transform-origin", + "-ms-transform-origin", + "-o-transform-origin", + "transform-origin", + "-webkit-animation", + "-moz-animation", + "-ms-animation", + "-o-animation", + "animation", + "-webkit-animation-name", + "-moz-animation-name", + "-ms-animation-name", + "-o-animation-name", + "animation-name", + "-webkit-animation-duration", + "-moz-animation-duration", + "-ms-animation-duration", + "-o-animation-duration", + "animation-duration", + "-webkit-animation-play-state", + "-moz-animation-play-state", + "-ms-animation-play-state", + "-o-animation-play-state", + "animation-play-state", + "-webkit-animation-timing-function", + "-moz-animation-timing-function", + "-ms-animation-timing-function", + "-o-animation-timing-function", + "animation-timing-function", + "-webkit-animation-delay", + "-moz-animation-delay", + "-ms-animation-delay", + "-o-animation-delay", + "animation-delay", + "-webkit-animation-iteration-count", + "-moz-animation-iteration-count", + "-ms-animation-iteration-count", + "-o-animation-iteration-count", + "animation-iteration-count", + "-webkit-animation-direction", + "-moz-animation-direction", + "-ms-animation-direction", + "-o-animation-direction", + "animation-direction", + "pointer-events", + "unicode-bidi", + "direction", + "-webkit-columns", + "-moz-columns", + "columns", + "-webkit-column-span", + "-moz-column-span", + "column-span", + "-webkit-column-width", + "-moz-column-width", + "column-width", + "-webkit-column-count", + "-moz-column-count", + "column-count", + "-webkit-column-fill", + "-moz-column-fill", + "column-fill", + "-webkit-column-gap", + "-moz-column-gap", + "column-gap", + "-webkit-column-rule", + "-moz-column-rule", + "column-rule", + "-webkit-column-rule-width", + "-moz-column-rule-width", + "column-rule-width", + "-webkit-column-rule-style", + "-moz-column-rule-style", + "column-rule-style", + "-webkit-column-rule-color", + "-moz-column-rule-color", + "column-rule-color", + "break-before", + "break-inside", + "break-after", + "page-break-before", + "page-break-inside", + "page-break-after", + "orphans", + "widows", + "-ms-zoom", + "zoom", + "max-zoom", + "min-zoom", + "user-zoom", + "orientation", + "..." ] + ] } diff --git a/www/modules/boilerplate/assets/styles/src/base/_base.scss b/www/modules/boilerplate/assets/styles/src/base/_base.scss index d52335b..884bbac 100644 --- a/www/modules/boilerplate/assets/styles/src/base/_base.scss +++ b/www/modules/boilerplate/assets/styles/src/base/_base.scss @@ -2,10 +2,10 @@ // Base // ========================================================================== html { - font-family: $font-family; - font-size: $font-size; - line-height: $line-height; color: $color; + font-size: $font-size; + font-family: $font-family; + line-height: $line-height; } ::selection { @@ -16,9 +16,9 @@ html { hr { display: block; - height: 1px; margin: 1em 0; padding: 0; + height: 1px; border: 0; border-top: 1px solid #cccccc; } diff --git a/www/modules/boilerplate/assets/styles/src/base/_headings.scss b/www/modules/boilerplate/assets/styles/src/base/_headings.scss index 5b8d07a..4beff54 100644 --- a/www/modules/boilerplate/assets/styles/src/base/_headings.scss +++ b/www/modules/boilerplate/assets/styles/src/base/_headings.scss @@ -2,45 +2,45 @@ // Headings // ========================================================================== @mixin h { - line-height: $heading-line-height; margin-top: 0; + line-height: $heading-line-height; } -.h { +.o-h { @include h; } -h1, .h1 { - @extend .h; +h1, .o-h1 { + @extend .o-h; - font-size: $heading1; + font-size: rem($heading1); } -h2, .h2 { - @extend .h; +h2, .o-h2 { + @extend .o-h; - font-size: $heading2; + font-size: rem($heading2); } -h3, .h3 { - @extend .h; +h3, .o-h3 { + @extend .o-h; - font-size: $heading3; + font-size: rem($heading3); } -h4, .h4 { - @extend .h; +h4, .o-h4 { + @extend .o-h; - font-size: $heading4; + font-size: rem($heading4); } -h5, .h5 { - @extend .h; +h5, .o-h5 { + @extend .o-h; - font-size: $heading5; + font-size: rem($heading5); } -h6, .h6 { - @extend .h; +h6, .o-h6 { + @extend .o-h; - font-size: $heading6; + font-size: rem($heading6); } diff --git a/www/modules/boilerplate/assets/styles/src/generic/_button.scss b/www/modules/boilerplate/assets/styles/src/generic/_button.scss index 5c834bb..2f665ba 100644 --- a/www/modules/boilerplate/assets/styles/src/generic/_button.scss +++ b/www/modules/boilerplate/assets/styles/src/generic/_button.scss @@ -2,7 +2,7 @@ // Button resets // ========================================================================== button, -.button { +.o-button { display: inline-block; overflow: visible; margin: 0; diff --git a/www/modules/boilerplate/assets/styles/src/generic/_normalize.scss b/www/modules/boilerplate/assets/styles/src/generic/_normalize.scss index d38e947..da1ba8a 100644 --- a/www/modules/boilerplate/assets/styles/src/generic/_normalize.scss +++ b/www/modules/boilerplate/assets/styles/src/generic/_normalize.scss @@ -8,7 +8,6 @@ html { font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } @@ -57,7 +56,6 @@ canvas, progress, video { display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ } @@ -68,7 +66,6 @@ video { audio:not([controls]) { display: none; - height: 0; } @@ -136,9 +133,8 @@ dfn { */ h1 { - font-size: 2em; - margin: 0.67em 0; + font-size: 2em; } /** @@ -146,8 +142,8 @@ h1 { */ mark { - color: #000000; background: #ffff00; + color: #000000; } /** @@ -164,12 +160,10 @@ small { sub, sup { + position: relative; + vertical-align: baseline; font-size: 75%; line-height: 0; - - position: relative; - - vertical-align: baseline; } sup { @@ -236,8 +230,8 @@ code, kbd, pre, samp { - font-family: monospace, monospace; font-size: 1em; + font-family: monospace, monospace; } /* Forms @@ -260,11 +254,9 @@ input, optgroup, select, textarea { - font: inherit; /* 2 */ - margin: 0; /* 3 */ - color: inherit; /* 1 */ + font: inherit; /* 2 */ } /** @@ -300,7 +292,6 @@ html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { cursor: pointer; /* 3 */ - -webkit-appearance: button; /* 2 */ } @@ -320,7 +311,6 @@ html input[disabled] { button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; - border: 0; } @@ -368,7 +358,6 @@ input[type="search"] { -webkit-box-sizing: content-box; /* 2 */ -moz-box-sizing: content-box; box-sizing: content-box; - -webkit-appearance: textfield; /* 1 */ } @@ -390,7 +379,6 @@ input[type="search"]::-webkit-search-decoration { fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; - border: 1px solid #c0c0c0; } @@ -401,7 +389,6 @@ fieldset { legend { padding: 0; /* 2 */ - border: 0; /* 1 */ } diff --git a/www/modules/boilerplate/assets/styles/src/objects/_button.scss b/www/modules/boilerplate/assets/styles/src/objects/_button.scss index 0949950..1cabd80 100644 --- a/www/modules/boilerplate/assets/styles/src/objects/_button.scss +++ b/www/modules/boilerplate/assets/styles/src/objects/_button.scss @@ -1,8 +1,8 @@ // ========================================================================== // Button objects // ========================================================================== -.button { - padding: 10px; +.o-button { + padding: rem(10px); background-color: lightgray; &:focus { diff --git a/www/modules/boilerplate/assets/styles/src/objects/_container.scss b/www/modules/boilerplate/assets/styles/src/objects/_container.scss index ff2878d..3e79a85 100644 --- a/www/modules/boilerplate/assets/styles/src/objects/_container.scss +++ b/www/modules/boilerplate/assets/styles/src/objects/_container.scss @@ -1,10 +1,10 @@ // ========================================================================== // Container // ========================================================================== -.container { +.o-container { position: relative; - max-width: $max-width + ($padding * 2); margin: 0 auto; - padding-right: $padding; - padding-left: $padding; + padding-right: rem($padding); + padding-left: rem($padding); + max-width: rem($max-width) + rem($padding * 2); } diff --git a/www/modules/boilerplate/assets/styles/src/objects/_form.scss b/www/modules/boilerplate/assets/styles/src/objects/_form.scss index 3ac4af0..a779f7d 100644 --- a/www/modules/boilerplate/assets/styles/src/objects/_form.scss +++ b/www/modules/boilerplate/assets/styles/src/objects/_form.scss @@ -4,17 +4,17 @@ // Label // ========================================================================== -.label { +.o-label { display: block; - margin-bottom: 0.25em; + margin-bottom: rem(15px); } // Input // ========================================================================== $input-icon-color: 424242; // No # -.input { - padding: 10px; +.o-input { + padding: rem(10px); border-width: 1px; border-style: solid; border-color: lightgray; @@ -31,16 +31,16 @@ $input-icon-color: 424242; // No # // Checkbox // ========================================================================== -$checkbox: 18px; +$checkbox: rem(18px); $checkbox-icon-color: $input-icon-color; -.checkbox { +.o-checkbox { position: absolute; width: 0; opacity: 0; &:focus { - + .checkbox-label { + + .o-checkbox-label { &::before { border-color: gray; } @@ -48,7 +48,7 @@ $checkbox-icon-color: $input-icon-color; } &:checked { - + .checkbox-label { + + .o-checkbox-label { &::after { opacity: 1; } @@ -56,16 +56,16 @@ $checkbox-icon-color: $input-icon-color; } } -.checkbox-label { - @extend .label; +.o-checkbox-label { + @extend .o-label; position: relative; display: inline-block; margin-right: 0.5em; - padding-left: ($checkbox + 10px); + padding-left: ($checkbox + rem(10px)); &::before, &::after { - @extend .input; + @extend .o-input; position: absolute; top: 50%; @@ -83,7 +83,7 @@ $checkbox-icon-color: $input-icon-color; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2210.5%22%20viewBox%3D%220%200%2013%2010.5%22%20enable-background%3D%22new%200%200%2013%2010.5%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23#{$checkbox-icon-color}%22%20d%3D%22M4.8%205.8L2.4%203.3%200%205.7l4.8%204.8L13%202.4c0%200-2.4-2.4-2.4-2.4L4.8%205.8z%22%2F%3E%3C%2Fsvg%3E"); background-position: center; - background-size: 13px; + background-size: rem(13px); background-repeat: no-repeat; opacity: 0; } @@ -93,12 +93,12 @@ $checkbox-icon-color: $input-icon-color; // ========================================================================== $radio-icon-color: $input-icon-color; -.radio { - @extend .checkbox; +.o-radio { + @extend .o-checkbox; } -.radio-label { - @extend .checkbox-label; +.o-radio-label { + @extend .o-checkbox-label; &::before, &::after { border-radius: 50%; @@ -106,24 +106,24 @@ $radio-icon-color: $input-icon-color; &::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23#{$radio-icon-color}%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E"); - background-size: 8px; + background-size: rem(8px); } } // Select // ========================================================================== -$select-icon: 40px; +$select-icon: rem(40px); $select-icon-color: $input-icon-color; -.select { - @extend .input; +.o-select { + @extend .o-input; position: relative; z-index: 1; padding-right: $select-icon; } -.select-wrap { +.o-select-wrap { position: relative; &::after { @@ -135,7 +135,7 @@ $select-icon-color: $input-icon-color; width: $select-icon; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2211.3%22%20viewBox%3D%220%200%2013%2011.3%22%20enable-background%3D%22new%200%200%2013%2011.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23#{$select-icon-color}%22%20points%3D%226.5%2011.3%203.3%205.6%200%200%206.5%200%2013%200%209.8%205.6%20%22%2F%3E%3C%2Fsvg%3E"); background-position: center; - background-size: 10px; + background-size: rem(10px); background-repeat: no-repeat; content: ""; pointer-events: none; @@ -144,8 +144,8 @@ $select-icon-color: $input-icon-color; // Textarea // ========================================================================== -.textarea { - @extend .input; +.o-textarea { + @extend .o-input; - min-height: 100px; + min-height: rem(100px); } diff --git a/www/modules/boilerplate/assets/styles/src/objects/_grid.scss b/www/modules/boilerplate/assets/styles/src/objects/_grid.scss index 796f413..725dc54 100644 --- a/www/modules/boilerplate/assets/styles/src/objects/_grid.scss +++ b/www/modules/boilerplate/assets/styles/src/objects/_grid.scss @@ -6,7 +6,7 @@ letter-spacing: normal; font-size: 0; } -.grid { +.o-grid { @include grid; } @@ -17,6 +17,6 @@ vertical-align: top; font-size: 1rem; } -.grid_item { +.o-grid_item { @include grid_item; } diff --git a/www/modules/boilerplate/assets/styles/src/settings/_settings.scss b/www/modules/boilerplate/assets/styles/src/settings/_settings.scss index 694c676..e2a20a3 100644 --- a/www/modules/boilerplate/assets/styles/src/settings/_settings.scss +++ b/www/modules/boilerplate/assets/styles/src/settings/_settings.scss @@ -36,8 +36,8 @@ $bold: 700; // Container // ========================================================================== -$max-width: none; -$padding: 0; +$max-width: 2000px; +$padding: 30px; // Spacings // ========================================================================== diff --git a/www/modules/boilerplate/assets/styles/src/tools/_tools.scss b/www/modules/boilerplate/assets/styles/src/tools/_tools.scss index cc88761..cbc924f 100644 --- a/www/modules/boilerplate/assets/styles/src/tools/_tools.scss +++ b/www/modules/boilerplate/assets/styles/src/tools/_tools.scss @@ -19,20 +19,20 @@ // Mixins // ========================================================================== @mixin vertical-center { - font-size: 0; + font-size: 0; - &:before { - display: inline-block; - height: 100%; - content: ""; - vertical-align: middle; - } + &:before { + display: inline-block; + height: 100%; + content: ""; + vertical-align: middle; + } - > * { - font-size: 1rem; - display: inline-block; - vertical-align: middle; - } + > * { + display: inline-block; + vertical-align: middle; + font-size: 1rem; + } } // Micro clearfix, as per {@link css-101.org/articles/clearfix/latest-new-clearfix-so-far.php CSS Mojo} @@ -40,16 +40,16 @@ // @see inuitcss/generic.clearfix @mixin clearfix { &:after { - content : ""; - display : table; - clear : both; + display: table; + clear: both; + content: ""; } } @mixin list-reset { - list-style: none; - padding: 0; margin: 0; + padding: 0; + list-style: none; } @mixin tap-highlight-color { diff --git a/www/modules/boilerplate/assets/styles/src/trumps/_helpers.scss b/www/modules/boilerplate/assets/styles/src/trumps/_helpers.scss index bb29ddb..1d9aee5 100644 --- a/www/modules/boilerplate/assets/styles/src/trumps/_helpers.scss +++ b/www/modules/boilerplate/assets/styles/src/trumps/_helpers.scss @@ -1,11 +1,11 @@ // ========================================================================== // Helpers // ========================================================================== -.vertical-center { +.u-vertical-center { @include vertical-center; } -.clearfix { +.u-clearfix { @include clearfix; } @@ -14,7 +14,7 @@ * http://juicystudio.com/article/screen-readers-display-none.php */ -.hidden { +.u-hidden { display: none !important; visibility: hidden; } @@ -24,15 +24,15 @@ * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ -.visuallyhidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; +.u-visuallyhidden { position: absolute; + overflow: hidden; + clip: rect(0 0 0 0); + margin: -1px; + padding: 0; width: 1px; + height: 1px; + border: 0; } /* @@ -41,20 +41,20 @@ * https://www.drupal.org/node/897638 */ -.visuallyhidden.focusable:active, -.visuallyhidden.focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; +.u-visuallyhidden.focusable:active, +.u-visuallyhidden.focusable:focus { position: static; + overflow: visible; + clip: auto; + margin: 0; width: auto; + height: auto; } /* * Hide visually and from screen readers, but maintain layout */ -.invisible { +.u-invisible { visibility: hidden; } diff --git a/www/modules/boilerplate/assets/styles/src/trumps/_trumps.scss b/www/modules/boilerplate/assets/styles/src/trumps/_trumps.scss index aaa5f2c..1389cbc 100644 --- a/www/modules/boilerplate/assets/styles/src/trumps/_trumps.scss +++ b/www/modules/boilerplate/assets/styles/src/trumps/_trumps.scss @@ -1,23 +1,23 @@ // ========================================================================== // Trumps // ========================================================================== -.left { +.u-left { float: left !important; } -.right { +.u-right { float: right !important; } -.align-left { +.u-align-left { text-align: left !important; } -.align-right { +.u-align-right { text-align: right !important; } -.align-center { +.u-align-center { text-align: center !important; } @@ -25,12 +25,10 @@ // ========================================================================== .is-visible { visibility: visible !important; - opacity: 1 !important; } .is-hidden { visibility: hidden !important; - opacity: 0 !important; }