secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Delicious buttons

Browse Source
This commit is contained in:
James Barnsley
2017-06-19 07:38:23 +12:00
parent 6cd9e4deed
commit b52b8e18d2
14 changed files with 112 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/scss/global/_forms.scss
View File

@ -45,90 +45,75 @@ input[type="button"],
input[type="submit"] {
@include animate();
display: inline-block;
padding: 6px 20px;
min-width: 160px;
border: 0;
padding: 9px 20px 7px;
margin: 0 20px 10px 0;
text-align: center;
border: 2px solid $mid_grey;
color: $mid_grey;
background: transparent;
text-transform: uppercase;
font-size: 12px;
font-weight: 800;
color: $white;
background: $dark_grey;
font-size: 14px;
font-weight: 700;
box-sizing: border-box;
font-family: "Overpass";
border-radius: 3px;
vertical-align: middle;
position: relative;
border: 0 !important;
&.wide {
min-width: 200px;
&:before {
@include animate();
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 9;
background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: -moz-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: -o-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
background: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
}
&:hover{
cursor: pointer;
border-color: darken( $mid_grey, 10%);
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
&:before {
opacity: 0.15;
}
}
&:active {
@include noanimate();
background: $mid_grey;
color: #FFFFFF;
border-color: $mid_grey;
background: $black;
color: $white;
margin-top: 1px;
margin-bottom: 9px;
}
&.primary {
border-color: $turquoise;
color: $turquoise;
&:hover {
color: darken( $turquoise, 10% );
border-color: darken( $turquoise, 10% );
}
background: $turquoise;
color: $white;
&:active {
color: #FFFFFF;
background: $turquoise;
border-color: $turquoise;
}
}
&.secondary {
color: $black;
border-color: $black;
&:hover {
color: lighten( $black, 40% );
border-color: lighten( $black, 40% );
}
&:active {
color: $white;
background: $black;
border-color: $black;
}
}
&.alternative {
color: $blue;
border-color: $blue;
&:hover {
color: darken($blue, 10%);
border-color: darken($blue, 10%);
}
&:active {
color: $white;
background: $blue;
border-color: $blue;
}
&.white {
color: $black;
background: $white;
}
&.confirming,
&.destructive {
border-color: $red;
color: $red;
&:hover {
color: darken( $red, 6% );
border-color: darken( $red, 6% );
}
&:active {
color: #FFFFFF;
background: $red;
border-color: $red;
}
background: $red;
color: $white;
}
&.alternative {
background: $blue;
color: $white;
}
&.timing-out {
@ -145,20 +130,6 @@ input[type="submit"] {
}
}
&.white {
color: #FFFFFF;
border-color: #FFFFFF;
&:hover {
color: rgba(255,255,255,0.8);
border-color: rgba(255,255,255,0.8);
}
&:active {
color: #000000;
background: #FFFFFF;
border-color: #FFFFFF;
}
}
&.discrete {
border: transparent;
@ -172,16 +143,17 @@ input[type="submit"] {
position: relative;
&:after {
pointer-events: none;
position: absolute;
display: block;
content: '';
background: $mid_grey;
opacity: 1;
animation: slideloader 1s infinite;
right: 0;
bottom: 0;
background: $white;
opacity: 0.5;
top: 0;
left: 0;
height: 3px;
bottom: 0;
right: 0;
z-index: 1;
}