About to start work on buttons

This commit is contained in:
2018-05-15 08:10:54 +10:00
parent fbceaaddb0
commit d8b1c41538
10 changed files with 83 additions and 17 deletions

View File

@ -5,13 +5,13 @@
* Dependencies:
* styles/settings/animation.scss
* styles/settings/colors.scss
* styles/tools/_gradient.scss
* styles/tools/_box-shadow.scss
*
*
* Version:
* 1.0.1 - 2018/05/14
*/
$o-btn--padding: 1.5em;//Base Padding size.
$o-btn--padding: 1em;//Base Padding size.
//Default Button (applies to all styles)
.o-btn {
@ -28,18 +28,20 @@ $o-btn--padding: 1.5em;//Base Padding size.
left: 0;
width: 100%;
height: 50%;
border: $s-color--btn-default__border;
border: $s-color--input-default__border;
border-radius: $o-btn--padding / 3;
background: $s-color--btn-default__bottom;
@include t-box-shadow(0,-($o-btn--padding/16),$o-btn--padding / 8,0,rgba(0, 0, 0, 0.1),true);
}
&__inner {
@include t-box-shadow(0,$o-btn--padding/8,$o-btn--padding/8,0,rgba(255,255,255, 0.4),true);
position: relative;
background: $s-color--btn-default__top;
display: block;
padding: ( $o-btn--padding / 2 ) $o-btn--padding;
border-radius: $o-btn--padding / 3;
border: $s-color--btn-default__border;
border: $s-color--input-default__border;
transition: all 0.1s $s-animation--ease-out;
}
@ -55,6 +57,13 @@ $o-btn--padding: 1.5em;//Base Padding size.
}
}
//Button Group
.o-btn-group {
.o-btn + .o-btn {
margin-left: 1em;
}
}
/*** Custom Button Styles ***/
@mixin o-basic-button-design($top, $bottom) {
&::before,
@ -90,3 +99,11 @@ $o-btn--padding: 1.5em;//Base Padding size.
$s-color--btn-danger__bottom
);
}
//Warning
.o-btn--style-warning {
@include o-basic-button-design(
$s-color--btn-warning__top,
$s-color--btn-warning__bottom
);
}

View File

@ -10,4 +10,9 @@
*/
.o-form { }
.o-form__group { }
.o-form__group {
+ .o-btn-group,
+ .o-form__group {
margin-top: 1em;
}
}

View File

@ -8,15 +8,20 @@
* Version:
* 1.0.0 - 2018/05/13
*/
$o-input--padding: 1em;
.o-input {
display: block;
width: 100%;
padding: 0.25em;
padding: $o-input--padding / 2;
margin: 0;//For some reason textareas have a 1px margin
border: $s-color--input-default__border;
border-radius: $o-input--padding / 3;
}
.o-label {
display: block;
display: none;
visibility: hidden;
}