• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1@mixin button() {
2  display: inline-block;
3  font-weight: map-get($button, font-weight);
4  line-height: 1 !important;
5  text-decoration: none !important;
6  cursor: pointer;
7  outline: none;
8  @include user-select(none);
9  svg {
10    width: 1rem;
11    height: 1rem;
12  }
13  @include disabled() {
14    cursor: not-allowed;
15  }
16}
17
18.button {
19  @include button();
20}
21
22.button--primary {
23  @include clickable($text-color-1, $main-color-1);
24}
25
26.button--secondary {
27  @include clickable($text-color-3, $main-color-3);
28}
29
30.button--success {
31  @include clickable($text-color-function, $green);
32}
33
34.button--info {
35  @include clickable($text-color-function, $blue);
36}
37
38.button--warning {
39  @include clickable($text-color-function, $yellow);
40}
41
42.button--error {
43  @include clickable($text-color-function, $red);
44}
45
46.button--theme-light {
47  @include clickable($text-color-theme-dark, $main-color-theme-light);
48}
49
50.button--theme-dark {
51  @include clickable($text-color-theme-light, $main-color-theme-dark);
52}
53
54.button--outline-primary {
55  color: $main-color-1;
56  border: 1px solid $main-color-1;
57  @include clickable($main-color-1, transparent, $text-color-1, $main-color-1);
58}
59
60.button--outline-secondary {
61  color: $main-color-3;
62  border: 1px solid $main-color-3;
63  @include clickable($main-color-3, transparent, $text-color-3, $main-color-3);
64}
65
66.button--outline-success {
67  color: $green;
68  border: 1px solid $green;
69  @include clickable($green, transparent, $text-color-function, $green);
70}
71
72.button--outline-info {
73  color: $blue;
74  border: 1px solid $blue;
75  @include clickable($blue, transparent, $text-color-function, $blue);
76}
77
78.button--outline-warning {
79  color: $yellow;
80  border: 1px solid $yellow;
81  @include clickable($yellow, transparent, $text-color-function, $yellow);
82}
83
84.button--outline-error {
85  color: $red;
86  border: 1px solid $red;
87  @include clickable($red, transparent, $text-color-function, $red);
88}
89
90.button--outline-theme-light {
91  color: $main-color-theme-light;
92  border: 1px solid $main-color-theme-light;
93  @include clickable($text-color-theme-dark, $main-color-theme-light);
94}
95
96.button--outline-theme-dark {
97  color: $main-color-theme-dark;
98  border: 1px solid $main-color-theme-dark;
99  @include clickable($text-color-theme-light, $main-color-theme-dark);
100}
101
102.button--pill {
103  border-radius: map-get($button, pill-radius);
104  @extend .button--md;
105}
106
107.button--rounded {
108  border-radius: map-get($base, border-radius);
109  @extend .button--md;
110}
111
112.button--circle {
113  @include inline-flex();
114  @include justify-content(center);
115  @include align-items(center);
116  border-radius: 50%;
117  @extend .button--md;
118}
119
120.button--md {
121  padding: map-get($button, padding-y) map-get($button, padding-x);
122  font-size: map-get($base, font-size);
123  &.button--circle {
124    width: map-get($button, circle-diameter);
125    height: map-get($button, circle-diameter);
126  }
127}
128
129.button--xs {
130  padding: map-get($button, padding-y-xs) map-get($button, padding-x-xs);
131  font-size: map-get($base, font-size-xs);
132  &.button--circle {
133    width: map-get($button, circle-diameter-xs);
134    height: map-get($button, circle-diameter-xs);
135  }
136}
137
138.button--sm {
139  padding: map-get($button, padding-y-sm) map-get($button, padding-x-sm);
140  font-size: map-get($base, font-size-sm);
141  &.button--circle {
142    width: map-get($button, circle-diameter-sm);
143    height: map-get($button, circle-diameter-sm);
144  }
145}
146
147.button--lg {
148  padding: map-get($button, padding-y-lg) map-get($button, padding-x-lg);
149  font-size: map-get($base, font-size-lg);
150  &.button--circle {
151    width: map-get($button, circle-diameter-lg);
152    height: map-get($button, circle-diameter-lg);
153  }
154}
155
156.button--xl {
157  padding: map-get($button, padding-y-xl) map-get($button, padding-x-xl);
158  font-size: map-get($base, font-size-xl);
159  &.button--circle {
160    width: map-get($button, circle-diameter-xl);
161    height: map-get($button, circle-diameter-xl);
162  }
163}