mirror of
https://github.com/papercss/papercss
synced 2024-06-20 06:35:37 +02:00
moved shadow() mixin into config
This commit is contained in:
parent
e43261ea9f
commit
4f793519ff
|
@ -8,38 +8,45 @@ button,
|
||||||
display: inline;
|
display: inline;
|
||||||
outline: none;
|
outline: none;
|
||||||
border: solid 2px $primary;
|
border: solid 2px $primary;
|
||||||
@include border;
|
@include border();
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
padding: .75rem .75rem;
|
padding: .75rem .75rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@include shadow;
|
@include shadow();
|
||||||
|
|
||||||
&.btn-large {
|
&.btn-large {
|
||||||
@include shadow(large);
|
@include shadow(large);
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
padding: 1rem 1rem;
|
padding: 1rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn-small {
|
&.btn-small {
|
||||||
@include shadow(small);
|
@include shadow(small);
|
||||||
font-size: .75rem;
|
font-size: .75rem;
|
||||||
padding: .5rem;
|
padding: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn-block {
|
&.btn-block {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@include shadow(hover);
|
@include shadow(hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border: 2px solid $secondary;
|
border: 2px solid $secondary;
|
||||||
-webkit-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
|
-webkit-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
|
||||||
-moz-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);
|
box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
border-color: hsla(0, 0%, 0%, .2);
|
border-color: hsla(0, 0%, 0%, .2);
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled,
|
&.disabled,
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
@extend .disabled;
|
@extend .disabled;
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
// Global PaperCSS Config
|
// Global PaperCSS Config
|
||||||
|
|
||||||
// Imports
|
// Imports
|
||||||
@import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC');
|
@import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC');
|
||||||
|
|
||||||
|
@ -31,6 +30,10 @@ $warning-text: $primary;
|
||||||
$danger-text: $primary;
|
$danger-text: $primary;
|
||||||
$muted-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
|
// Set class names to generate the css classes on build
|
||||||
$colors: (primary, $primary, $primary-light, $primary-text),
|
$colors: (primary, $primary, $primary-light, $primary-text),
|
||||||
(secondary, $secondary, $secondary-light, $secondary-text),
|
(secondary, $secondary, $secondary-light, $secondary-text),
|
||||||
|
@ -60,6 +63,12 @@ $medium-screen: 992px;
|
||||||
$small-screen: 768px;
|
$small-screen: 768px;
|
||||||
$xsmall-screen: 480px;
|
$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
|
// Mixins
|
||||||
@mixin resp($max:null, $min:null) {
|
@mixin resp($max:null, $min:null) {
|
||||||
|
@ -129,3 +138,21 @@ $xsmall-screen: 480px;
|
||||||
-ms-transform: translate($x, $y);
|
-ms-transform: translate($x, $y);
|
||||||
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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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 > * {
|
.child-shadows > * {
|
||||||
box-shadow: $shadow-regular;
|
box-shadow: $shadow-regular;
|
||||||
transition: all .5s ease;
|
transition: all .5s ease;
|
||||||
|
|
Loading…
Reference in a new issue