diff --git a/src/_alerts.scss b/src/_alerts.scss deleted file mode 100644 index 6328e6b..0000000 --- a/src/_alerts.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import 'colors'; -@import 'borders'; - -.alert { - @extend .border; - padding: 15px; - margin-bottom: 20px; - width: 100%; -} - -@mixin make-alert-color-classes($a: length($colors)) when ($a > 0) -{ - @include make-alert-color-classes($a - 1); - $color: extract($colors, $a); - .alert-${color} { - border-color: $$color; - color: $$color; - background-color: #{"${${color}-light}"}; - } -} - -@include make-alert-color-classes(); diff --git a/src/badges.scss b/src/badges.scss deleted file mode 100644 index 626d3ac..0000000 --- a/src/badges.scss +++ /dev/null @@ -1,29 +0,0 @@ -@import './colors.less'; -@import './borders.less'; - -.badge { - .border; - - display: inline-block; - padding: .25em .4em; - font-size: 75%; - font-weight: 700; - line-height: 1; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - background-color: $muted; - color: white; - border-color: transparent; -} - -@mixin make-badge-color-classes($i: length($colors)) when ($i > 0) -{ - @include make-badge-color-classes($i - 1); - $color: extract($colors, $i); - .badge.${color} { - background-color: $$color; - } -} - -@include make-badge-color-classes(); diff --git a/src/code.scss b/src/code.scss deleted file mode 100644 index bf71f6a..0000000 --- a/src/code.scss +++ /dev/null @@ -1,38 +0,0 @@ -@import './colors.less'; - -code { - padding: 2px 4px; - font-size: 80%; - color: $secondary; - background-color: lighten($primary, 70%); - border-radius: 3px; -} -kbd { - padding: 2px 4px; - font-size: 80%; - color: $white; - background-color: $primary; - border-radius: 3px; -} -pre { - display: block; - padding: 1em; - font-size: 80%; - line-height: 1.5; - color: $primary; - word-break: break-all; - word-wrap: break-word; - background-color: lighten($primary, 73%); - border: 1px solid lighten($primary, 50%); - border-radius: 3px; - overflow-x: auto; - white-space: pre; -} -pre code{ - color: inherit; - background: transparent; - display: block; - font-size: inherit; - padding: initial; - white-space:pre; -} diff --git a/src/components/_alerts.scss b/src/components/_alerts.scss new file mode 100644 index 0000000..f86f81e --- /dev/null +++ b/src/components/_alerts.scss @@ -0,0 +1,17 @@ +@import 'colors'; +@import 'borders'; + +.alert { + @extend .border; + padding: 15px; + margin-bottom: 20px; + width: 100%; +} + +@each $colorName, $color, $color-light in $colors { + .alert-#{$colorName} { + color: $color; + border-color: $color; + background-color: $color-light; + } +} diff --git a/src/article.scss b/src/components/_article.scss similarity index 92% rename from src/article.scss rename to src/components/_article.scss index 4c3b7ef..9c72e3f 100644 --- a/src/article.scss +++ b/src/components/_article.scss @@ -1,4 +1,4 @@ -@import './colors.less'; +@import 'colors'; article { .article-title { diff --git a/src/components/_badges.scss b/src/components/_badges.scss new file mode 100644 index 0000000..d1c71dc --- /dev/null +++ b/src/components/_badges.scss @@ -0,0 +1,23 @@ +@import 'colors'; +@import 'borders'; + +.badge { + @extend .border; + display: inline-block; + padding: .25em .4em; + font-size: 75%; + font-weight: 700; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + background-color: $muted; + color: $white; + border-color: transparent; +} + +@each $colorName, $color in $colors { + .badge.#{$colorName} { + background-color: $color; + } +} diff --git a/src/borders.scss b/src/components/_borders.scss similarity index 85% rename from src/borders.scss rename to src/components/_borders.scss index 3639396..fb12622 100644 --- a/src/borders.scss +++ b/src/components/_borders.scss @@ -1,4 +1,4 @@ -@import './colors.less'; +@import 'colors'; .border { border: 2px solid $primary; @@ -55,13 +55,8 @@ border-width: 5px; } -@mixin make-border-color-classes($i: length($colors)) when ($i > 0) -{ - @include make-border-color-classes($i - 1); - $color: extract($colors, $i); - .border-${color} { - border-color: $$color; - } +@each $colorName, $color in $colors { + .border-#{$colorName} { + border-color: $color; + } } - -@include make-border-color-classes(); diff --git a/src/boxreset.scss b/src/components/_boxreset.scss similarity index 100% rename from src/boxreset.scss rename to src/components/_boxreset.scss diff --git a/src/buttons.scss b/src/components/_buttons.scss similarity index 65% rename from src/buttons.scss rename to src/components/_buttons.scss index 31ecf70..09b48aa 100644 --- a/src/buttons.scss +++ b/src/components/_buttons.scss @@ -1,10 +1,10 @@ -@import './colors.less'; -@import './shadows.less'; -@import './borders.less'; -@import './forms.less'; // .disabled +@import 'colors'; +@import 'shadows'; +@import 'borders'; +@import 'forms'; // .disabled button, .paper-btn, [type="button"] { - .shadow; + @extend .shadow; align-self:center; background:transparent; transition:all .5s ease, background-color .1s ease; @@ -12,19 +12,19 @@ button, .paper-btn, [type="button"] { display: inline; outline:none; border:solid 2px $primary; - .border; + @extend .border; font-size: 1rem; padding: .75rem .75rem; cursor: pointer; - .shadow; - .shadow-hover; + @extend .shadow; + @extend .shadow-hover; &.btn-large { - .shadow-large; + @extend .shadow-large; font-size:2rem; padding:1rem 1rem; } &.btn-small { - .shadow-small; + @extend .shadow-small; font-size: .75rem; padding: .5rem; } @@ -33,7 +33,7 @@ button, .paper-btn, [type="button"] { width: 100%; } &:hover { - .shadow-hover; + @extend .shadow-hover; } &:focus{ border: 2px solid $secondary; @@ -46,7 +46,7 @@ button, .paper-btn, [type="button"] { transition: none; } &.disabled, &[disabled] { - .disabled; + @extend .disabled; } } @@ -66,19 +66,18 @@ a { } } -@mixin make-button-color-classes($i: length($colors)) when ($i > 0) -{ - @include make-button-color-classes($i - 1); - $color: extract($colors, $i); - button.btn-${color}, .paper-btn.btn-${color}, [type="button"].btn-${color} { - border-color: $$color; - background-color: #{"${${color}-light}"}; - color: #{"${${color}-text}"}; - &:hover:active{ - $darkcolour: #{"${color}-light"}; - background-color: darken($$darkcolour, 10%); - } +@each $colorName, $color, $color-light, $color-text in $colors { + .alert-#{$colorName} { + color: $color; + border-color: $color; + background-color: $color-light; + } + button.btn-#{$colorName}, .paper-btn.btn-#{$colorName}, [type="button"].btn-#{$colorName} { + border-color: $color; + background-color: $color-light; + color: $color-text; + &:hover:active { + background-color: darken($color-light, 10%); } + } } - -@include make-button-color-classes(); diff --git a/src/cards.scss b/src/components/_cards.scss similarity index 87% rename from src/cards.scss rename to src/components/_cards.scss index 203740e..ed26cbb 100644 --- a/src/cards.scss +++ b/src/components/_cards.scss @@ -1,10 +1,9 @@ -@import './colors.less'; -@import './shadows.less'; +@import 'colors'; +@import 'shadows'; .card { - .shadow; - .shadow-hover; - + @extend .shadow; + @extend .shadow-hover; position: relative; display: flex; flex-direction: column; @@ -35,7 +34,7 @@ } .card-subtitle, h5 { - .text-secondary; + @extend .text-secondary; margin-top: 0; margin-bottom: 0.5rem; diff --git a/src/components/_code.scss b/src/components/_code.scss new file mode 100644 index 0000000..5cddee5 --- /dev/null +++ b/src/components/_code.scss @@ -0,0 +1,39 @@ +@import 'colors'; + +code { + padding: 2px 4px; + font-size: 80%; + color: $secondary; + background-color: lighten($primary, 70%); + border-radius: 3px; +} +kbd { + padding: 2px 4px; + font-size: 80%; + color: $white; + background-color: $primary; + border-radius: 3px; +} +pre { + display: block; + padding: 1em; + font-size: 80%; + line-height: 1.5; + color: $primary; + word-break: break-all; + word-wrap: break-word; + background-color: lighten($primary, 73%); + border: 1px solid lighten($primary, 50%); + border-radius: 3px; + overflow-x: auto; + white-space: pre; + + code { + color: inherit; + background: transparent; + display: block; + font-size: inherit; + padding: initial; + white-space:pre; + } +} diff --git a/src/components/_colors.scss b/src/components/_colors.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/_colors.scss b/src/components/_config.scss similarity index 55% rename from src/_colors.scss rename to src/components/_config.scss index e47a8b2..3affa61 100644 --- a/src/_colors.scss +++ b/src/components/_config.scss @@ -1,3 +1,6 @@ +// Global PaperCSS Config + +// Set Colors $primary: #41403E; $secondary: #0071DE; @@ -25,18 +28,25 @@ $warning-text: $primary; $danger-text: $primary; $muted-text: $primary; -$colors: (primary, $primary, $primary-light), - (secondary, $secondary, $secondary-light), - (success, $success, $success-light), - (warning, $warning, $warning-light), - (danger, $danger, $danger-light), - (muted, $muted, $muted-light); +// Set class names to generate the css classes on build +$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); @each $colorName, $color, $color-light in $colors { .text-#{$colorName} { - color: #{$color}; + color: $color; } .background-#{$colorName} { - background-color: #{$color-light}; + background-color: $color-light; } } +COLORS +BORDERS +SHADOWS +BORDERS + +// Grid Breakpoints && Class Names diff --git a/src/components/_container.scss b/src/components/_container.scss new file mode 100644 index 0000000..0d45316 --- /dev/null +++ b/src/components/_container.scss @@ -0,0 +1,74 @@ +@import 'colors'; + +// Sizes +$large-screen: 1200px; +$medium-screen: 992px; +$small-screen: 768px; +$xsmall-screen: 480px; + +@mixin resp($max:null, $min:null) { + @if $max == large or $max == lg { $max: $large-screen; } + @if $max == medium or $max == md { $max: $medium-screen; } + @if $max == small or $max == sm { $max: $small-screen; } + @if $max == xsmall or $max == xs { $max: $xsmall-screen; } + @if ($min != null and $max != null) {@media only screen and (max-width: $max) and (min-width: $min) { @content; }} + @else if($max != null and $min == null){@media only screen and (max-width: $max) { @content; }} + @else if($min != null and $max == null){@media only screen and (min-width: $min) { @content; }} + @else { @error "no matching size found";} +} +@mixin hr-after() { + text-align: center; + color: lighten($primary, 30%); + display: block; + content: "~~~"; + position: relative; + font-size: 1.5rem; +} + +.container { + width: 100%; + max-width: 960px; + position: relative; + margin: 0 auto; + @include resp(medium) { + width: 85%; + } + @include resp(xsmall) { + width: 90%; + } +} +.section { + margin-top: 1rem; + margin-bottom: 2rem; + word-wrap: break-word; + + &:after { + @include hr-after; + } +} + +hr { + border: 0; + + &:after { + @include hr-after; + top: -.75rem; + } +} + +.paper { + border: 1px solid $primary-light; + background-color: $main-background; + padding: 2rem; + margin-top: 1rem; + margin-bottom: 1rem; + -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) { + padding: 1rem; + width: 100%; + margin-top: 0; + margin-bottom: 0; + } +} diff --git a/src/components/_flexbox.scss b/src/components/_flexbox.scss new file mode 100644 index 0000000..e59eb71 --- /dev/null +++ b/src/components/_flexbox.scss @@ -0,0 +1,129 @@ +@import 'container'; + +$columns: (0, col), + ($large-screen, lg), + ($medium-screen, md), + ($small-screen, sm), + ($xsmall-screen, xs); + +$numberOfColumns: 12; + +@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; + } + } + } + } +} + +@include make-column($columns); + +/* Unused mixin +@mixin center-all() { + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; + } */ + +@mixin col-size($percent) { + -webkit-box-flex: 0; + -webkit-flex: 0 0 $percent; + -ms-flex: 0 0 $percent; + flex: 0 0 $percent; + max-width: $percent; +} + +.row { + margin-right: auto; + margin-left: auto; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + margin-bottom: 1rem; + &.flex-right { + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + } + &.flex-center { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + } + &.flex-edges { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + } + &.flex-spaces { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; + } + &.flex-top { + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; + } + &.flex-middle { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + } + &.flex-bottom { + -webkit-box-align: end; + -webkit-align-items: flex-end; + -ms-flex-align: end; + align-items: flex-end; + } +} + +.col { + padding: 1rem; + @include resp(small) { + // Stack for mobile + @include col-size(100%); + } +} + +.col-fill { + width: auto; + flex: 1 1 0px; +} + +.align-top { + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; +} + +.align-middle { + -webkit-align-self: center; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; +} + +.align-bottom { + -webkit-align-self: flex-end; + -ms-flex-item-align: end; + align-self: flex-end; +} diff --git a/src/components/_fonts.scss b/src/components/_fonts.scss new file mode 100644 index 0000000..1d30988 --- /dev/null +++ b/src/components/_fonts.scss @@ -0,0 +1,48 @@ +@import 'colors'; + +@import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC'); + +$global-font-size: 20px; +$header-font: 'Patrick Hand SC'; +$body-font: 'Neucha'; +$font-color: $primary; + +html { + font-size: $global-font-size; + font-family: $body-font, sans-serif; + color: $font-color; +} +p, a, button, table, thead, tbody, th, tr, td, input, textarea, select, option { + font-family: $body-font, sans-serif; +} +h1, h2, h3, h4, h5, h6 { + font-family: $header-font, sans-serif; + font-weight: normal; +} +h1 { + font-size: 4rem; +} +h2 { + font-size: 3rem; +} +h3 { + font-size: 2rem; +} +h4 { + font-size: 1.5rem; +} +h5 { + font-size: 1rem; +} +h6 { + font-size: .8rem; +} +.text-left { + text-align: left; +} +.text-center { + text-align: center; +} +.text-right { + text-align: right; +} diff --git a/src/components/_forms.scss b/src/components/_forms.scss new file mode 100644 index 0000000..04c8629 --- /dev/null +++ b/src/components/_forms.scss @@ -0,0 +1,108 @@ +@import 'colors'; + +input, select, textarea { + display: block; + background:transparent; + color:$primary; + outline:none; + border-top-left-radius: 255px 15px; + border-top-right-radius: 15px 225px; + border-bottom-right-radius: 225px 15px; + border-bottom-left-radius:15px 255px; + font-size: 1rem; + padding: .5rem .5rem; + border: 2px solid $primary; + &:focus { + border: 2px solid $secondary; + } + &.disabled, &[disabled]{ + @extend .disabled; + } +} + +.disabled{ + cursor: not-allowed; + opacity: 0.5; +} + +.form-group { + margin-bottom: 1rem; + > label, legend { + display: inline-block; + margin-bottom: .5rem; + } + + .input-block { + width: 100%; + } + + textarea{ + max-width: 100%; + max-height: 90vh; + } + + textarea.no-resize{ + resize: none; + } + + // TODO: make these classes implicit. We can find out what class to apply based on its type + .paper-radio, .paper-check { + display: block; + margin-bottom: .5rem; + cursor: pointer; + + input { + border: 0; + height: 1px; margin: -1px; + overflow: hidden; + padding: 0; + 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; + } + + /* 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; + } + } +} + +fieldset.form-group { + border: none; + padding: 0; +} diff --git a/src/images.scss b/src/components/_images.scss similarity index 86% rename from src/images.scss rename to src/components/_images.scss index 3ffbf0e..3789662 100644 --- a/src/images.scss +++ b/src/components/_images.scss @@ -1,11 +1,10 @@ -@import './colors.less'; -@import './borders.less'; +@import 'borders'; img { max-width: 100%; height: auto; display: block; - .border; + @extend .border; &.float-left { float: left; margin: 1rem 1rem 1rem 0rem; diff --git a/src/components/_lists.scss b/src/components/_lists.scss new file mode 100644 index 0000000..1eee025 --- /dev/null +++ b/src/components/_lists.scss @@ -0,0 +1,48 @@ +ol { + list-style-type: decimal; + ol { + list-style-type: upper-alpha; + ol { + list-style-type: upper-roman; + ol { + list-style-type: lower-alpha; + ol { + list-style-type: lower-roman; + } + } + } + } +} +@mixin li-bullet($char) { + li:before { + content: $char; + } +} +ul { + list-style: none; + margin-left: 0; + li { + text-indent: -7px; + &:before { + position: relative; + left: -7px; + } + } + @include li-bullet("-"); + ul { + @include li-bullet("+"); + ul { + @include li-bullet("~"); + ul { + @include li-bullet("⤍"); + ul { + @include li-bullet("⁎"); + } + } + } + } + &.inline li{ + display: inline; + margin-left: 5px; + } +} diff --git a/src/modals.scss b/src/components/_modals.scss similarity index 81% rename from src/modals.scss rename to src/components/_modals.scss index 3df1a3b..a873a73 100644 --- a/src/modals.scss +++ b/src/components/_modals.scss @@ -1,15 +1,13 @@ -@import './colors.less'; -@import './container.less'; -@import './utilities.less'; +@import 'colors'; +@import 'container'; +@import 'utilities'; -@mixin translate($x; $y) -{ +@mixin translate($x, $y) { -webkit-transform: translate($x, $y); -ms-transform: translate($x, $y); transform: translate($x, $y); } -@mixin transition-transform($transition) -{ +@mixin transition-transform($transition) { -webkit-transition: -webkit-transform $transition; -moz-transition: -moz-transform $transition; -o-transition: -o-transform $transition; @@ -21,14 +19,13 @@ &:before{ content: ""; display: none; - background: rgba(0,0,0,.6); + background: rgba(black,.6); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; } &:target{ - &:before{ display: flex; } @@ -47,14 +44,14 @@ position: fixed; z-index: 11; max-width: 960px; - @media $medium-screen { + @include resp(medium) { max-width: 85%; } - @media $xsmall-screen { + @include resp(xsmall) { max-width: 90%; } @include translate(0, -500%); - @include transition-transform(#{"0.3s ease-out"}); + @include transition-transform(0.3s ease-out); } .btn-close{ @@ -62,12 +59,11 @@ font-size: 30px; text-decoration: none; position: absolute; right: 0; top: 0; - .margin; + @extend .margin; background: inherit; &:hover{ color: $muted; } - } .modal-title, h4 { @@ -76,8 +72,7 @@ } .modal-subtitle, h5 { - .text-secondary; - + @extend .text-secondary; margin-top: 0; margin-bottom: 0.5rem; } diff --git a/src/popovers.scss b/src/components/_popovers.scss similarity index 85% rename from src/popovers.scss rename to src/components/_popovers.scss index 53a0640..e117ad3 100644 --- a/src/popovers.scss +++ b/src/components/_popovers.scss @@ -1,5 +1,5 @@ -@import './colors.less'; -@import './borders.less'; +@import 'colors'; +@import 'borders'; // Core popovers [popover-top], @@ -11,14 +11,14 @@ // Popover hover trigger &:hover { - &::after { + &:after { transition: opacity .2s ease-out; opacity: 1; } } // Creating popover::after element - &::after { + &:after { position: absolute; top: -6px; left: 50%; @@ -31,20 +31,20 @@ background: $light-dark; transition: opacity .25s ease-out; transform: translateX(-50%) translateY(-100%); - .border; + @extend .border; } } // Popover positioning: left, right, top, bottom [popover-left] { - &::before { + &:before { left: 0; top: 50%; margin-left: -12px; - transform: translatey(-50%) rotate(-90deg); + transform: translateY(-50%) rotate(-90deg); } - &::after { + &:after { content: attr(popover-left); left: 0; top: 50%; @@ -54,14 +54,14 @@ } [popover-right] { - &::before { + &:before { left: 100%; top: 50%; margin-left: 1px; transform: translatey(-50%) rotate(90deg); } - &::after { + &:after { content: attr(popover-right); left: 100%; top: 50%; @@ -71,24 +71,24 @@ } [popover-top] { - &::before { + &:before { left: 50%; } - &::after { + &:after { content: attr(popover-top); left: 50%; } } [popover-bottom] { - &::before { + &:before { top:100%; margin-top: 8px; transform: translateX(-50%) translatey(-100%) rotate(-180deg); } - &::after { + &:after { content: attr(popover-bottom); top: 100%; margin-top: 8px; diff --git a/src/reset.scss b/src/components/_reset.scss similarity index 100% rename from src/reset.scss rename to src/components/_reset.scss diff --git a/src/components/_shadows.scss b/src/components/_shadows.scss new file mode 100644 index 0000000..797fdb7 --- /dev/null +++ b/src/components/_shadows.scss @@ -0,0 +1,39 @@ +$shadow-color-regular: hsla(0,0,0%,.2); +$shadow-color-hover: hsla(0,0,0%,.3); + +$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 { + -webkit-box-shadow: $shadow-regular; + -moz-box-shadow: $shadow-regular; + box-shadow: $shadow-regular; + transition: all .5s ease; + &.shadow-large { + -webkit-box-shadow: $shadow-large; + -moz-box-shadow: $shadow-large; + box-shadow: $shadow-large; + } + &.shadow-small { + -webkit-box-shadow: $shadow-small; + -moz-box-shadow: $shadow-small; + box-shadow: $shadow-small; + } + &.shadow-hover { + &:hover{ + -webkit-box-shadow: $shadow-hover; + -moz-box-shadow: $shadow-hover; + box-shadow: $shadow-hover; + transform: translate(0, 2px); + } + } +} +.child-shadows > * { + @extend .shadow; +} +.child-shadows-hover > * { + @extend .shadow; + @extend .shadow-hover; +} diff --git a/src/components/_tables.scss b/src/components/_tables.scss new file mode 100644 index 0000000..54dd482 --- /dev/null +++ b/src/components/_tables.scss @@ -0,0 +1,33 @@ +@import 'colors'; + +table { + box-sizing: border-box; + width: 100%; + max-width: 100%; + 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%; + } + tbody tr td { + 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 new file mode 100644 index 0000000..33ac1b5 --- /dev/null +++ b/src/components/_tabs.scss @@ -0,0 +1,36 @@ +@import 'colors'; + +.tabs { + .content { + display: none; + padding: 0.75rem 0 0; + } + + input { + display: none; + } + + label { + display: inline-block; + margin: 0 0 -1px; + padding: 0.75rem 0.75rem; + 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/components/_utilities.scss b/src/components/_utilities.scss new file mode 100644 index 0000000..c6db85b --- /dev/null +++ b/src/components/_utilities.scss @@ -0,0 +1,137 @@ +$base: 1rem; +$large: 2rem; +$small: .5rem; + +.margin { + margin: $base; + + &-top { + margin-top: $base; + &-large { + margin-top: $large; + } + &-small { + margin-top: $small; + } + &-none { + margin-top: 0; + } + } + + &-right { + margin-right: $base; + &-large { + margin-right: $large; + } + &-small { + margin-right: $small; + } + &-none { + margin-right: 0; + } + } + + &-bottom { + margin-bottom: $base; + &-large { + margin-bottom: $large; + } + &-small { + margin-bottom: $small; + } + &-none { + margin-bottom: 0; + } + } + + &-left { + margin-left: $base; + &-large { + margin-left: $large; + } + &-small { + margin-left: $small; + } + &-none { + margin-left: 0; + } + } + + &-large { + margin: $large; + } + &-small { + margin: $small; + } + &-none { + margin: 0; + } +} + +.padding { + padding: $base; + + &-top { + padding-top: $base; + &-large { + padding-top: $large; + } + &-small { + padding-top: $small; + } + &-none { + padding-top: 0; + } + } + + &-right { + padding-right: $base; + &-large { + padding-right: $large; + } + &-small { + padding-right: $small; + } + &-none { + padding-right: 0; + } + } + + &-bottom { + padding-bottom: $base; + &-large { + padding-bottom: $large; + } + &-small { + padding-bottom: $small; + } + &-none { + padding-bottom: 0; + } + } + + &-left { + padding-left: $base; + &-large { + padding-left: $large; + } + &-small { + padding-left: $small; + } + &-none { + padding-left: 0; + } + } + + &-large { + padding: $large; + } + + &-small { + padding: $small; + } + + &-none { + padding: 0; + } +} diff --git a/src/container.scss b/src/container.scss deleted file mode 100644 index 8b82c22..0000000 --- a/src/container.scss +++ /dev/null @@ -1,59 +0,0 @@ -@import './colors.less'; - -$large-screen: #{"screen and (max-width: 1200px)"}; -$medium-screen: #{"screen and (max-width: 992px)"}; -$small-screen: #{"screen and (max-width: 768px)"}; -$xsmall-screen: #{"screen and (max-width: 480px)"}; - -.container { - width: 100%; - max-width: 960px; - position: relative; - margin: 0 auto; - @media $medium-screen { - width: 85%; - } - @media $xsmall-screen { - width: 90%; - } -} -@mixin hr-after() -{ - text-align: center; - color: lighten($primary, 30%); - display: block; - content: "~~~"; - position: relative; - font-size: 1.5rem; -} -.section { - margin-top: 1rem; - margin-bottom: 2rem; - word-wrap: break-word; -} -.section:after { - .hr-after; -} -hr { - border: 0; -} -hr:after { - .hr-after; - top: -.75rem; -} -.paper { - border: 1px solid $primary-light; - background-color: $main-background; - padding: 2rem; - margin-top: 1rem; - margin-bottom: 1rem; - -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); - @media $xsmall-screen { - padding: 1rem; - width: 100%; - margin-top: 0; - margin-bottom: 0; - } -} diff --git a/src/flexbox.scss b/src/flexbox.scss deleted file mode 100644 index 50a16d5..0000000 --- a/src/flexbox.scss +++ /dev/null @@ -1,124 +0,0 @@ -$columnNames: col, sm, md, lg; -$columnSizes: 0px, 768px, 992px, 1200px; - -$numberOfColumns: 12; - -@mixin make-column-class($name, $size, $n, $p: 1) when ($p =< $n) -{ - $percent: ($p * 100% / $n); - .${name}-${p} { - @include col-size($percent); - } - - @include make-column-class($name, $size, $n, ($p + 1)); -} - -@mixin make-column-classes($n, $j: 1) when ($j =< length($columnNames)) -{ - $columnName: extract($columnNames, $j); - $columnSize: extract($columnSizes, $j); - @media (min-width: $columnSize) { - @include make-column-class($columnName, $columnSize, $n); - } - - @include make-column-classes($n, $j + 1); -} - -@mixin center-all() -{ - -webkit-align-items: center; - align-items: center; - -webkit-justify-content: center; - justify-content: center; -} -@mixin col-size($percent) -{ - -webkit-box-flex: 0; - -webkit-flex: 0 0 $percent; - -ms-flex: 0 0 $percent; - flex: 0 0 $percent; - max-width: $percent; -} -.row { - margin-right: auto; - margin-left: auto; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-flow: row wrap; - -ms-flex-flow: row wrap; - flex-flow: row wrap; - margin-bottom: 1rem; - &.flex-right { - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; - } - &.flex-center { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - } - &.flex-edges { - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - } - &.flex-spaces { - -webkit-justify-content: space-around; - -ms-flex-pack: distribute; - justify-content: space-around; - } - &.flex-top { - -webkit-box-align: start; - -webkit-align-items: flex-start; - -ms-flex-align: start; - align-items: flex-start; - } - &.flex-middle { - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - } - &.flex-bottom { - -webkit-box-align: end; - -webkit-align-items: flex-end; - -ms-flex-align: end; - align-items: flex-end; - } -} -.col { - padding: 1rem; - @media (max-width: 767px) { - // Stack for mobile - @include col-size(100%); - } -} -.col-fill { - width: auto; - flex: 1 1 0px; -} -@include make-column-classes($numberOfColumns); -.align-top { - -webkit-align-self: flex-start; - -ms-flex-item-align: start; - align-self: flex-start; -} -.align-middle { - -webkit-align-self: center; - -ms-flex-item-align: center; - -ms-grid-row-align: center; - align-self: center; -} -.align-bottom { - -webkit-align-self: flex-end; - -ms-flex-item-align: end; - align-self: flex-end; -} \ No newline at end of file diff --git a/src/fonts.scss b/src/fonts.scss deleted file mode 100644 index 1a61bb3..0000000 --- a/src/fonts.scss +++ /dev/null @@ -1,48 +0,0 @@ -@import './colors.less'; - -@import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC'); - -$global-font-size: 20px; -$header-font: 'Patrick Hand SC'; -$body-font: 'Neucha'; -$font-color: $primary; - -html { - font-size: $global-font-size; - font-family: $body-font, sans-serif; - color: $font-color; -} -p, a, button, table, thead, tbody, th, tr, td, input, textarea, select, option { - font-family: $body-font, sans-serif; -} -h1, h2, h3, h4, h5, h6 { - font-family: $header-font, sans-serif; - font-weight: normal; -} -h1 { - font-size: 4rem; -} -h2 { - font-size: 3rem; -} -h3 { - font-size: 2rem; -} -h4 { - font-size: 1.5rem; -} -h5 { - font-size: 1rem; -} -h6 { - font-size: .8rem; -} -.text-left { - text-align: left; -} -.text-center { - text-align: center; -} -.text-right { - text-align: right; -} diff --git a/src/forms.scss b/src/forms.scss deleted file mode 100644 index e9df9f0..0000000 --- a/src/forms.scss +++ /dev/null @@ -1,105 +0,0 @@ -@import './colors.less'; - -input, select, textarea { - display: block; - background:transparent; - color:$primary; - outline:none; - border-top-left-radius: 255px 15px; - border-top-right-radius: 15px 225px; - border-bottom-right-radius: 225px 15px; - border-bottom-left-radius:15px 255px; - font-size: 1rem; - padding: .5rem .5rem; - border: 2px solid $primary; - &:focus { - border: 2px solid $secondary; - } - &.disabled, &[disabled]{ - .disabled; - } -} - -.disabled{ - cursor: not-allowed; - opacity: 0.5; -} - -.form-group { - margin-bottom: 1rem; - > label, legend { - display: inline-block; - margin-bottom: .5rem; - } - .input-block { - width: 100%; - } - - textarea{ - max-width: 100%; - max-height: 90vh; - } - - textarea.no-resize{ - resize: none; - } - - // TODO: make these classes implicit. We can find out what class to apply based on its type - .paper-radio, .paper-check { - display: block; - margin-bottom: .5rem; - cursor: pointer; - input { - border: 0; - height: 1px; margin: -1px; - overflow: hidden; - padding: 0; - 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; - } - - /* 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; - } - } -} - -fieldset.form-group { - border: none; - padding: 0; -} diff --git a/src/lists.scss b/src/lists.scss deleted file mode 100644 index 5978aef..0000000 --- a/src/lists.scss +++ /dev/null @@ -1,49 +0,0 @@ -ol { - list-style-type: decimal; - ol { - list-style-type: upper-alpha; - ol { - list-style-type: upper-roman; - ol { - list-style-type: lower-alpha; - ol { - list-style-type: lower-roman; - } - } - } - } -} -@mixin li-bullet($char) -{ - li:before { - content: $char; - } -} -ul { - list-style: none; - margin-left: 0; - li { - text-indent: -7px; - } - li:before { - position: relative; - left: -7px; - } - @include li-bullet("-"); - ul { - @include li-bullet("+"); - ul { - @include li-bullet("~"); - ul { - @include li-bullet("⤍"); - ul { - .li-bullet("⁎") - } - } - } - } - &.inline li{ - display: inline; - margin-left: 5px; - } -} \ No newline at end of file diff --git a/src/shadows.scss b/src/shadows.scss deleted file mode 100644 index 3573780..0000000 --- a/src/shadows.scss +++ /dev/null @@ -1,39 +0,0 @@ -$shadow-color-regular: hsla(0,0%,0%,.2); -$shadow-color-hover: hsla(0,0%,0%,.3); - -$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 { - -webkit-box-shadow: $shadow-regular; - -moz-box-shadow: $shadow-regular; - box-shadow: $shadow-regular; - transition: all .5s ease; - &.shadow-large { - -webkit-box-shadow: $shadow-large; - -moz-box-shadow: $shadow-large; - box-shadow: $shadow-large; - } - &.shadow-small { - -webkit-box-shadow: $shadow-small; - -moz-box-shadow: $shadow-small; - box-shadow: $shadow-small; - } - &.shadow-hover { - &:hover{ - -webkit-box-shadow: $shadow-hover; - -moz-box-shadow: $shadow-hover; - box-shadow: $shadow-hover; - transform: translate(0, 2px); - } - } -} -.child-shadows > * { - .shadow; -} -.child-shadows-hover > * { - .shadow; - .shadow-hover; -} \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 0d6bf1d..1386e35 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,28 +1,31 @@ +@charset 'UTF-8'; + @media screen { - @import 'reset'; - @import 'boxreset'; - @import 'colors'; - @import 'fonts'; - @import 'borders'; - @import 'shadows'; - @import 'flexbox'; - @import 'container'; - @import 'buttons'; - @import 'forms'; - @import 'lists'; - @import 'code'; - @import 'tables'; - @import 'images'; - @import 'utilities'; - @import 'popovers'; - @import 'cards'; - @import 'badges'; - @import 'alerts'; - @import 'tabs'; - @import 'article'; - @import 'modals'; + @import 'components/reset'; + @import 'components/boxreset'; + @import 'components/colors'; + @import 'components/fonts'; + @import 'components/borders'; + @import 'components/shadows'; + @import 'components/flexbox'; + @import 'components/container'; + @import 'components/buttons'; + @import 'components/forms'; + @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 'print'; +// @import 'components/print'; // } diff --git a/src/tables.scss b/src/tables.scss deleted file mode 100644 index 7767827..0000000 --- a/src/tables.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import './colors.less'; - -table { - box-sizing: border-box; - width: 100%; - max-width: 100%; - 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%); - } - @media screen and (max-width:480px) { - thead tr th { - padding: 2%; - } - tbody tr td { - 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/tabs.scss b/src/tabs.scss deleted file mode 100644 index 4146f5a..0000000 --- a/src/tabs.scss +++ /dev/null @@ -1,41 +0,0 @@ -@import './colors.less'; - -.tabs { - .content { - display: none; - padding: 0.75rem 0 0; - } - - input { - display: none; - } - - label { - display: inline-block; - margin: 0 0 -1px; - padding: 0.75rem 0.75rem; - font-weight: 600; - text-align: center; - color: $primary-light; - } - - label:hover { - color: $muted; - cursor: pointer; - } - - input:checked+label { - color: $primary; - border-bottom: solid 3px $secondary; - } - - @mixin loop($num) when ($num > 0) -{ - @include loop(($num - 1)); - input[id = #{"tab${num}"]:checked~div[id = ~"content${num}"}]{ - display:block; - } - } - - @include loop(5); -} diff --git a/src/utilities.scss b/src/utilities.scss deleted file mode 100644 index ca6ea0d..0000000 --- a/src/utilities.scss +++ /dev/null @@ -1,124 +0,0 @@ -$base: 1rem; -$large: 2rem; -$small: .5rem; - -.margin { - margin: $base; - &-top { - margin-top: $base; - &-large { - margin-top: $large; - } - &-small { - margin-top: $small; - } - &-none { - margin-top: 0; - } - } - &-right { - margin-right: $base; - &-large { - margin-right: $large; - } - &-small { - margin-right: $small; - } - &-none { - margin-right: 0; - } - } - &-bottom { - margin-bottom: $base; - &-large { - margin-bottom: $large; - } - &-small { - margin-bottom: $small; - } - &-none { - margin-bottom: 0; - } - } - &-left { - margin-left: $base; - &-large { - margin-left: $large; - } - &-small { - margin-left: $small; - } - &-none { - margin-left: 0; - } - } - &-large { - margin: $large; - } - &-small { - margin: $small; - } - &-none { - margin: 0; - } -} -.padding { - padding: $base; - &-top { - padding-top: $base; - &-large { - padding-top: $large; - } - &-small { - padding-top: $small; - } - &-none { - padding-top: 0; - } - } - &-right { - padding-right: $base; - &-large { - padding-right: $large; - } - &-small { - padding-right: $small; - } - &-none { - padding-right: 0; - } - } - &-bottom { - padding-bottom: $base; - &-large { - padding-bottom: $large; - } - &-small { - padding-bottom: $small; - } - &-none { - padding-bottom: 0; - } - } - &-left { - padding-left: $base; - &-large { - padding-left: $large; - } - &-small { - padding-left: $small; - } - &-none { - padding-left: 0; - } - } - &-large { - padding: $large; - } - &-small { - padding: $small; - } - &-none { - padding: 0; - } -} \ No newline at end of file