mirror of
https://github.com/papercss/papercss
synced 2024-05-23 08:02:19 +02:00
scss components
This commit is contained in:
koester
parent
621db8f23c
commit
e43261ea9f
14
gulpfile.js
14
gulpfile.js
|
|
@ -30,12 +30,12 @@ gulp.task('minify-css', () => {
|
|||
.pipe(gulp.dest('dist'));
|
||||
});
|
||||
|
||||
gulp.task('components', () => {
|
||||
gulp.src('src/*.scss')
|
||||
.pipe(sass.sync().on('error', sass.logError))
|
||||
.pipe(cleanCSS({format: 'beautify'}))
|
||||
.pipe(gulp.dest('dist/components'));
|
||||
});
|
||||
//gulp.task('components', () => {
|
||||
// gulp.src('src/*.scss')
|
||||
// .pipe(sass.sync().on('error', sass.logError))
|
||||
// .pipe(cleanCSS({format: 'beautify'}))
|
||||
// .pipe(gulp.dest('dist/components'));
|
||||
//});
|
||||
|
||||
gulp.task('default', ['sass', 'webserver', 'watch']);
|
||||
gulp.task('build', ['components', 'sass', 'minify-css']);
|
||||
gulp.task('build', ['sass', 'minify-css']);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
@import 'colors';
|
||||
@import 'borders';
|
||||
|
||||
.alert {
|
||||
@extend .border;
|
||||
@include border;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import 'colors';
|
||||
|
||||
article {
|
||||
.article-title {
|
||||
font-size: 3rem;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
@import 'colors';
|
||||
@import 'borders';
|
||||
|
||||
.badge {
|
||||
@extend .border;
|
||||
@include border;
|
||||
display: inline-block;
|
||||
padding: .25em .4em;
|
||||
font-size: 75%;
|
||||
|
|
|
|||
|
|
@ -1,58 +1,80 @@
|
|||
@import 'colors';
|
||||
@mixin border($style: 1, $color: $primary) {
|
||||
border: 2px solid $color;
|
||||
|
||||
.border {
|
||||
border: 2px solid $primary;
|
||||
@if $style == 1 {
|
||||
.border-#{$style},
|
||||
.child-borders>*:nth-child(6n+1) {
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
border-bottom-right-radius: 225px 15px;
|
||||
border-bottom-left-radius: 15px 255px;
|
||||
}
|
||||
}
|
||||
@if $style == 2 {
|
||||
.border-2,
|
||||
.child-borders>*:nth-child(6n+2) {
|
||||
border-top-left-radius: 125px 25px;
|
||||
border-top-right-radius: 10px 205px;
|
||||
border-bottom-right-radius: 20px 205px;
|
||||
border-bottom-left-radius: 185px 25px;
|
||||
}
|
||||
}
|
||||
@if $style == 3 {
|
||||
.border-3,
|
||||
.child-borders>*:nth-child(6n+3) {
|
||||
border-top-left-radius: 15px 225px;
|
||||
border-top-right-radius: 255px 15px;
|
||||
border-bottom-left-radius: 225px 15px;
|
||||
border-bottom-right-radius: 15px 255px;
|
||||
}
|
||||
}
|
||||
@if $style == 4 {
|
||||
.border-4,
|
||||
.child-borders>*:nth-child(6n+4) {
|
||||
border-top-left-radius: 15px 225px;
|
||||
border-top-right-radius: 25px 150px;
|
||||
border-bottom-left-radius: 25px 115px;
|
||||
border-bottom-right-radius: 155px 25px;
|
||||
}
|
||||
}
|
||||
@if $style == 5 {
|
||||
.border-5,
|
||||
.child-borders>*:nth-child(6n+5) {
|
||||
border-top-left-radius: 250px 15px;
|
||||
border-top-right-radius: 25px 80px;
|
||||
border-bottom-left-radius: 20px 115px;
|
||||
border-bottom-right-radius: 15px 105px;
|
||||
}
|
||||
}
|
||||
@if $style == 6 {
|
||||
.border-6,
|
||||
.child-borders>*:nth-child(6n+6) {
|
||||
border-top-left-radius: 28px 125px;
|
||||
border-top-right-radius: 100px 30px;
|
||||
border-bottom-right-radius: 20px 205px;
|
||||
border-bottom-left-radius: 15px 225px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.border, .border-1, .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;
|
||||
}
|
||||
.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;
|
||||
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -1,71 +1,64 @@
|
|||
@import 'colors';
|
||||
@import 'shadows';
|
||||
@import 'borders';
|
||||
@import 'forms'; // .disabled
|
||||
|
||||
button, .paper-btn, [type="button"] {
|
||||
@extend .shadow;
|
||||
align-self:center;
|
||||
background:transparent;
|
||||
transition:all .5s ease, background-color .1s ease;
|
||||
color: $primary;
|
||||
display: inline;
|
||||
outline:none;
|
||||
border:solid 2px $primary;
|
||||
@extend .border;
|
||||
font-size: 1rem;
|
||||
padding: .75rem .75rem;
|
||||
cursor: pointer;
|
||||
@extend .shadow;
|
||||
@extend .shadow-hover;
|
||||
&.btn-large {
|
||||
@extend .shadow-large;
|
||||
font-size:2rem;
|
||||
padding:1rem 1rem;
|
||||
}
|
||||
&.btn-small {
|
||||
@extend .shadow-small;
|
||||
font-size: .75rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
&.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
&:hover {
|
||||
@extend .shadow-hover;
|
||||
}
|
||||
&:focus{
|
||||
border: 2px solid $secondary;
|
||||
-webkit-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
|
||||
-moz-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
|
||||
box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
|
||||
}
|
||||
&:active {
|
||||
border-color: hsla(0,0%,0%,.2);
|
||||
transition: none;
|
||||
}
|
||||
&.disabled, &[disabled] {
|
||||
@extend .disabled;
|
||||
}
|
||||
button,
|
||||
.paper-btn,
|
||||
[type="button"] {
|
||||
align-self: center;
|
||||
background: transparent;
|
||||
transition: all .5s ease, background-color .1s ease;
|
||||
color: $primary;
|
||||
display: inline;
|
||||
outline: none;
|
||||
border: solid 2px $primary;
|
||||
@include border;
|
||||
font-size: 1rem;
|
||||
padding: .75rem .75rem;
|
||||
cursor: pointer;
|
||||
@include shadow;
|
||||
&.btn-large {
|
||||
@include shadow(large);
|
||||
font-size: 2rem;
|
||||
padding: 1rem 1rem;
|
||||
}
|
||||
&.btn-small {
|
||||
@include shadow(small);
|
||||
font-size: .75rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
&.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
&:hover {
|
||||
@include shadow(hover);
|
||||
}
|
||||
&:focus {
|
||||
border: 2px solid $secondary;
|
||||
-webkit-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
|
||||
-moz-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
|
||||
box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
|
||||
}
|
||||
&:active {
|
||||
border-color: hsla(0, 0%, 0%, .2);
|
||||
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:
|
||||
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;
|
||||
}
|
||||
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 {
|
||||
background-color: darken($color-light, 10%);
|
||||
&:hover{
|
||||
&:active {
|
||||
background-color: darken($color-light, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
@import 'colors';
|
||||
@import 'shadows';
|
||||
|
||||
.card {
|
||||
@extend .shadow;
|
||||
@extend .shadow-hover;
|
||||
@include shadow;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import 'colors';
|
||||
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
font-size: 80%;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import 'colors';
|
||||
|
||||
input, select, textarea {
|
||||
display: block;
|
||||
background:transparent;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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{
|
||||
display: inline;
|
||||
&.inline li {
|
||||
display: inline;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
-webkit-box-shadow: $shadow-regular;
|
||||
-moz-box-shadow: $shadow-regular;
|
||||
@mixin shadow($type: regular) {
|
||||
@if $type == hover {
|
||||
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;
|
||||
@extend .shadow-hover;
|
||||
&:hover {
|
||||
box-shadow: $shadow-hover;
|
||||
transform: translate(0, 2px);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import 'colors';
|
||||
|
||||
table {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import 'colors';
|
||||
|
||||
.tabs {
|
||||
.content {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in a new issue