_button.scss
2.06 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
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;
transition:.3s ease;
.loader_spinner{
border-top: 2px solid rgba(171, 172, 172, 1);
border-right: 2px solid #FF463C;
border-bottom: 2px solid #FF463C;
border-left: 2px solid #FF463C;
width: 15px !important;
height: 15px !important;
}
.loader_spinner:after {
border-radius: 50%;
width: 15px !important;
height: 15px !important;
}
&:focus{
outline:none;
}
&.is__error {
background: $red;
@include rem('margin', 30, 0, 0, 0);
&:hover,
&:focus{
outline:none;
transform: translateX(3px);
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;
background:none;
}
&.btn__red{
background: $red;
min-width:222px;
&:hover,
&:focus{
transform: translateX(3px);
outline:none;
box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}
}
&:hover {
cursor: pointer;
transform:translateX(3px);
}
&.btn__grayLighter {
background: $grayLighter;
}
}
.btn__border{
box-shadow:none;
border:2px solid $darkGray !important;
color: $darkGray !important;
background:none !important;
}
.btn__outline {
@include bp-large {
position: absolute;
right: 4.8rem;
top: 50%;
transform: translateY(-20px);
}
}
.btn__red{
background: $red !important;
&:hover,
&:focus{
transform: translateX(3px);
outline:none;
box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}
}
.btn_solution{
width: 248px !important;
}
.btn_go{
&:hover,
&:focus{
transform: translateX(3px);
outline:none;
box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}
}