diff --git a/public/styles/objects/_button.scss b/public/styles/objects/_button.scss index 104efe9..ab077eb 100644 --- a/public/styles/objects/_button.scss +++ b/public/styles/objects/_button.scss @@ -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 diff --git a/public/styles/settings/colors.scss b/public/styles/settings/colors.scss index 97906f0..081ca59 100644 --- a/public/styles/settings/colors.scss +++ b/public/styles/settings/colors.scss @@ -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;