Mercurial > nebulaweb3

comparison default/assets/scss/components/_buttons.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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 }