corrade-nucleus-nucleons – Blame information for rev 20

Subversion Repositories:
Rev:
Rev Author Line No. Line
20 office 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 cursor: pointer;
16 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
17 border: 1px solid transparent;
18 white-space: nowrap;
19 .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
20 .user-select(none);
21  
22 &,
23 &:active,
24 &.active {
25 &:focus {
26 .tab-focus();
27 }
28 }
29  
30 &:hover,
31 &:focus {
32 color: @btn-default-color;
33 text-decoration: none;
34 }
35  
36 &:active,
37 &.active {
38 outline: 0;
39 background-image: none;
40 .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
41 }
42  
43 &.disabled,
44 &[disabled],
45 fieldset[disabled] & {
46 cursor: not-allowed;
47 pointer-events: none; // Future-proof disabling of clicks
48 .opacity(.65);
49 .box-shadow(none);
50 }
51 }
52  
53  
54 // Alternate buttons
55 // --------------------------------------------------
56  
57 .btn-default {
58 .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
59 }
60 .btn-primary {
61 .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
62 }
63 // Success appears as green
64 .btn-success {
65 .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
66 }
67 // Info appears as blue-green
68 .btn-info {
69 .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
70 }
71 // Warning appears as orange
72 .btn-warning {
73 .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
74 }
75 // Danger and error appear as red
76 .btn-danger {
77 .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
78 }
79  
80  
81 // Link buttons
82 // -------------------------
83  
84 // Make a button look and behave like a link
85 .btn-link {
86 color: @link-color;
87 font-weight: normal;
88 cursor: pointer;
89 border-radius: 0;
90  
91 &,
92 &:active,
93 &[disabled],
94 fieldset[disabled] & {
95 background-color: transparent;
96 .box-shadow(none);
97 }
98 &,
99 &:hover,
100 &:focus,
101 &:active {
102 border-color: transparent;
103 }
104 &:hover,
105 &:focus {
106 color: @link-hover-color;
107 text-decoration: underline;
108 background-color: transparent;
109 }
110 &[disabled],
111 fieldset[disabled] & {
112 &:hover,
113 &:focus {
114 color: @btn-link-disabled-color;
115 text-decoration: none;
116 }
117 }
118 }
119  
120  
121 // Button Sizes
122 // --------------------------------------------------
123  
124 .btn-lg {
125 // line-height: ensure even-numbered height of button next to large input
126 .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
127 }
128 .btn-sm {
129 // line-height: ensure proper height of button next to small input
130 .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
131 }
132 .btn-xs {
133 .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
134 }
135  
136  
137 // Block button
138 // --------------------------------------------------
139  
140 .btn-block {
141 display: block;
142 width: 100%;
143 padding-left: 0;
144 padding-right: 0;
145 }
146  
147 // Vertically space out multiple block buttons
148 .btn-block + .btn-block {
149 margin-top: 5px;
150 }
151  
152 // Specificity overrides
153 input[type="submit"],
154 input[type="reset"],
155 input[type="button"] {
156 &.btn-block {
157 width: 100%;
158 }
159 }