|
0
|
1 // main: ../style.scss
|
|
|
2 /********************************
|
|
|
3 *********************************
|
|
|
4 BUTTONS
|
|
|
5 *********************************
|
|
|
6 *********************************/
|
|
|
7 .btn {
|
|
|
8 display: inline-flex;
|
|
|
9 font-size: $btn-font-size;
|
|
|
10 font-family: $btn-font-family;
|
|
|
11 cursor: pointer;
|
|
|
12 border-width: 2px;
|
|
|
13 align-items: center;
|
|
|
14
|
|
|
15 .btn-list & {
|
|
|
16 margin-bottom: rem(10);
|
|
|
17 margin-right: rem(10);
|
|
|
18 }
|
|
|
19
|
|
|
20 &.border-thick { border-width: 2px }
|
|
|
21 &.border-thicker { border-width: 3px }
|
|
|
22 &.text-uppercase { letter-spacing: 0.1em }
|
|
|
23
|
|
|
24 .list-icon {
|
|
|
25 font-size: rem(18);
|
|
|
26 vertical-align: middle;
|
|
|
27 position: relative;
|
|
|
28 top: rem(-1);
|
|
|
29 font-weight: 400;
|
|
|
30 }
|
|
|
31
|
|
|
32 .social-icons {
|
|
|
33 font-size: rem(25);
|
|
|
34 }
|
|
|
35
|
|
|
36 &.btn-lg {
|
|
|
37 .list-icon { font-size: rem(24) }
|
|
|
38 .social-icons { font-size: rem(40) }
|
|
|
39 }
|
|
|
40
|
|
|
41 .caret {
|
|
|
42 margin-left: rem(5);
|
|
|
43 }
|
|
|
44
|
|
|
45 &.disabled,
|
|
|
46 &:disabled {
|
|
|
47 cursor: not-allowed;
|
|
|
48 }
|
|
|
49
|
|
|
50 &[class*="bg"][class*="contrast"]:hover {
|
|
|
51 color: #fff;
|
|
|
52 }
|
|
|
53 }
|
|
|
54
|
|
|
55 .btn-lg {
|
|
|
56 min-height: em(56);
|
|
|
57 display: inline-flex;
|
|
|
58 justify-content: center;
|
|
|
59 align-items: center;
|
|
|
60 @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $input-btn-font-size-lg, $input-btn-line-height-lg, $btn-border-radius-lg);
|
|
|
61 &:not(.btn-circle) { min-width: rem(140) }
|
|
|
62 }
|
|
|
63
|
|
|
64 .btn-sm {
|
|
|
65 @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $input-btn-font-size-sm, $input-btn-line-height-sm, $btn-border-radius-sm);
|
|
|
66 }
|
|
|
67
|
|
|
68 .btn-xs {
|
|
|
69 @include button-size( 0, rem(5), $input-btn-font-size-sm, $input-btn-line-height-sm, $btn-border-radius-sm);
|
|
|
70 }
|
|
|
71
|
|
|
72 .btn-rounded { border-radius: rem(100) }
|
|
|
73
|
|
|
74 .btn-circle {
|
|
|
75 border-radius: 100%;
|
|
|
76 @include size( rem(50) );
|
|
|
77 display: inline-flex;
|
|
|
78 justify-content: center;
|
|
|
79 align-items: center;
|
|
|
80 padding: 0 !important;
|
|
|
81 &.btn-lg { @include size( rem(70) ) }
|
|
|
82 &.btn-sm { @include size( rem(30) ) }
|
|
|
83 }
|
|
|
84
|
|
|
85 .btn-block {
|
|
|
86 display: block;
|
|
|
87 width: 100%;
|
|
|
88 }
|
|
|
89
|
|
|
90
|
|
|
91 /* Button Colors
|
|
|
92 ========================*/
|
|
|
93 .btn:active {
|
|
|
94 box-shadow: inset 0 2px 2px 2px rgba(0,0,0,0.02);
|
|
|
95 }
|
|
|
96
|
|
|
97 @include buttons-variant(default, #555, #e4e7ea, #e4e7ea);
|
|
|
98
|
|
|
99 .btn:focus {
|
|
|
100 // box-shadow: inset 0 0 -4px 2px rgba(0,0,0,0.1);
|
|
|
101 outline: 0;
|
|
|
102 box-shadow: none !important;
|
|
|
103 }
|
|
|
104
|
|
|
105 .btn-outline-default { color: #555 }
|
|
|
106 .btn-primary.disabled:focus,
|
|
|
107 .btn-primary[disabled]:focus,
|
|
|
108 .btn-primary.disabled:hover,
|
|
|
109 .btn-primary[disabled]:hover {
|
|
|
110 background: $primary;
|
|
|
111 border-color: $primary;
|
|
|
112 }
|
|
|
113
|
|
|
114 // Alternative Button Variants
|
|
|
115 @each $col, $val in $theme-colors {
|
|
|
116 .btn-#{$col} {
|
|
|
117 @include theme-button-variant($val,$val,#fff);
|
|
|
118 }
|
|
|
119 }
|
|
|
120 @each $col, $val in $colors {
|
|
|
121 .btn-#{$col} {
|
|
|
122 @include theme-button-variant($val,$val,#fff);
|
|
|
123 }
|
|
|
124 }
|
|
|
125
|
|
|
126 @each $col, $val in $colors {
|
|
|
127 .btn-outline-#{$col} {
|
|
|
128 @include button-outline-variant($val);
|
|
|
129 }
|
|
|
130 }
|
|
|
131
|
|
|
132 .btn-outline-white:hover {
|
|
|
133 color: $color-scheme;
|
|
|
134 }
|
|
|
135
|
|
|
136
|
|
|
137 .btn-outline-inverse {
|
|
|
138 color: #fff;
|
|
|
139 border: 2px solid #fff;
|
|
|
140 background: transparent;
|
|
|
141 &:hover {
|
|
|
142 color: $color-scheme !important;
|
|
|
143 background-color: #fff;
|
|
|
144 }
|
|
|
145 }
|
|
|
146
|
|
|
147 /* Justified button groups
|
|
|
148 ========================*/
|
|
|
149
|
|
|
150 .btn-group-justified {
|
|
|
151 display: flex;
|
|
|
152 .btn,
|
|
|
153 .btn-group {
|
|
|
154 flex: 1;
|
|
|
155 .btn { width: 100% }
|
|
|
156 .dropdown-menu { left: auto }
|
|
|
157 }
|
|
|
158 }
|
