diff --git a/src/components/_alerts.scss b/src/components/_alerts.scss index f4720b8..d8e6da3 100644 --- a/src/components/_alerts.scss +++ b/src/components/_alerts.scss @@ -1,5 +1,6 @@ .alert { - @include border; + @include border-style(); + border: 2px solid $primary; padding: 15px; margin-bottom: 20px; width: 100%; diff --git a/src/components/_article.scss b/src/components/_article.scss index ec20169..c6399ad 100644 --- a/src/components/_article.scss +++ b/src/components/_article.scss @@ -21,5 +21,26 @@ article { font-size: 30px; line-height: 1.3; margin: 35px 0px; - } + } + + button { + @include resp(xs) { + margin: 0 auto; + display: block; + width: 100%; + margin-bottom: 1.5rem; + } + + &:not(:first-of-type) { + margin-left: 2rem; + + @include resp(xs) { + margin-left: 0; + } + } + } + + p { + line-height: 1.6; + } } diff --git a/src/components/_badges.scss b/src/components/_badges.scss index f534bab..e7735cd 100644 --- a/src/components/_badges.scss +++ b/src/components/_badges.scss @@ -1,5 +1,6 @@ .badge { - @include border; + @include border-style(); + border: 2px solid $primary; display: inline-block; padding: .25em .4em; font-size: 75%; diff --git a/src/components/_borders.scss b/src/components/_borders.scss index 21331d6..42693b0 100644 --- a/src/components/_borders.scss +++ b/src/components/_borders.scss @@ -1,60 +1,37 @@ -@mixin border($style: 1, $color: $primary) { - border: 2px solid $color; - @if $style == 1 { - .border-#{$style}, - .child-borders>*:nth-child(6n+1) { - border-top-left-radius: 255px 15px; - border-top-right-radius: 15px 225px; - border-bottom-right-radius: 225px 15px; - border-bottom-left-radius: 15px 255px; - } - } - @if $style == 2 { - .border-2, - .child-borders>*:nth-child(6n+2) { - border-top-left-radius: 125px 25px; - border-top-right-radius: 10px 205px; - border-bottom-right-radius: 20px 205px; - border-bottom-left-radius: 185px 25px; - } - } - @if $style == 3 { - .border-3, - .child-borders>*:nth-child(6n+3) { - border-top-left-radius: 15px 225px; - border-top-right-radius: 255px 15px; - border-bottom-left-radius: 225px 15px; - border-bottom-right-radius: 15px 255px; - } - } - @if $style == 4 { - .border-4, - .child-borders>*:nth-child(6n+4) { - border-top-left-radius: 15px 225px; - border-top-right-radius: 25px 150px; - border-bottom-left-radius: 25px 115px; - border-bottom-right-radius: 155px 25px; - } - } - @if $style == 5 { - .border-5, - .child-borders>*:nth-child(6n+5) { - border-top-left-radius: 250px 15px; - border-top-right-radius: 25px 80px; - border-bottom-left-radius: 20px 115px; - border-bottom-right-radius: 15px 105px; - } - } - @if $style == 6 { - .border-6, - .child-borders>*:nth-child(6n+6) { - border-top-left-radius: 28px 125px; - border-top-right-radius: 100px 30px; - border-bottom-right-radius: 20px 205px; - border-bottom-left-radius: 15px 225px; - } - } +.border { + border: 2px solid $primary; +} + +.border, +.border-1, +.child-borders>*:nth-child(6n+1) { + @include border-style(1); +} + +.border-2, +.child-borders>*:nth-child(6n+2) { + @include border-style(2); +} + +.border-3, +.child-borders>*:nth-child(6n+3) { + @include border-style(3); +} + +.border-4, +.child-borders>*:nth-child(6n+4) { + @include border-style(4); +} + +.border-5, +.child-borders>*:nth-child(6n+5) { + @include border-style(5); +} + +.border-6, +.child-borders>*:nth-child(6n+6) { + @include border-style(6); } .child-borders>* { diff --git a/src/components/_boxreset.scss b/src/components/_boxreset.scss deleted file mode 100644 index c7d093e..0000000 --- a/src/components/_boxreset.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Why is box sizing not the default? -// https://www.paulirish.com/2012/box-sizing-border-box-ftw/ -html { - box-sizing: border-box; -} -*, *:before, *:after { - box-sizing: inherit; -} \ No newline at end of file diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss index 4a29bbb..0ed0d0d 100644 --- a/src/components/_buttons.scss +++ b/src/components/_buttons.scss @@ -7,13 +7,20 @@ button, color: $primary; display: inline; outline: none; - border: solid 2px $primary; - @include border(); + border: 2px solid $primary; + @include border-style(); font-size: 1rem; padding: .75rem .75rem; cursor: pointer; @include shadow(); + @include resp(520px) { + display: block; + margin: 0 auto; + text-align: center; + margin-bottom: 1rem; + } + &.btn-large { @include shadow(large); font-size: 2rem; @@ -49,7 +56,8 @@ button, &.disabled, &[disabled] { - @extend .disabled; + cursor: not-allowed; + opacity: .5 } } diff --git a/src/components/_config.scss b/src/components/_config.scss index ce7107f..2d1eade 100644 --- a/src/components/_config.scss +++ b/src/components/_config.scss @@ -1,47 +1,53 @@ -// Global PaperCSS Config +/** + Global PaperCSS Config +*/ + // Imports @import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC'); -// Set Colors -$primary: #41403E; -$secondary: #0071DE; +// Set theme colors +$primary: #41403E !default; +$secondary: #0071DE !default; -$success: #86a361; -$warning: #ddcd45; -$danger: #a7342d; -$muted: #868e96; +$success: #86a361 !default; +$warning: #ddcd45 !default; +$danger: #a7342d !default; +$muted: #868e96 !default; -$primary-light: lighten($primary, 50%); -$secondary-light: lighten($secondary, 50%); -$success-light: lighten($success, 30%); -$warning-light: lighten($warning, 30%); -$danger-light: lighten($danger, 45%); -$muted-light: lighten($muted, 35%); +$primary-light: lighten($primary, 50%) !default; +$secondary-light: lighten($secondary, 50%) !default; +$success-light: lighten($success, 30%) !default; +$warning-light: lighten($warning, 30%) !default; +$danger-light: lighten($danger, 45%) !default; +$muted-light: lighten($muted, 35%) !default; -$white-dark: rgba(black, 0.03); -$light-dark: rgba(black, 0.7); -$white: rgba(white, 1); -$main-background: rgba(white, 1); +$white-dark: rgba(black, 0.03) !default; +$light-dark: rgba(black, 0.7) !default; +$white: rgba(white, 1) !default; +$main-background: rgba(white, 1) !default; -$primary-text: #FFF; -$secondary-text: $primary; -$success-text: $primary; -$warning-text: $primary; -$danger-text: $primary; -$muted-text: $primary; +$primary-text: #FFF !default; +$secondary-text: $primary !default; +$success-text: $primary !default; +$warning-text: $primary !default; +$danger-text: $primary !default; +$muted-text: $primary !default; -$shadow-color-regular: hsla(0,0,0%,.2); -$shadow-color-hover: hsla(0,0,0%,.3); +$shadow-color-regular: hsla(0,0,0%,.2) !default; +$shadow-color-hover: hsla(0,0,0%,.3) !default; -// Set class names to generate the css classes on build +// Map to set your color names $colors: (primary, $primary, $primary-light, $primary-text), (secondary, $secondary, $secondary-light, $secondary-text), (success, $success, $success-light, $success-text), (warning, $warning, $warning-light, $warning-text), (danger, $danger, $danger-light, $danger-text), (muted, $muted, $muted-light, $muted-text); - +/** + This Loop will generate the various .text- and .background- classes + based on the $colors map above. +*/ @each $colorName, $color, $color-light in $colors { .text-#{$colorName} { color: $color; @@ -51,26 +57,75 @@ $colors: (primary, $primary, $primary-light, $primary-text), } } -// Set Fonts -$global-font-size: 20px; -$header-font: 'Patrick Hand SC'; -$body-font: 'Neucha'; -$font-color: $primary; +// Font settings +$global-font-size: 20px !default; +$header-font: 'Patrick Hand SC' !default; +$body-font: 'Neucha' !default; +$font-color: $primary !default; -// Sizes for responsive breakpoints -$large-screen: 1200px; -$medium-screen: 992px; -$small-screen: 768px; -$xsmall-screen: 480px; +// Responsive breakpoints +$large-screen: 1200px !default; +$medium-screen: 992px !default; +$small-screen: 768px !default; +$xsmall-screen: 480px !default; // Sizes for shadows -$shadow-small: 10px 19px 17px -13px $shadow-color-regular; -$shadow-regular: 15px 28px 25px -18px $shadow-color-regular; -$shadow-large: 20px 38px 34px -26px $shadow-color-regular; -$shadow-hover: 2px 8px 8px -5px $shadow-color-hover; +$shadow-small: 10px 19px 17px -13px $shadow-color-regular !default; +$shadow-regular: 15px 28px 25px -18px $shadow-color-regular !default; +$shadow-large: 20px 38px 34px -26px $shadow-color-regular !default; +$shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default; // Mixins +/** + Assign a border style to a component selector. + @param integer + @default 1 +*/ +@mixin border-style($style: 1) { + @if $style==1 { + border-top-left-radius: 255px 15px; + border-top-right-radius: 15px 225px; + border-bottom-right-radius: 225px 15px; + border-bottom-left-radius: 15px 255px; + } + @if $style==2 { + border-top-left-radius: 125px 25px; + border-top-right-radius: 10px 205px; + border-bottom-right-radius: 20px 205px; + border-bottom-left-radius: 185px 25px; + } + @if $style==3 { + border-top-left-radius: 15px 225px; + border-top-right-radius: 255px 15px; + border-bottom-left-radius: 225px 15px; + border-bottom-right-radius: 15px 255px; + } + @if $style==4 { + border-top-left-radius: 15px 225px; + border-top-right-radius: 25px 150px; + border-bottom-left-radius: 25px 115px; + border-bottom-right-radius: 155px 25px; + } + @if $style==5 { + border-top-left-radius: 250px 15px; + border-top-right-radius: 25px 80px; + border-bottom-left-radius: 20px 115px; + border-bottom-right-radius: 15px 105px; + } + @if $style==6 { + border-top-left-radius: 28px 125px; + border-top-right-radius: 100px 30px; + border-bottom-right-radius: 20px 205px; + border-bottom-left-radius: 15px 225px; + } +} + +/** + Mixin for setting responsive breakpoints + @param string | integer + @default null +*/ @mixin resp($max:null, $min:null) { @if $max == large or $max == lg { $max: $large-screen; } @if $max == medium or $max == md { $max: $medium-screen; } @@ -82,6 +137,9 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover; @else { @error "no matching size found";} } +/** + Useful helper mixins +*/ @mixin hr-after() { text-align: center; color: lighten($primary, 30%); @@ -106,20 +164,6 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover; max-width: $percent; } -@mixin make-column($columns) { - @each $breakpoint, $columnName in $columns { - // @todo: fix failing resp() mixin here - @media only screen and (max-width: $breakpoint) { - @for $i from 1 through $numberOfColumns { - .#{$columnName}-#{$i} { - flex: 0 0 $i * 100% / $numberOfColumns; - max-width: $i * 100% / $numberOfColumns; - } - } - } - } -} - @mixin li-bullet($char) { li:before { content: $char; @@ -139,6 +183,11 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover; transform: translate($x, $y); } +/** + Set the shadow type for a component + @param string + @default regular +*/ @mixin shadow($type: regular) { @if $type == hover { box-shadow: $shadow-hover; diff --git a/src/components/_container.scss b/src/components/_container.scss index 04abe7e..fa90f01 100644 --- a/src/components/_container.scss +++ b/src/components/_container.scss @@ -38,7 +38,7 @@ hr { -webkit-box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2); -moz-box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2); box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2); - @include resp(xsmall) { + @include resp(xs) { padding: 1rem; width: 100%; margin-top: 0; diff --git a/src/components/_flexbox.scss b/src/components/_flexbox.scss index 4727c5e..c789d6c 100644 --- a/src/components/_flexbox.scss +++ b/src/components/_flexbox.scss @@ -1,12 +1,18 @@ -$columns: (0, col), - ($large-screen, lg), - ($medium-screen, md), - ($small-screen, sm), - ($xsmall-screen, xs); - $numberOfColumns: 12; -@include make-column($columns); +@mixin create-flex-classes($colName, $breakpoint: 0px) { + @include resp($min: $breakpoint) { + @for $i from 1 through $numberOfColumns { + .#{$colName}-#{$i} { + -webkit-box-flex: 0; + -webkit-flex: 0 0 $i * 100% / $numberOfColumns; + -ms-flex: 0 0 $i * 100% / $numberOfColumns; + flex: 0 0 $i * 100% / $numberOfColumns; + max-width: $i * 100% / $numberOfColumns; + } + } + } +} .row { margin-right: auto; @@ -21,6 +27,7 @@ $numberOfColumns: 12; -ms-flex-flow: row wrap; flex-flow: row wrap; margin-bottom: 1rem; + &.flex-right { -webkit-box-pack: end; -webkit-justify-content: flex-end; @@ -66,8 +73,8 @@ $numberOfColumns: 12; .col { padding: 1rem; - @include resp(small) { - // Stack for mobile + + @include resp(sm) { @include col-size(100%); } } @@ -77,6 +84,12 @@ $numberOfColumns: 12; flex: 1 1 0px; } +@include create-flex-classes(col); +@include create-flex-classes(xs, $xsmall-screen); +@include create-flex-classes(sm, $small-screen); +@include create-flex-classes(md, $medium-screen); +@include create-flex-classes(lg, $large-screen); + .align-top { -webkit-align-self: flex-start; -ms-flex-item-align: start; @@ -95,3 +108,17 @@ $numberOfColumns: 12; -ms-flex-item-align: end; align-self: flex-end; } + +.container { + width: 100%; + max-width: 960px; + position: relative; + margin: 0 auto; + + @include resp(md) { + width: 85%; + } + @include resp(xs) { + width: 90%; + } +} diff --git a/src/components/_forms.scss b/src/components/_forms.scss index 1f0ea16..f98c9ff 100644 --- a/src/components/_forms.scss +++ b/src/components/_forms.scss @@ -45,10 +45,11 @@ input, select, textarea { // TODO: make these classes implicit. We can find out what class to apply based on its type .paper-radio, .paper-check { - display: block; + display: block; margin-bottom: .5rem; cursor: pointer; + /* the basic, unchecked style */ input { border: 0; height: 1px; margin: -1px; @@ -57,45 +58,52 @@ input, select, textarea { position: absolute; width: 1px; display: none; - } - input + span { - display: block; - } - /* the basic, unchecked style */ - input + span:before { - content: ''; - display: inline-block; - position: relative; - width: 1rem; - height: 1rem; - border: 2px solid $primary; - margin-right: 0.75em; - vertical-align: -0.25em; - } - input[type="radio"] + span:before { - border-top-left-radius: 1rem 1rem; - border-top-right-radius: 1rem .6rem; - border-bottom-right-radius: 1rem .9rem; - border-bottom-left-radius: .7rem 1rem; - } - input[type="checkbox"] + span:before { - border-top-left-radius: 255px 15px; - border-top-right-radius: 15px 225px; - border-bottom-right-radius: 225px 15px; - border-bottom-left-radius:15px 255px; - } + & + span { + display: block; - /* the checked style using the :checked pseudo class */ - input[type="radio"]:checked + span:before { - $escaped-svg: escape(""); - $radio-fill: "data:image/svg+xml,${escaped-svg}"; - background: url($radio-fill) left center no-repeat; - } - input[type="checkbox"]:checked + span:before { - $escaped-svg: escape(""); - $check-fill: "data:image/svg+xml,${escaped-svg}"; - background: url($check-fill) left center no-repeat; + &:before { + content: ''; + display: inline-block; + position: relative; + width: 1rem; + height: 1rem; + border: 2px solid $primary; + margin-right: 0.75em; + vertical-align: -0.25em; + } + } + + /* radio styles */ + &[type="radio"] { + & + span:before { + border-top-left-radius: 1rem 1rem; + border-top-right-radius: 1rem .6rem; + border-bottom-right-radius: 1rem .9rem; + border-bottom-left-radius: .7rem 1rem; + } + + &:checked + span:before { + $radio-fill: "data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20fill%3D'#{$secondary}'%20d%3D'M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89%20c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837%20c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079%20c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826%20c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371%20c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262%20c0.643,4.698,0.646,10.775-3.811,13.746'%3E%3C/path%3E%3C/svg%3E"; + background: url($radio-fill) left center no-repeat; + } + } + + /* checkbox styles */ + &[type="checkbox"] { + & + span:before { + border-top-left-radius: 255px 15px; + border-top-right-radius: 15px 225px; + border-bottom-right-radius: 225px 15px; + border-bottom-left-radius:15px 255px; + } + + /* checked */ + &:checked + span:before { + $check-fill: "data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20stroke%3D'#{$secondary}'%20fill-opacity%3D'0'%20stroke-width%3D'16'%20d%3D'm13,62c0.61067,1.6%201.3045,2.3045%201.75717,2.75716c0.72683,0.72684%201.24283,1.24284%202.07617,2.07617c0.54133,0.54133%201.04116,1.06035%201.82833,1.82383c0.5781,0.5607%201.00502,0.96983%202.02633,1.74417c0.55877,0.42365%201.191,0.84034%201.884,1.284c1.16491,0.74577%201.59777,1.00147%202.5,1.55067c0.4692,0.28561%201.43689,0.86868%201.93067,1.16534c0.99711,0.59904%201.99667,1.19755%202.49283,1.49866c0.98501,0.59779%201.47073,0.89648%201.94733,1.2c1.3971,0.88972%201.83738,1.19736%202.7,1.7955c0.42201,0.29262%201.24022,0.87785%202.05583,1.41917c0.79531,0.52785%201.59376,1.0075%202.38,1.43867c0.74477,0.40842%201.45167,0.75802%202.37817,1.22517c0.76133,0.38387%201.54947,0.82848%202.40717,1.41084c0.7312,0.49647%201.49563,1.08231%202.27884,1.258c0.35564,0.07978%200.14721,-0.95518%200.35733,-1.86867c0.18092,-0.78651%200.98183,-1.2141%200.99983,-2.07867c0.02073,-0.99529%200.07916,-1.79945%200.42533,-2.56133c0.43607,-0.95973%200.53956,-1.66774%200.79617,-2.68183c0.18888,-0.74645%200.39764,-1.31168%200.7785,-2.6235c0.20865,-0.71867%200.41483,-1.48614%200.708,-2.28c0.15452,-0.41843%200.77356,-1.73138%201.348,-2.64133c0.30581,-0.48443%200.65045,-0.97043%201.0065,-1.4745c0.74776,-1.05863%201.1531,-1.60163%201.9375,-2.77084c0.40621,-0.60548%200.80272,-1.23513%201.2045,-1.8765c0.40757,-0.65062%200.81464,-1.31206%201.2315,-1.9755c0.41946,-0.66757%200.83374,-1.34258%201.73067,-2.648c0.44696,-0.65053%200.91436,-1.28356%201.386,-1.9095c0.46972,-0.6234%200.94725,-1.2364%201.422,-1.8465c0.94116,-1.20947%201.86168,-2.40844%202.30367,-3.0105c0.438,-0.59664%200.86246,-1.19396%201.27501,-1.7895c0.40743,-0.58816%200.80352,-1.17234%201.185,-1.7535c1.10526,-1.68381%201.44079,-2.23511%201.77633,-2.7705c0.32878,-0.52461%200.96306,-1.5459%201.27467,-2.04c0.60654,-0.96177%201.20782,-1.88193%201.51051,-2.325c0.59013,-0.86381%201.17888,-1.68032%201.46416,-2.075c0.5498,-0.76063%201.31747,-1.8231%201.77883,-2.4895c0.43918,-0.63437%200.85266,-1.25267%201.45717,-2.15717c0.59549,-0.891%200.96531,-1.46814%201.51466,-2.22933c0.58413,-0.80936%201.12566,-1.40253%201.83801,-2.12333c0.61304,-0.62031%200.45171,-1.48306%200.7045,-2.34733c0.25668,-0.87762%200.75447,-1.62502%201,-2.40983c0.25128,-0.8032%200.7633,-1.39453%201.33217,-2.25417c0.54528,-0.82398%200.73415,-1.6714%201.31516,-2.336c0.55639,-0.63644%201.38658,-1.22588%201.8595,-1.9c0.5082,-0.72441%200.78867,-1.4%201.60266,-1.56667l0.71184,-0.4905'%3E%3C/path%3E%3C/svg%3E"; + background: url($check-fill) left center no-repeat; + } + } } } } diff --git a/src/components/_images.scss b/src/components/_images.scss index 4c4cb0f..31caa9e 100644 --- a/src/components/_images.scss +++ b/src/components/_images.scss @@ -1,23 +1,28 @@ img { - max-width: 100%; - height: auto; - display: block; - @include border; - &.float-left { - float: left; - margin: 1rem 1rem 1rem 0rem; - } - &.float-right { - float: right; - margin: 1rem 0rem 1rem 1rem; - } - &.no-responsive { - max-width: initial; - height: initial; - display: initial; - } - &.no-border { - border: 0; - border-radius: 0; - } + max-width: 100%; + height: auto; + display: block; + border: 2px solid $primary; + @include border-style(); + + &.float-left { + float: left; + margin: 1rem 1rem 1rem 0rem; + } + + &.float-right { + float: right; + margin: 1rem 0rem 1rem 1rem; + } + + &.no-responsive { + max-width: initial; + height: initial; + display: initial; + } + + &.no-border { + border: 0; + border-radius: 0; + } } diff --git a/src/components/_popovers.scss b/src/components/_popovers.scss index c4fc5bd..9dadf92 100644 --- a/src/components/_popovers.scss +++ b/src/components/_popovers.scss @@ -28,7 +28,8 @@ background: $light-dark; transition: opacity .25s ease-out; transform: translateX(-50%) translateY(-100%); - @include border; + @include border-style(); + border: 2px solid $primary; } } diff --git a/src/components/_reset.scss b/src/components/_reset.scss index a7334ce..dfc72ac 100644 --- a/src/components/_reset.scss +++ b/src/components/_reset.scss @@ -188,3 +188,12 @@ template { [hidden] { display: none } + +// Why is box sizing not the default? +// https://www.paulirish.com/2012/box-sizing-border-box-ftw/ +html { + box-sizing: border-box; +} +*, *:before, *:after { + box-sizing: inherit; +} diff --git a/src/components/_shadows.scss b/src/components/_shadows.scss index e530ea6..9a89741 100644 --- a/src/components/_shadows.scss +++ b/src/components/_shadows.scss @@ -1,11 +1,28 @@ +.shadow { + @include shadow(); + + &.shadow-large { + @include shadow(large); + } + + &.shadow-small { + @include shadow(small); + } + &.shadow-hover { + &:hover { + @include shadow(hover); + } + } +} + .child-shadows > * { - box-shadow: $shadow-regular; - transition: all .5s ease; + @include shadow(); } .child-shadows-hover > * { + @include shadow(); + &:hover { - box-shadow: $shadow-hover; - transform: translate(0, 2px); + @include shadow(hover); } } diff --git a/src/components/_tables.scss b/src/components/_tables.scss index 0709c4f..3fe6e00 100644 --- a/src/components/_tables.scss +++ b/src/components/_tables.scss @@ -2,18 +2,22 @@ table { box-sizing: border-box; width: 100%; max-width: 100%; + overflow-x: auto; + thead tr th { vertical-align: bottom; text-align: left; padding: 8px; line-height: 1.5; } + tbody tr td { padding: 8px; line-height: 1.5; vertical-align: top; border-top: 1px dashed lighten($primary, 60%); } + @include resp(xsmall) { thead tr th { padding: 2%; @@ -22,9 +26,11 @@ table { padding: 2%; } } + &.table-hover tbody tr:hover { color: $secondary; } + &.table-alternating tbody tr:nth-of-type(even) { color: lighten($primary, 25%); } diff --git a/src/components/_tabs.scss b/src/components/_tabs.scss index 16b4af0..49b5c4a 100644 --- a/src/components/_tabs.scss +++ b/src/components/_tabs.scss @@ -6,6 +6,17 @@ input { display: none; + + &:checked+label { + color: $primary; + border-bottom: solid 3px $secondary; + } + + @for $num from 1 through 5 { + &[id="tab#{$num}"]:checked~div[id="content#{$num}"] { + display: block; + } + } } label { @@ -15,20 +26,10 @@ font-weight: 600; text-align: center; color: $primary-light; + &:hover { color: $muted; cursor: pointer; } } - - input:checked+label { - color: $primary; - border-bottom: solid 3px $secondary; - } - - @for $num from 1 through 5 { - input[id="tabs#{$num}"]:checked~div[id="content#{$num}"] { - display: block; - } - } } diff --git a/src/styles.scss b/src/styles.scss index 1a55df7..686dc5c 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,34 +1,32 @@ @charset 'UTF-8'; -@media screen { - // Settings && Mixins - @import 'components/config'; +/* Variables & Mixins */ +@import 'components/config'; - // Individual Components - @import 'components/reset'; - @import 'components/boxreset'; - @import 'components/borders'; - @import 'components/fonts'; - @import 'components/shadows'; - @import 'components/forms'; - @import 'components/container'; - @import 'components/flexbox'; - @import 'components/buttons'; - @import 'components/lists'; - @import 'components/code'; - @import 'components/tables'; - @import 'components/images'; - @import 'components/utilities'; - @import 'components/popovers'; - @import 'components/cards'; - @import 'components/badges'; - @import 'components/alerts'; - @import 'components/tabs'; - @import 'components/article'; - @import 'components/modals'; -} +/* normalize.css v7.0.0 & box reset */ +@import 'components/reset'; + +/* Components */ +@import 'components/flexbox'; +@import 'components/borders'; +@import 'components/fonts'; +@import 'components/shadows'; +@import 'components/forms'; +@import 'components/container'; +@import 'components/buttons'; +@import 'components/lists'; +@import 'components/code'; +@import 'components/tables'; +@import 'components/images'; +@import 'components/utilities'; +@import 'components/popovers'; +@import 'components/cards'; +@import 'components/badges'; +@import 'components/alerts'; +@import 'components/tabs'; +@import 'components/article'; +@import 'components/modals'; -// @todo: Add print styles? ;) // @media print { // @import 'components/print'; // }