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';
// }