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

Create heading, form and button component, remove objects, add form example to page.html, add rem to container, remove pjax scss, add scroll object.

Browse Source
This commit is contained in:
Antoine Boulanger
2019-07-24 16:28:56 -04:00
parent d2db947fd1
commit 1f589add29
17 changed files with 344 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
assets/styles/components/_button.scss Normal file
View File

@@ -0,0 +1,8 @@
.c-button {
padding: rem(15px) rem(20px);
background-color: lightgray;
@include u-hocus {
background-color: darkgray;
}
}

134
assets/styles/objects/_form.scss → assets/styles/components/_form.scss
View File

@@ -1,27 +1,37 @@
// ==========================================================================
// Objects / Buttons
// Form
// ==========================================================================
.c-form {
}
.c-form_item {
position: relative;
margin-bottom: rem(30px);
}
// Label
// =============================================================================
.o-label {
// ==========================================================================
.c-form_label {
display: block;
margin-bottom: rem(15px);
margin-bottom: rem(10px);
}
// Input
// =============================================================================
// ==========================================================================
$input-icon-color: 424242; // No #
.o-input {
.c-form_input {
padding: rem(10px);
border-width: 1px;
border-style: solid;
border-color: lightgray;
border: 1px solid lightgray;
background-color: white;
&:hover {
border-color: darkgray;
}
&:focus {
border-color: gray;
border-color: dimgray;
}
&::placeholder {
@@ -30,42 +40,21 @@ $input-icon-color: 424242; // No #
}
// Checkbox
// =============================================================================
// ==========================================================================
$checkbox: rem(18px);
$checkbox-icon-color: $input-icon-color;
.o-checkbox {
position: absolute;
width: 0;
opacity: 0;
&:focus {
+ .o-checkbox-label {
&::before {
border-color: gray;
}
}
}
&:checked {
+ .o-checkbox-label {
&::after {
opacity: 1;
}
}
}
}
.o-checkbox-label {
@extend .o-label;
.c-form_checkboxLabel {
@extend .c-form_label;
position: relative;
display: inline-block;
margin-right: 0.5em;
margin-right: rem(10px);
margin-bottom: 0;
padding-left: ($checkbox + rem(10px));
cursor: pointer;
&::before, &::after {
position: absolute;
top: 50%;
left: 0;
@@ -79,6 +68,7 @@ $checkbox-icon-color: $input-icon-color;
&::before {
background-color: $white;
border: 1px solid lightgray;
}
&::after {
@@ -86,22 +76,42 @@ $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: rem(13px);
background-size: rem(12px);
background-repeat: no-repeat;
opacity: 0;
}
&:hover {
&::before {
border-color: darkgray;
}
}
.c-form_checkbox:focus + & {
&::before {
border-color: dimgray;
}
}
.c-form_checkbox:checked + & {
&::after {
opacity: 1;
}
}
}
.c-form_checkbox {
position: absolute;
width: 0;
opacity: 0;
}
// Radio
// =============================================================================
// ==========================================================================
$radio-icon-color: $input-icon-color;
.o-radio {
@extend .o-checkbox;
}
.o-radio-label {
@extend .o-checkbox-label;
.c-form_radioLabel {
@extend .c-form_checkboxLabel;
&::before, &::after {
border-radius: 50%;
@@ -109,25 +119,22 @@ $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: rem(8px);
background-size: rem(6px);
}
}
.c-form_radio {
@extend .c-form_checkbox;
}
// Select
// =============================================================================
$select-icon: rem(40px);
$select-icon-color: $input-icon-color;
.o-select {
@extend .o-input;
position: relative;
z-index: 1;
padding-right: $select-icon;
}
.o-select-wrap {
.c-form_select {
position: relative;
cursor: pointer;
&::after {
position: absolute;
@@ -138,17 +145,26 @@ $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: rem(10px);
background-size: rem(8px);
background-repeat: no-repeat;
content: "";
pointer-events: none;
}
}
.c-form_select_input {
@extend .c-form_input;
position: relative;
z-index: 1;
padding-right: $select-icon;
cursor: pointer;
}
// Textarea
// =============================================================================
.o-textarea {
@extend .o-input;
.c-form_textarea {
@extend .c-form_input;
min-height: rem(100px);
min-height: rem(200px);
}

28
assets/styles/components/_heading.scss Normal file
View File

@@ -0,0 +1,28 @@
.c-heading {
line-height: $line-height-h;
margin-bottom: rem(30px);
&.-h1 {
font-size: rem($font-size-h1);
}
&.-h2 {
font-size: rem($font-size-h2);
}
&.-h3 {
font-size: rem($font-size-h3);
}
&.-h4 {
font-size: rem($font-size-h4);
}
&.-h5 {
font-size: rem($font-size-h5);
}
&.-h6 {
font-size: rem($font-size-h6);
}
}

64
assets/styles/elements/_headings.scss
View File

@@ -1,64 +0,0 @@
// ==========================================================================
// Base / Headings
// ==========================================================================
@mixin h {
margin-top: 0;
line-height: $line-height-h;
}
//
// Provide a generic class to apply common heading styles.
//
// @example
// <p class="u-h"></p>
//
//
.o-h {
@include h;
}
//
// Styles for headings 1 through 6 with classes to provide
// a double stranded heading hierarchy, e.g. we semantically
// need an H2, but we want it to be sized like an H1:
//
// @example
// <h2 class="o-h1"></h2>
//
//
h1, .o-h1 {
@extend .o-h;
font-size: rem($font-size-h1);
}
h2, .o-h2 {
@extend .o-h;
font-size: rem($font-size-h2);
}
h3, .o-h3 {
@extend .o-h;
font-size: rem($font-size-h3);
}
h4, .o-h4 {
@extend .o-h;
font-size: rem($font-size-h4);
}
h5, .o-h5 {
@extend .o-h;
font-size: rem($font-size-h5);
}
h6, .o-h6 {
@extend .o-h;
font-size: rem($font-size-h6);
}

4
assets/styles/elements/_page.scss
View File

@@ -73,9 +73,9 @@ body {
}
a {
color: $link-color;
@include u-hocus {
color: $link-hover-color;
}
color: $link-color;
}

2
assets/styles/generic/_button.scss
View File

@@ -11,7 +11,7 @@
// 6. Force all button-styled elements to appear clickable.
//
button,
.o-button {
.c-button {
@include u-hocus {
text-decoration: none;
}

5
assets/styles/generic/_generic.scss
View File

@@ -45,7 +45,6 @@ a {
}
}
// Resets
ul,
ol {
margin: 0;
@@ -59,6 +58,10 @@ figure {
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
/**
* 1. Single taps should be dispatched immediately on clickable elements
*/

9
assets/styles/main.scss
View File

@@ -29,16 +29,13 @@
// ==========================================================================
@import "elements/fonts";
@import "elements/page";
@import "elements/headings";
// Objects
// ==========================================================================
@import "objects/scroll";
@import "objects/container";
@import "objects/ratio";
@import "objects/layout";
@import "objects/form";
@import "objects/button";
@import "objects/pjax";
// @import "objects/crop";
// @import "objects/table";
@@ -49,6 +46,9 @@
// Components
// ==========================================================================
@import "components/scrollbar";
@import "components/heading";
@import "components/button";
@import "components/form";
// Templates
// ==========================================================================
@@ -61,6 +61,5 @@
// @import "utilities/align";
// @import "utilities/helpers";
// @import "utilities/states";
// @import "utilities/headings";
// @import "utilities/spacing";
// @import "utilities/print";

11
assets/styles/objects/_button.scss
View File

@@ -1,11 +0,0 @@
// ==========================================================================
// Objects / Buttons
// ==========================================================================
.o-button {
@include u-hocus {
background-color: gray;
}
padding: rem(10px);
background-color: lightgray;
}

12
assets/styles/objects/_container.scss
View File

@@ -12,16 +12,10 @@
// @link http://stackoverflow.com/a/13202141/140357
//
/* stylelint-disable */
@if (type-of($container-width) != number) {
@error "`#{$container-width}` needs to be a number."
}
/* stylelint-enable */
.o-container {
margin-right: auto;
margin-left: auto;
padding-right: $padding;
padding-left: $padding;
max-width: $container-width;
padding-right: rem($padding);
padding-left: rem($padding);
max-width: rem($container-width + ($padding * 2));
}

11
assets/styles/objects/_pjax.scss
View File

@@ -1,11 +0,0 @@
.o-pjax_wrapper {
height: 100%;
overflow: hidden;
}
.o-pjax_container {
height: 100%;
overflow: hidden;
}

3
assets/styles/objects/_scroll.scss Normal file
View File

@@ -0,0 +1,3 @@
.o-scroll {
min-height: 100vh;
}

40
assets/styles/utilities/_headings.scss
View File

@@ -1,40 +0,0 @@
// ==========================================================================
// Utilities / Headings
// ==========================================================================
/**
* Redefine all of our basic heading styles against utility classes so as to
* provide larger (or smaller) generic font sizes. Anything more opinionated
* than simple font-size changes should likely be applied via "o-" classes
*
* @example
* <p class="u-h1"></p>
*
* @requires base/headings
* @link http://csswizardry.com/2016/02/managing-typography-on-large-apps/
* @link https://github.com/inuitcss/inuitcss/blob/develop/utilities/_utilities.headings.scss
*/
.u-h1 {
font-size: rem($font-size-h1) !important;
}
.u-h2 {
font-size: rem($font-size-h2) !important;
}
.u-h3 {
font-size: rem($font-size-h3) !important;
}
.u-h4 {
font-size: rem($font-size-h4) !important;
}
.u-h5 {
font-size: rem($font-size-h5) !important;
}
.u-h6 {
font-size: rem($font-size-h6) !important;
}

6
assets/styles/utilities/_widths.scss
View File

@@ -18,3 +18,9 @@
$widths-fractions: 1 2 3 4 5 !default;
@include widths($widths-fractions);
.u-1\/2\@from-small {
@media (min-width: $from-small) {
width: span(1/2);
}
}

269
www/assets/styles/main.css
View File

@@ -345,6 +345,9 @@ figure {
margin: 0;
padding: 0; }
h1, h2, h3, h4, h5, h6 {
margin: 0; }
/**
* 1. Single taps should be dispatched immediately on clickable elements
*/
@@ -430,7 +433,7 @@ textarea {
resize: vertical; }
button,
.o-button {
.c-button {
display: inline-block;
/* [1] */
overflow: visible;
@@ -458,8 +461,8 @@ button,
-ms-user-select: none;
user-select: none; }
button:focus, button:hover,
.o-button:focus,
.o-button:hover {
.c-button:focus,
.c-button:hover {
text-decoration: none; }
html {
@@ -521,36 +524,15 @@ a {
a:focus, a:hover {
color: #13097c; }
.o-h, h1, .o-h1, h2, .o-h2, h3, .o-h3, h4, .o-h4, h5, .o-h5, h6, .o-h6 {
margin-top: 0;
line-height: 1.5; }
.o-scroll {
min-height: 100vh; }
h1, .o-h1 {
font-size: 2.25rem; }
h2, .o-h2 {
font-size: 1.75rem; }
h3, .o-h3 {
font-size: 1.5rem; }
h4, .o-h4 {
font-size: 1.25rem; }
h5, .o-h5 {
font-size: 1.125rem; }
h6, .o-h6 {
font-size: 1rem; }
/* stylelint-disable */
/* stylelint-enable */
.o-container {
margin-right: auto;
margin-left: auto;
padding-right: 60px;
padding-left: 60px;
max-width: 2000px; }
padding-right: 3.75rem;
padding-left: 3.75rem;
max-width: 132.5rem; }
/**
* Create ratio-bound content blocks, to keep media (e.g. images, videos) in
@@ -632,109 +614,6 @@ h6, .o-h6 {
.o-layout.-reverse > .o-layout_item {
direction: ltr; }
.o-label, .o-checkbox-label, .o-radio-label {
display: block;
margin-bottom: 0.9375rem; }
.o-input, .o-select, .o-textarea {
padding: 0.625rem;
border-width: 1px;
border-style: solid;
border-color: lightgray;
background-color: white; }
.o-input:focus, .o-select:focus, .o-textarea:focus {
border-color: gray; }
.o-input::-webkit-input-placeholder, .o-select::-webkit-input-placeholder, .o-textarea::-webkit-input-placeholder {
color: gray; }
.o-input::-moz-placeholder, .o-select::-moz-placeholder, .o-textarea::-moz-placeholder {
color: gray; }
.o-input:-ms-input-placeholder, .o-select:-ms-input-placeholder, .o-textarea:-ms-input-placeholder {
color: gray; }
.o-input::-ms-input-placeholder, .o-select::-ms-input-placeholder, .o-textarea::-ms-input-placeholder {
color: gray; }
.o-input::placeholder, .o-select::placeholder, .o-textarea::placeholder {
color: gray; }
.o-checkbox, .o-radio {
position: absolute;
width: 0;
opacity: 0; }
.o-checkbox:focus + .o-checkbox-label::before, .o-radio:focus + .o-checkbox-label::before, .o-checkbox:focus + .o-radio-label::before, .o-radio:focus + .o-radio-label::before {
border-color: gray; }
.o-checkbox:checked + .o-checkbox-label::after, .o-radio:checked + .o-checkbox-label::after, .o-checkbox:checked + .o-radio-label::after, .o-radio:checked + .o-radio-label::after {
opacity: 1; }
.o-checkbox-label, .o-radio-label {
position: relative;
display: inline-block;
margin-right: 0.5em;
padding-left: 1.75rem; }
.o-checkbox-label::before, .o-radio-label::before, .o-checkbox-label::after, .o-radio-label::after {
position: absolute;
top: 50%;
left: 0;
display: inline-block;
margin-top: -0.5625rem;
padding: 0;
width: 1.125rem;
height: 1.125rem;
content: ""; }
.o-checkbox-label::before, .o-radio-label::before {
background-color: #FFFFFF; }
.o-checkbox-label::after, .o-radio-label::after {
border-color: transparent;
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%23424242%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: 0.8125rem;
background-repeat: no-repeat;
opacity: 0; }
.o-radio-label::before, .o-radio-label::after {
border-radius: 50%; }
.o-radio-label::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%23424242%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E");
background-size: 0.5rem; }
.o-select {
position: relative;
z-index: 1;
padding-right: 2.5rem; }
.o-select-wrap {
position: relative; }
.o-select-wrap::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 2;
width: 2.5rem;
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%23424242%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: 0.625rem;
background-repeat: no-repeat;
content: "";
pointer-events: none; }
.o-textarea {
min-height: 6.25rem; }
.o-button {
padding: 0.625rem;
background-color: lightgray; }
.o-button:focus, .o-button:hover {
background-color: gray; }
.o-pjax_wrapper {
height: 100%;
overflow: hidden; }
.o-pjax_container {
height: 100%;
overflow: hidden; }
.c-scrollbar {
position: absolute;
right: 0;
@@ -764,6 +643,128 @@ h6, .o-h6 {
cursor: -webkit-grabbing;
cursor: grabbing; }
.c-heading {
line-height: 1.5;
margin-bottom: 1.875rem; }
.c-heading.-h1 {
font-size: 2.25rem; }
.c-heading.-h2 {
font-size: 1.75rem; }
.c-heading.-h3 {
font-size: 1.5rem; }
.c-heading.-h4 {
font-size: 1.25rem; }
.c-heading.-h5 {
font-size: 1.125rem; }
.c-heading.-h6 {
font-size: 1rem; }
.c-button {
padding: 0.9375rem 1.25rem;
background-color: lightgray; }
.c-button:focus, .c-button:hover {
background-color: darkgray; }
.c-form_item {
position: relative;
margin-bottom: 1.875rem; }
.c-form_label, .c-form_checkboxLabel, .c-form_radioLabel {
display: block;
margin-bottom: 0.625rem; }
.c-form_input, .c-form_select_input, .c-form_textarea {
padding: 0.625rem;
border: 1px solid lightgray;
background-color: white; }
.c-form_input:hover, .c-form_select_input:hover, .c-form_textarea:hover {
border-color: darkgray; }
.c-form_input:focus, .c-form_select_input:focus, .c-form_textarea:focus {
border-color: dimgray; }
.c-form_input::-webkit-input-placeholder, .c-form_select_input::-webkit-input-placeholder, .c-form_textarea::-webkit-input-placeholder {
color: gray; }
.c-form_input::-moz-placeholder, .c-form_select_input::-moz-placeholder, .c-form_textarea::-moz-placeholder {
color: gray; }
.c-form_input:-ms-input-placeholder, .c-form_select_input:-ms-input-placeholder, .c-form_textarea:-ms-input-placeholder {
color: gray; }
.c-form_input::-ms-input-placeholder, .c-form_select_input::-ms-input-placeholder, .c-form_textarea::-ms-input-placeholder {
color: gray; }
.c-form_input::placeholder, .c-form_select_input::placeholder, .c-form_textarea::placeholder {
color: gray; }
.c-form_checkboxLabel, .c-form_radioLabel {
position: relative;
display: inline-block;
margin-right: 0.625rem;
margin-bottom: 0;
padding-left: 1.75rem;
cursor: pointer; }
.c-form_checkboxLabel::before, .c-form_radioLabel::before, .c-form_checkboxLabel::after, .c-form_radioLabel::after {
position: absolute;
top: 50%;
left: 0;
display: inline-block;
margin-top: -0.5625rem;
padding: 0;
width: 1.125rem;
height: 1.125rem;
content: ""; }
.c-form_checkboxLabel::before, .c-form_radioLabel::before {
background-color: #FFFFFF;
border: 1px solid lightgray; }
.c-form_checkboxLabel::after, .c-form_radioLabel::after {
border-color: transparent;
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%23424242%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: 0.75rem;
background-repeat: no-repeat;
opacity: 0; }
.c-form_checkboxLabel:hover::before, .c-form_radioLabel:hover::before {
border-color: darkgray; }
.c-form_checkbox:focus + .c-form_checkboxLabel::before, .c-form_radio:focus + .c-form_checkboxLabel::before, .c-form_checkbox:focus + .c-form_radioLabel::before, .c-form_radio:focus + .c-form_radioLabel::before {
border-color: dimgray; }
.c-form_checkbox:checked + .c-form_checkboxLabel::after, .c-form_radio:checked + .c-form_checkboxLabel::after, .c-form_checkbox:checked + .c-form_radioLabel::after, .c-form_radio:checked + .c-form_radioLabel::after {
opacity: 1; }
.c-form_checkbox, .c-form_radio {
position: absolute;
width: 0;
opacity: 0; }
.c-form_radioLabel::before, .c-form_radioLabel::after {
border-radius: 50%; }
.c-form_radioLabel::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%23424242%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E");
background-size: 0.375rem; }
.c-form_select {
position: relative;
cursor: pointer; }
.c-form_select::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 2;
width: 2.5rem;
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%23424242%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: 0.5rem;
background-repeat: no-repeat;
content: "";
pointer-events: none; }
.c-form_select_input {
position: relative;
z-index: 1;
padding-right: 2.5rem;
cursor: pointer; }
.c-form_textarea {
min-height: 12.5rem; }
/* stylelint-disable */
.u-2\:1::before {
padding-bottom: 50%; }
@@ -819,3 +820,7 @@ h6, .o-h6 {
.u-5\/5 {
width: 100% !important; }
@media (min-width: 700px) {
.u-1\/2\@from-small {
width: 50%; } }

12
www/index.html
View File

@@ -28,19 +28,17 @@
</nav>
</header>
<main>
<div data-load-container>
<div data-module-scroll>
<p>Home</p>
</div>
</div>
<div class="o-scroll" data-module-scroll>
<main>
<h1 class="c-heading -h1">Home</h1>
</main>
<footer>
<p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank">🚂</a></p>
</footer>
</div>
</div>
<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.min.js" crossorigin="anonymous"></script>
<script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=fetch%2CCustomEvent%2CElement.prototype.matches" crossorigin="anonymous"></script>

60
www/page.html
View File

@@ -28,12 +28,64 @@
</nav>
</header>
<main>
<div data-load-container>
<div data-module-scroll>
<div class="o-scroll" data-module-scroll>
<main>
<div class="o-container">
<h1 class="c-heading -h1">Page</h1>
<p>Page</p>
<div class="o-layout">
<div class="o-layout_item u-1/2@from-small">
<form class="c-form">
<div class="c-form_item">
<label class="c-form_label" for="input">Input</label>
<input class="c-form_input" type="text" id="input">
</div>
<div class="c-form_item">
<div class="o-layout -gutter">
<div class="o-layout_item u-1/2">
<input class="c-form_checkbox" type="checkbox" id="checkbox">
<label class="c-form_checkboxLabel" for="checkbox">Checkbox</label>
</div>
<div class="o-layout_item u-1/2">
<input class="c-form_checkbox" type="checkbox" id="checkbox2">
<label class="c-form_checkboxLabel" for="checkbox2">Checkbox 2</label>
</div>
</div>
</div>
<div class="c-form_item">
<div class="o-layout -gutter">
<div class="o-layout_item u-1/2">
<input class="c-form_radio" type="radio" name="radio" id="radio">
<label class="c-form_radioLabel" for="radio">Radio</label>
</div>
<div class="o-layout_item u-1/2">
<input class="c-form_radio" type="radio" name="radio" id="radio2">
<label class="c-form_radioLabel" for="radio2">Radio 2</label>
</div>
</div>
</div>
<div class="c-form_item">
<label class="c-form_label" for="select">Select</label>
<div class="c-form_select">
<select class="c-form_select_input" id="select">
<option value="option">Option</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</div>
</div>
<div class="c-form_item">
<label class="c-form_label" for="textarea">Textarea</label>
<textarea class="c-form_textarea" id="textarea"></textarea>
</div>
<button class="c-button" type="submit">
Submit
</button>
</form>
</div>
</div>
</div>
</main>
@@ -41,6 +93,8 @@
<footer>
<p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate" title="Locomotive Boilerplate" target="_blank">🚂</a></p>
</footer>
</div>
</div>
<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.min.js" crossorigin="anonymous"></script>
<script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=fetch%2CCustomEvent%2CElement.prototype.matches" crossorigin="anonymous"></script>