YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Designed button

Browse Source
This commit is contained in:
Dominic Masters
2018-05-14 17:32:34 +10:00
parent 83a1ae89e6
commit 20cbecef42
2 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/styles/objects/_button.scss
View File

@ -11,6 +11,7 @@
* Version:
* 1.0.1 - 2018/05/14
*/
$o-btn--padding: 1.5em;//Base Padding size.
//Default Button (applies to all styles)
.o-btn {
@ -28,7 +29,7 @@
width: 100%;
height: 50%;
border: $s-color--btn-default__border;
border-radius: 0.5em;
border-radius: $o-btn--padding / 3;
background: $s-color--btn-default__bottom;
}
@ -36,21 +37,21 @@
position: relative;
background: white;
display: block;
padding: 0.75em 1.5em;
border-radius: 0.5em;
padding: ( $o-btn--padding / 2 ) $o-btn--padding;
border-radius: $o-btn--padding / 3;
border: $s-color--btn-default__border;
transition: all 0.1s $s-animation--ease-out;
}
&:hover {
.o-btn__inner {
@include t-translate-y(0.1em);
@include t-translate-y($o-btn--padding / 10);
}
}
&:active {
.o-btn__inner {
@include t-translate-y(0.4em);
@include t-translate-y($o-btn--padding / 4);
background: $s-color--btn-default-hover__top;
}
}
@ -58,7 +59,9 @@
&:focus {
&::before,
.o-btn__inner {
border-color: $s-color--btn-default__focus;
//border-color: $s-color--btn-default__focus;
}
}
}
//Custom Button Styles

6
public/styles/settings/colors.scss
View File

@ -45,9 +45,9 @@ $s-color--loader: $s-color--swatch-blue;
/*** Buttons and Inputs ***/
//Button Default
$s-color--btn-default__top: #FFF;
$s-color--btn-default__bottom: #FBFBFB;
$s-color--btn-default__border: 1px solid #DDD;
$s-color--btn-default__top: #E0E0E0;
$s-color--btn-default__bottom: #DADADA;
$s-color--btn-default__border: 1px solid #AAA;
$s-color--btn-default__focus: $s-color--swatch-blue;
$s-color--btn-default-hover__top: $s-color--btn-default__bottom;