1 | /*!
|
---|
2 | * AngularJS Material Design
|
---|
3 | * https://github.com/angular/material
|
---|
4 | * @license MIT
|
---|
5 | * v1.2.3
|
---|
6 | */
|
---|
7 | button.md-button::-moz-focus-inner {
|
---|
8 | border: 0; }
|
---|
9 |
|
---|
10 | .md-button {
|
---|
11 | display: inline-block;
|
---|
12 | position: relative;
|
---|
13 | cursor: pointer;
|
---|
14 | /** Alignment adjustments */
|
---|
15 | min-height: 36px;
|
---|
16 | min-width: 88px;
|
---|
17 | line-height: 36px;
|
---|
18 | vertical-align: middle;
|
---|
19 | align-items: center;
|
---|
20 | text-align: center;
|
---|
21 | border-radius: 2px;
|
---|
22 | box-sizing: border-box;
|
---|
23 | /* Reset default button appearance */
|
---|
24 | -webkit-user-select: none;
|
---|
25 | -moz-user-select: none;
|
---|
26 | -ms-user-select: none;
|
---|
27 | user-select: none;
|
---|
28 | outline: none;
|
---|
29 | border: 0;
|
---|
30 | /** Custom styling for button */
|
---|
31 | padding: 0 8px;
|
---|
32 | margin: 6px 8px;
|
---|
33 | background: transparent;
|
---|
34 | color: currentColor;
|
---|
35 | white-space: nowrap;
|
---|
36 | /* Uppercase text content */
|
---|
37 | text-transform: uppercase;
|
---|
38 | font-weight: 500;
|
---|
39 | font-size: 14px;
|
---|
40 | font-style: inherit;
|
---|
41 | font-variant: inherit;
|
---|
42 | font-family: inherit;
|
---|
43 | text-decoration: none;
|
---|
44 | overflow: hidden;
|
---|
45 | transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
|
---|
46 | .md-dense > .md-button:not(.md-dense-disabled),
|
---|
47 | .md-dense :not(.md-dense-disabled) .md-button:not(.md-dense-disabled) {
|
---|
48 | min-height: 32px; }
|
---|
49 | .md-dense > .md-button:not(.md-dense-disabled),
|
---|
50 | .md-dense :not(.md-dense-disabled) .md-button:not(.md-dense-disabled) {
|
---|
51 | line-height: 32px; }
|
---|
52 | .md-dense > .md-button:not(.md-dense-disabled),
|
---|
53 | .md-dense :not(.md-dense-disabled) .md-button:not(.md-dense-disabled) {
|
---|
54 | font-size: 13px; }
|
---|
55 | .md-button:focus {
|
---|
56 | outline: none; }
|
---|
57 | .md-button:hover, .md-button:focus {
|
---|
58 | text-decoration: none; }
|
---|
59 | .md-button.ng-hide, .md-button.ng-leave {
|
---|
60 | transition: none; }
|
---|
61 | .md-button.md-cornered {
|
---|
62 | border-radius: 0; }
|
---|
63 | .md-button.md-icon {
|
---|
64 | padding: 0;
|
---|
65 | background: none; }
|
---|
66 | .md-button.md-raised:not([disabled]) {
|
---|
67 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); }
|
---|
68 | .md-button.md-icon-button {
|
---|
69 | margin: 0 6px;
|
---|
70 | height: 40px;
|
---|
71 | min-width: 0;
|
---|
72 | line-height: 24px;
|
---|
73 | padding: 8px;
|
---|
74 | width: 40px;
|
---|
75 | border-radius: 50%; }
|
---|
76 | .md-button.md-fab {
|
---|
77 | z-index: 20;
|
---|
78 | line-height: 56px;
|
---|
79 | min-width: 0;
|
---|
80 | width: 56px;
|
---|
81 | height: 56px;
|
---|
82 | vertical-align: middle;
|
---|
83 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
---|
84 | border-radius: 50%;
|
---|
85 | background-clip: padding-box;
|
---|
86 | overflow: hidden;
|
---|
87 | transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
|
---|
88 | transition-property: background-color, box-shadow, transform; }
|
---|
89 | .md-button.md-fab.md-fab-bottom-right {
|
---|
90 | top: auto;
|
---|
91 | right: 20px;
|
---|
92 | bottom: 20px;
|
---|
93 | left: auto;
|
---|
94 | position: absolute; }
|
---|
95 | .md-button.md-fab.md-fab-bottom-left {
|
---|
96 | top: auto;
|
---|
97 | right: auto;
|
---|
98 | bottom: 20px;
|
---|
99 | left: 20px;
|
---|
100 | position: absolute; }
|
---|
101 | .md-button.md-fab.md-fab-top-right {
|
---|
102 | top: 20px;
|
---|
103 | right: 20px;
|
---|
104 | bottom: auto;
|
---|
105 | left: auto;
|
---|
106 | position: absolute; }
|
---|
107 | .md-button.md-fab.md-fab-top-left {
|
---|
108 | top: 20px;
|
---|
109 | right: auto;
|
---|
110 | bottom: auto;
|
---|
111 | left: 20px;
|
---|
112 | position: absolute; }
|
---|
113 | .md-button.md-fab.md-mini {
|
---|
114 | line-height: 40px;
|
---|
115 | width: 40px;
|
---|
116 | height: 40px; }
|
---|
117 | .md-button.md-fab.ng-hide, .md-button.md-fab.ng-leave {
|
---|
118 | transition: none; }
|
---|
119 | .md-button.md-fab[disabled] {
|
---|
120 | box-shadow: none; }
|
---|
121 | .md-button:not([disabled]).md-raised.md-focused, .md-button:not([disabled]).md-fab.md-focused {
|
---|
122 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); }
|
---|
123 | .md-button:not([disabled]).md-raised:active, .md-button:not([disabled]).md-fab:active {
|
---|
124 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); }
|
---|
125 | .md-button .md-ripple-container {
|
---|
126 | border-radius: inherit;
|
---|
127 | background-clip: padding-box;
|
---|
128 | overflow: hidden;
|
---|
129 | -webkit-transform: translateZ(0); }
|
---|
130 |
|
---|
131 | .md-button.md-icon-button md-icon,
|
---|
132 | button.md-button.md-fab md-icon {
|
---|
133 | display: block; }
|
---|
134 |
|
---|
135 | .md-toast-open-top .md-button.md-fab-top-left,
|
---|
136 | .md-toast-open-top .md-button.md-fab-top-right {
|
---|
137 | transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
---|
138 | transform: translate3d(0, 42px, 0); }
|
---|
139 | .md-toast-open-top .md-button.md-fab-top-left:not([disabled]).md-focused, .md-toast-open-top .md-button.md-fab-top-left:not([disabled]):hover,
|
---|
140 | .md-toast-open-top .md-button.md-fab-top-right:not([disabled]).md-focused,
|
---|
141 | .md-toast-open-top .md-button.md-fab-top-right:not([disabled]):hover {
|
---|
142 | transform: translate3d(0, 41px, 0); }
|
---|
143 |
|
---|
144 | .md-toast-open-bottom .md-button.md-fab-bottom-left,
|
---|
145 | .md-toast-open-bottom .md-button.md-fab-bottom-right {
|
---|
146 | transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
---|
147 | transform: translate3d(0, -42px, 0); }
|
---|
148 | .md-toast-open-bottom .md-button.md-fab-bottom-left:not([disabled]).md-focused, .md-toast-open-bottom .md-button.md-fab-bottom-left:not([disabled]):hover,
|
---|
149 | .md-toast-open-bottom .md-button.md-fab-bottom-right:not([disabled]).md-focused,
|
---|
150 | .md-toast-open-bottom .md-button.md-fab-bottom-right:not([disabled]):hover {
|
---|
151 | transform: translate3d(0, -43px, 0); }
|
---|
152 |
|
---|
153 | .md-button-group {
|
---|
154 | display: flex;
|
---|
155 | flex: 1;
|
---|
156 | width: 100%; }
|
---|
157 | .md-button-group > .md-button {
|
---|
158 | flex: 1;
|
---|
159 | display: block;
|
---|
160 | overflow: hidden;
|
---|
161 | width: 0;
|
---|
162 | border-width: 1px 0px 1px 1px;
|
---|
163 | border-radius: 0;
|
---|
164 | text-align: center;
|
---|
165 | text-overflow: ellipsis;
|
---|
166 | white-space: nowrap; }
|
---|
167 | .md-button-group > .md-button:first-child {
|
---|
168 | border-radius: 2px 0px 0px 2px; }
|
---|
169 | .md-button-group > .md-button:last-child {
|
---|
170 | border-right-width: 1px;
|
---|
171 | border-radius: 0px 2px 2px 0px; }
|
---|
172 |
|
---|
173 | @media screen and (-ms-high-contrast: active) {
|
---|
174 | .md-button.md-raised,
|
---|
175 | .md-button.md-fab {
|
---|
176 | border: 1px solid #fff; } }
|
---|