_button.scss
1.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
button {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
background: none;
border: none;
font-size: 1.4rem;
height: 56px;
min-width:175px;
padding: 0 4rem;
border-radius: 4px;
text-transform: uppercase;
color: white;
font-family: TheMixSemiBold;
&:focus{
outline:none;
transition:.3s ease;
}
&.is__error {
background: $red;
@include rem('margin', 30, 0, 0, 0);
&:hover{
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}
}
&.btn__gray {
background: $gray;
}
&.btn__outline{
box-shadow:none;
border:2px solid $darkGray;
color: $darkGray;
}
&.btn__red{
background: $red;
width: 90vw;
&:hover{
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}
}
&:hover {
cursor: pointer;
transition:.3s ease;
}
&.btn__grayLighter {
background: $grayLighter;
}
}
.btn__outline {
@include bp-large {
position: absolute;
right: 4.8rem;
top: 50%;
transform: translateY(-20px);
}
}
.btn__red{
background: $red !important;
&:hover{
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}
}