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: * Version:
* 1.0.1 - 2018/05/14 * 1.0.1 - 2018/05/14
*/ */
$o-btn--padding: 1.5em;//Base Padding size.
//Default Button (applies to all styles) //Default Button (applies to all styles)
.o-btn { .o-btn {
@ -28,7 +29,7 @@
width: 100%; width: 100%;
height: 50%; height: 50%;
border: $s-color--btn-default__border; border: $s-color--btn-default__border;
border-radius: 0.5em; border-radius: $o-btn--padding / 3;
background: $s-color--btn-default__bottom; background: $s-color--btn-default__bottom;
} }
@ -36,21 +37,21 @@
position: relative; position: relative;
background: white; background: white;
display: block; display: block;
padding: 0.75em 1.5em; padding: ( $o-btn--padding / 2 ) $o-btn--padding;
border-radius: 0.5em; border-radius: $o-btn--padding / 3;
border: $s-color--btn-default__border; border: $s-color--btn-default__border;
transition: all 0.1s $s-animation--ease-out; transition: all 0.1s $s-animation--ease-out;
} }
&:hover { &:hover {
.o-btn__inner { .o-btn__inner {
@include t-translate-y(0.1em); @include t-translate-y($o-btn--padding / 10);
} }
} }
&:active { &:active {
.o-btn__inner { .o-btn__inner {
@include t-translate-y(0.4em); @include t-translate-y($o-btn--padding / 4);
background: $s-color--btn-default-hover__top; background: $s-color--btn-default-hover__top;
} }
} }
@ -58,7 +59,9 @@
&:focus { &:focus {
&::before, &::before,
.o-btn__inner { .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 ***/ /*** Buttons and Inputs ***/
//Button Default //Button Default
$s-color--btn-default__top: #FFF; $s-color--btn-default__top: #E0E0E0;
$s-color--btn-default__bottom: #FBFBFB; $s-color--btn-default__bottom: #DADADA;
$s-color--btn-default__border: 1px solid #DDD; $s-color--btn-default__border: 1px solid #AAA;
$s-color--btn-default__focus: $s-color--swatch-blue; $s-color--btn-default__focus: $s-color--swatch-blue;
$s-color--btn-default-hover__top: $s-color--btn-default__bottom; $s-color--btn-default-hover__top: $s-color--btn-default__bottom;