scss components

gulpfile.js

@@ -30,12 +30,12 @@ gulp.task('minify-css', () => {
     .pipe(gulp.dest('dist'));
 });
 
-gulp.task('components', () => {
+//gulp.task('components', () => {
-  gulp.src('src/*.scss')
+//  gulp.src('src/*.scss')
-    .pipe(sass.sync().on('error', sass.logError))
+//    .pipe(sass.sync().on('error', sass.logError))
-    .pipe(cleanCSS({format: 'beautify'}))
+//    .pipe(cleanCSS({format: 'beautify'}))
-    .pipe(gulp.dest('dist/components'));
+//    .pipe(gulp.dest('dist/components'));
-});
+//});
 
 gulp.task('default', ['sass', 'webserver', 'watch']);
-gulp.task('build', ['components', 'sass', 'minify-css']);
+gulp.task('build', ['sass', 'minify-css']);

src/components/_alerts.scss

@@ -1,8 +1,5 @@
-@import 'colors';
-@import 'borders';
-
 .alert {
-    @extend .border;
+    @include border;
     padding: 15px;
     margin-bottom: 20px;
     width: 100%;

src/components/_article.scss

@@ -1,5 +1,3 @@
-@import 'colors';
-
 article {
 	.article-title {
 		font-size: 3rem;

src/components/_badges.scss

@@ -1,8 +1,5 @@
-@import 'colors';
-@import 'borders';
-
 .badge {
-  @extend .border;
+  @include border;
   display: inline-block;
   padding: .25em .4em;
   font-size: 75%;

src/components/_borders.scss

@@ -1,58 +1,80 @@
-@import 'colors';
+@mixin border($style: 1, $color: $primary) {
+  border: 2px solid $color;
 
-.border {
+  @if $style == 1 {
-    border: 2px solid $primary;
+    .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-1, .child-borders > *:nth-child(6n+1) {
+
-    border-top-left-radius: 255px 15px;
+.child-borders>* {
-    border-top-right-radius: 15px 225px;
+  border: 2px solid $primary;
-    border-bottom-right-radius: 225px 15px;
-    border-bottom-left-radius: 15px 255px;
-}
-.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;
-}
-.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;
-}
-.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;
-}
-.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;
-}
-.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;
-}
-.child-borders > * {
-    border: 2px solid $primary;
 }
+
 .border-white {
-    border-color: $white;
+  border-color: $white;
 }
+
 .border-dotted {
-    border-style: dotted;
+  border-style: dotted;
 }
+
 .border-dashed {
-    border-style: dashed;
+  border-style: dashed;
 }
+
 .border-thick {
-    border-width: 5px;
+  border-width: 5px;
 }
 
 @each $colorName, $color in $colors {

src/components/_buttons.scss

@@ -1,71 +1,64 @@
-@import 'colors';
+button,
-@import 'shadows';
+.paper-btn,
-@import 'borders';
+[type="button"] {
-@import 'forms'; // .disabled
+  align-self: center;
-
+  background: transparent;
-button, .paper-btn, [type="button"] {
+  transition: all .5s ease, background-color .1s ease;
-    @extend .shadow;
+  color: $primary;
-    align-self:center;
+  display: inline;
-    background:transparent;
+  outline: none;
-    transition:all .5s ease, background-color .1s ease;
+  border: solid 2px $primary;
-    color: $primary;
+  @include border;
-    display: inline;
+  font-size: 1rem;
-    outline:none;
+  padding: .75rem .75rem;
-    border:solid 2px $primary;
+  cursor: pointer;
-    @extend .border;
+  @include shadow;
-    font-size: 1rem;
+  &.btn-large {
-    padding: .75rem .75rem;
+    @include shadow(large);
-    cursor: pointer;
+    font-size: 2rem;
-    @extend .shadow;
+    padding: 1rem 1rem;
-    @extend .shadow-hover;
+  }
-    &.btn-large {
+  &.btn-small {
-        @extend .shadow-large;
+    @include shadow(small);
-        font-size:2rem;
+    font-size: .75rem;
-        padding:1rem 1rem;
+    padding: .5rem;
-    }
+  }
-    &.btn-small {
+  &.btn-block {
-        @extend .shadow-small;
+    display: block;
-        font-size: .75rem;
+    width: 100%;
-        padding: .5rem;
+  }
-    }
+  &:hover {
-    &.btn-block {
+    @include shadow(hover);
-        display: block;
+  }
-        width: 100%;
+  &:focus {
-    }
+    border: 2px solid $secondary;
-    &:hover {
+    -webkit-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
-        @extend .shadow-hover;
+    -moz-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
-    }
+    box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
-    &:focus{
+  }
-        border: 2px solid $secondary;
+  &:active {
-        -webkit-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
+    border-color: hsla(0, 0%, 0%, .2);
-        -moz-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
+    transition: none;
-        box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
+  }
-    }
+  &.disabled,
-    &:active {
+  &[disabled] {
-      border-color: hsla(0,0%,0%,.2);
+    @extend .disabled;
-      transition: none;
+  }
-    }
-    &.disabled, &[disabled] {
-        @extend .disabled;
-    }
 }
 
 a {
+  text-decoration: none;
+  background-image: linear-gradient(5deg, transparent 65%, $secondary 80%, transparent 90%), linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%), linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%), linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%);
+  background-repeat: repeat-x;
+  background-size: 4px 3px;
+  background-position: 0 90%;
+  &:visited {
     text-decoration: none;
-    background-image:
+    color: $primary;
-        linear-gradient(5deg, transparent 65%, $secondary 80%, transparent 90%),
+  }
-        linear-gradient(165deg, transparent 5%, $secondary 15%, transparent 25%),
-        linear-gradient(165deg, transparent 45%, $secondary 55%, transparent 65%),
-        linear-gradient(15deg, transparent 25%, $secondary 35%, transparent 50%);
-    background-repeat:repeat-x;
-    background-size: 4px 3px;
-    background-position:0 90%;
-    &:visited {
-        text-decoration: none;
-        color: $primary;
-    }
 }
 
+
 @each $colorName, $color, $color-light, $color-text in $colors {
   .alert-#{$colorName} {
     color: $color;
@@ -76,8 +69,10 @@ a {
     border-color: $color;
     background-color: $color-light;
     color: $color-text;
-    &:hover:active {
+    &:hover{
-      background-color: darken($color-light, 10%);
+      &:active {
+        background-color: darken($color-light, 10%);
+      }
     }
   }
 }

src/components/_cards.scss

@@ -1,15 +1,15 @@
-@import 'colors';
-@import 'shadows';
-
 .card {
-  @extend .shadow;
+  @include shadow;
-  @extend .shadow-hover;
   position: relative;
   display: flex;
   flex-direction: column;
   word-wrap: break-word;
   border: 2px solid $muted-light;
 
+  &:hover {
+    @include shadow(hover);
+  }
+
   .card-header,
   .card-footer {
     padding: .75rem 1.25rem;

src/components/_code.scss

@@ -1,5 +1,3 @@
-@import 'colors';
-
 code {
   padding: 2px 4px;
   font-size: 80%;

src/components/_config.scss

@@ -1,5 +1,8 @@
 // Global PaperCSS Config
 
+// Imports
+@import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC');
+
 // Set Colors
 $primary: #41403E;
 $secondary: #0071DE;
@@ -44,9 +47,85 @@ $colors: (primary, $primary, $primary-light, $primary-text),
     background-color: $color-light;
   }
 }
-COLORS
-BORDERS
-SHADOWS
-BORDERS
 
-// Grid Breakpoints && Class Names
+// Set Fonts
+$global-font-size: 20px;
+$header-font: 'Patrick Hand SC';
+$body-font: 'Neucha';
+$font-color: $primary;
+
+// Sizes for responsive breakpoints
+$large-screen: 1200px;
+$medium-screen: 992px;
+$small-screen: 768px;
+$xsmall-screen: 480px;
+
+
+// Mixins
+@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;
+}
+
+@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;
+}
+
+@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;
+  }
+}
+
+@mixin transition-transform($transition) {
+  -webkit-transition: -webkit-transform $transition;
+  -moz-transition: -moz-transform $transition;
+  -o-transition: -o-transform $transition;
+  transition: transform $transition;
+}
+
+@mixin translate($x, $y) {
+  -webkit-transform: translate($x, $y);
+  -ms-transform: translate($x, $y);
+  transform: translate($x, $y);
+}

src/components/_container.scss

@@ -1,30 +1,3 @@
-@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;

src/components/_flexbox.scss

@@ -1,5 +1,3 @@
-@import 'container';
-
 $columns: (0, col),
           ($large-screen, lg),
           ($medium-screen, md),
@@ -8,38 +6,8 @@ $columns: (0, col),
 
 $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;

src/components/_fonts.scss

@@ -1,12 +1,3 @@
-@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;

src/components/_forms.scss

@@ -1,5 +1,3 @@
-@import 'colors';
-
 input, select, textarea {
   display: block;
   background:transparent;

src/components/_images.scss

@@ -1,10 +1,8 @@
-@import 'borders';
-
 img {
     max-width: 100%;
     height: auto;
     display: block;
-    @extend .border;
+    @include border;
     &.float-left {
         float: left;
         margin: 1rem 1rem 1rem 0rem;

src/components/_lists.scss

@@ -13,11 +13,7 @@ ol {
     }
   }
 }
-@mixin li-bullet($char) {
+
-  li:before {
-    content: $char;
-  }
-}
 ul {
   list-style: none;
   margin-left: 0;
@@ -36,13 +32,13 @@ ul {
       ul {
         @include li-bullet("⤍");
         ul {
-         @include li-bullet("⁎");
+          @include li-bullet("⁎");
         }
       }
     }
   }
-  &.inline li{
+  &.inline li {
-      display: inline;
+    display: inline;
     margin-left: 5px;
   }
 }

src/components/_modals.scss

@@ -1,19 +1,3 @@
-@import 'colors';
-@import 'container';
-@import 'utilities';
-
-@mixin translate($x, $y) {
-  -webkit-transform: translate($x, $y);
-  -ms-transform: translate($x, $y);
-  transform: translate($x, $y);
-}
-@mixin transition-transform($transition) {
-  -webkit-transition: -webkit-transform $transition;
-  -moz-transition: -moz-transform $transition;
-  -o-transition: -o-transform $transition;
-  transition: transform $transition;
-}
-
 .modal{
 
   &:before{

src/components/_popovers.scss

@@ -1,6 +1,3 @@
-@import 'colors';
-@import 'borders';
-
 // Core popovers
 [popover-top],
 [popover-right],
@@ -31,7 +28,7 @@
     background: $light-dark;
     transition: opacity .25s ease-out;
     transform: translateX(-50%) translateY(-100%);
-    @extend .border;
+    @include border;
   }
 }
 

src/components/_shadows.scss

@@ -6,34 +6,32 @@ $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 {
+@mixin shadow($type: regular) {
-  -webkit-box-shadow: $shadow-regular;
+  @if $type == hover {
-  -moz-box-shadow: $shadow-regular;
+    box-shadow: $shadow-hover;
+    transform: translate(0, 2px);
+  } @else if $type == small {
+    transition: all .5s ease;
+    box-shadow: $shadow-small;
+  } @else if $type == regular {
+    transition: all .5s ease;
+    box-shadow: $shadow-regular;
+  } @else if $type == large {
+    transition: all .5s ease;
+    box-shadow: $shadow-large;
+  } @else {
+    @error "@mixin shadow(input) does not exist"
+  }
+}
+
+.child-shadows > * {
   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;
+  &:hover {
-  @extend .shadow-hover;
+    box-shadow: $shadow-hover;
+    transform: translate(0, 2px);
+  }
 }

src/components/_tables.scss

@@ -1,5 +1,3 @@
-@import 'colors';
-
 table {
   box-sizing: border-box;
   width: 100%;

src/components/_tabs.scss

@@ -1,5 +1,3 @@
-@import 'colors';
-
 .tabs {
   .content {
     display: none;

src/styles.scss

@@ -1,16 +1,19 @@
 @charset 'UTF-8';
 
 @media screen {
+  // Settings && Mixins
+  @import 'components/config';
+
+  // Individual Components
   @import 'components/reset';
   @import 'components/boxreset';
-  @import 'components/colors';
-  @import 'components/fonts';
   @import 'components/borders';
+  @import 'components/fonts';
   @import 'components/shadows';
-  @import 'components/flexbox';
-  @import 'components/container';
-  @import 'components/buttons';
   @import 'components/forms';
+  @import 'components/container';
+  @import 'components/flexbox';
+  @import 'components/buttons';
   @import 'components/lists';
   @import 'components/code';
   @import 'components/tables';