novoland-developer-networks/OfficialSite
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #38 from AntoineBoulanger/baker-prefix

Browse Source 
Prefix and rem all the things 😲 ✊
This commit is contained in:
Antoine Boulanger
2015-11-20 13:30:01 -05:00
parent aee3230fc6 027282655f
commit 822dd4c8b6
13 changed files with 507 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

721
.csscomb.json
View File

@@ -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",
"..."
]
]
}

8
www/modules/boilerplate/assets/styles/src/base/_base.scss
View File

@@ -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;
}

40
www/modules/boilerplate/assets/styles/src/base/_headings.scss
View File

@@ -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);
}

2
www/modules/boilerplate/assets/styles/src/generic/_button.scss
View File

@@ -2,7 +2,7 @@
// Button resets
// ==========================================================================
button,
.button {
.o-button {
display: inline-block;
overflow: visible;
margin: 0;

25
www/modules/boilerplate/assets/styles/src/generic/_normalize.scss
View File

@@ -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 */
}

4
www/modules/boilerplate/assets/styles/src/objects/_button.scss
View File

@@ -1,8 +1,8 @@
// ==========================================================================
// Button objects
// ==========================================================================
.button {
padding: 10px;
.o-button {
padding: rem(10px);
background-color: lightgray;
&:focus {

8
www/modules/boilerplate/assets/styles/src/objects/_container.scss
View File

@@ -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);
}

52
www/modules/boilerplate/assets/styles/src/objects/_form.scss
View File

@@ -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);
}

4
www/modules/boilerplate/assets/styles/src/objects/_grid.scss
View File

@@ -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;
}

4
www/modules/boilerplate/assets/styles/src/settings/_settings.scss
View File

@@ -36,8 +36,8 @@ $bold: 700;
// Container
// ==========================================================================
$max-width: none;
$padding: 0;
$max-width: 2000px;
$padding: 30px;
// Spacings
// ==========================================================================

34
www/modules/boilerplate/assets/styles/src/tools/_tools.scss
View File

@@ -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 {

34
www/modules/boilerplate/assets/styles/src/trumps/_helpers.scss
View File

@@ -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;
}

12
www/modules/boilerplate/assets/styles/src/trumps/_trumps.scss
View File

@@ -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;
}