Mercurial > minori

comparison dep/fmt/doc/bootstrap/buttons.less @ 343:1faa72660932

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
*: transfer back to cmake from autotools autotools just made lots of things more complicated than they should have and many things broke (i.e. translations)
author Paper <paper@paper.us.eu.org>
date Thu, 20 Jun 2024 05:56:06 -0400
parents
children
comparison
equal deleted inserted replaced
342:adb79bdde329 343:1faa72660932
1 //
2 // Buttons
3 // --------------------------------------------------
4
5
6 // Base styles
7 // --------------------------------------------------
8
9 .btn {
10 display: inline-block;
11 margin-bottom: 0; // For input.btn
12 font-weight: @btn-font-weight;
13 text-align: center;
14 vertical-align: middle;
15 touch-action: manipulation;
16 cursor: pointer;
17 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
18 border: 1px solid transparent;
19 white-space: nowrap;
20 .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
21 .user-select(none);
22
23 &,
24 &:active,
25 &.active {
26 &:focus,
27 &.focus {
28 .tab-focus();
29 }
30 }
31
32 &:hover,
33 &:focus,
34 &.focus {
35 color: @btn-default-color;
36 text-decoration: none;
37 }
38
39 &:active,
40 &.active {
41 outline: 0;
42 background-image: none;
43 .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
44 }
45
46 &.disabled,
47 &[disabled],
48 fieldset[disabled] & {
49 cursor: @cursor-disabled;
50 pointer-events: none; // Future-proof disabling of clicks
51 .opacity(.65);
52 .box-shadow(none);
53 }
54 }
55
56
57 // Alternate buttons
58 // --------------------------------------------------
59
60 .btn-default {
61 .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
62 }
63 .btn-primary {
64 .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
65 }
66 // Success appears as green
67 .btn-success {
68 .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
69 }
70 // Info appears as blue-green
71 .btn-info {
72 .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
73 }
74 // Warning appears as orange
75 .btn-warning {
76 .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
77 }
78 // Danger and error appear as red
79 .btn-danger {
80 .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
81 }
82
83
84 // Link buttons
85 // -------------------------
86
87 // Make a button look and behave like a link
88 .btn-link {
89 color: @link-color;
90 font-weight: normal;
91 border-radius: 0;
92
93 &,
94 &:active,
95 &.active,
96 &[disabled],
97 fieldset[disabled] & {
98 background-color: transparent;
99 .box-shadow(none);
100 }
101 &,
102 &:hover,
103 &:focus,
104 &:active {
105 border-color: transparent;
106 }
107 &:hover,
108 &:focus {
109 color: @link-hover-color;
110 text-decoration: @link-hover-decoration;
111 background-color: transparent;
112 }
113 &[disabled],
114 fieldset[disabled] & {
115 &:hover,
116 &:focus {
117 color: @btn-link-disabled-color;
118 text-decoration: none;
119 }
120 }
121 }
122
123
124 // Button Sizes
125 // --------------------------------------------------
126
127 .btn-lg {
128 // line-height: ensure even-numbered height of button next to large input
129 .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
130 }
131 .btn-sm {
132 // line-height: ensure proper height of button next to small input
133 .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
134 }
135 .btn-xs {
136 .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
137 }
138
139
140 // Block button
141 // --------------------------------------------------
142
143 .btn-block {
144 display: block;
145 width: 100%;
146 }
147
148 // Vertically space out multiple block buttons
149 .btn-block + .btn-block {
150 margin-top: 5px;
151 }
152
153 // Specificity overrides
154 input[type="submit"],
155 input[type="reset"],
156 input[type="button"] {
157 &.btn-block {
158 width: 100%;
159 }
160 }