deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-05-22 23:52:16 +02:00
Code Issues Projects Releases Wiki Activity

moved shadow() mixin into config

Browse source
This commit is contained in:
koester 2017-12-19 18:03:47 +01:00
parent e43261ea9f
commit 4f793519ff
3 changed files with 37 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/_buttons.scss
View file

@ -8,38 +8,45 @@ button,
display: inline;
outline: none;
border: solid 2px $primary;
@include border;
@include border();
font-size: 1rem;
padding: .75rem .75rem;
cursor: pointer;
@include shadow;
@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;

29
src/components/_config.scss
View file

@ -1,5 +1,4 @@
// Global PaperCSS Config
// Imports
@import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC');
@ -31,6 +30,10 @@ $warning-text: $primary;
$danger-text: $primary;
$muted-text: $primary;
$shadow-color-regular: hsla(0,0,0%,.2);
$shadow-color-hover: hsla(0,0,0%,.3);
// Set class names to generate the css classes on build
$colors: (primary, $primary, $primary-light, $primary-text),
(secondary, $secondary, $secondary-light, $secondary-text),
@ -60,6 +63,12 @@ $medium-screen: 992px;
$small-screen: 768px;
$xsmall-screen: 480px;
// Sizes for shadows
$shadow-small: 10px 19px 17px -13px $shadow-color-regular;
$shadow-regular: 15px 28px 25px -18px $shadow-color-regular;
$shadow-large: 20px 38px 34px -26px $shadow-color-regular;
$shadow-hover: 2px 8px 8px -5px $shadow-color-hover;
// Mixins
@mixin resp($max:null, $min:null) {
@ -129,3 +138,21 @@ $xsmall-screen: 480px;
-ms-transform: translate($x, $y);
transform: translate($x, $y);
}
@mixin shadow($type: regular) {
@if $type == hover {
box-shadow: $shadow-hover;
@include 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"
}
}

26
src/components/_shadows.scss
View file

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