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