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