mirror of
https://github.com/papercss/papercss
synced 2024-06-19 22:25:10 +02:00
116 lines
2.6 KiB
SCSS
116 lines
2.6 KiB
SCSS
button,
|
|
.paper-btn,
|
|
[type='button'] {
|
|
@include border-style();
|
|
@include shadow();
|
|
@include transition();
|
|
@include color('color', 'primary');
|
|
@include color('border-color', 'primary');
|
|
@include color('background-color', 'main-background');
|
|
align-self: center;
|
|
background-image: none;
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
font-size: 1rem;
|
|
outline: none;
|
|
padding: 0.75rem;
|
|
|
|
@include resp(520px) {
|
|
display: inline-block;
|
|
margin: 0 auto;
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
&.btn-large {
|
|
@include shadow(large);
|
|
font-size: 2rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
&.btn-small {
|
|
@include shadow(small);
|
|
font-size: 0.75rem;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
&.btn-block {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
&:hover {
|
|
@include shadow(hover);
|
|
}
|
|
|
|
&:focus {
|
|
@include color('border-color', 'secondary');
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
|
|
}
|
|
|
|
&:active {
|
|
border-color: hsla(0, 0%, 0%, 0.2);
|
|
transition: none;
|
|
}
|
|
|
|
&.disabled,
|
|
&[disabled] {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
a {
|
|
@include color('color', 'secondary');
|
|
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-position: 0 90%;
|
|
background-repeat: repeat-x;
|
|
background-size: 4px 3px;
|
|
text-decoration: none;
|
|
|
|
&:visited {
|
|
@include color('color', 'primary');
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
@each $colorName, $color, $color-light, $color-text in $colors {
|
|
button.btn-#{$colorName},
|
|
.paper-btn.btn-#{$colorName},
|
|
[type='button'].btn-#{$colorName} {
|
|
@include color('color', #{$colorName}-text);
|
|
@include color('background-color', #{$colorName}-light);
|
|
@include color('border-color', #{$colorName});
|
|
|
|
&:hover {
|
|
&:active {
|
|
background-color: darken($color-light, 10%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $colorName, $color, $color-light, $color-text in $colors {
|
|
button.btn-#{$colorName}-outline,
|
|
.paper-btn.btn-#{$colorName}-outline,
|
|
[type='button'].btn-#{$colorName}-outline {
|
|
@include color('background-color', main-background);
|
|
@include color('color', #{$colorName});
|
|
@include color('border-color', #{$colorName});
|
|
|
|
&:hover {
|
|
background-color: $color-light;
|
|
}
|
|
|
|
&:hover {
|
|
&:active {
|
|
background-color: darken($color-light, 10%);
|
|
}
|
|
}
|
|
}
|
|
}
|