Mercurial > hg > orthanc-stone
comparison Applications/StoneWebViewer/Resources/Styles/_button.scss @ 1538:d1806b4e4839
moving OrthancStone/Samples/ as Applications/Samples/
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Tue, 11 Aug 2020 13:24:38 +0200 |
parents | StoneWebViewer/Resources/Styles/_button.scss@fb74ed5d8c22 |
children |
comparison
equal
deleted
inserted
replaced
1537:de8cf5859e84 | 1538:d1806b4e4839 |
---|---|
1 // clean icon buttons | |
2 .wvButton { | |
3 // Remove <a> default styles. Take care - this class may either be used | |
4 // with <a> or <button>. | |
5 &:hover { | |
6 text-decoration: none; | |
7 color: white; | |
8 } | |
9 | |
10 // Remove <button> default styles. | |
11 outline: none; | |
12 background-color: transparent; | |
13 border: none; | |
14 border-radius: 0; | |
15 | |
16 // Set relative to position button absolutely | |
17 position: relative; | |
18 | |
19 // Style button | |
20 display: inline-block; | |
21 cursor: pointer; | |
22 font-variant: small-caps; | |
23 text-transform: lowercase; | |
24 text-align: center; | |
25 font-size: 1.3rem; | |
26 font-weight: 400; | |
27 color: hsl(0, 0%, 85%); | |
28 transition: 0.3s text-decoration ease, 0.3s border ease, 0.3s opacity ease; | |
29 | |
30 // Position button | |
31 margin: 0; | |
32 min-width: 3rem; | |
33 padding: 0 10px; | |
34 line-height: 3.6rem; | |
35 &.wvLargeButton{ | |
36 font-size: 2rem; | |
37 line-height: 6.2rem; | |
38 padding: 0 20px; | |
39 } | |
40 } | |
41 | |
42 .wvButton--rotate { | |
43 @extend .wvButton; | |
44 // Rotate only the icon | |
45 &:before, &:after{ | |
46 transform: rotate(90deg); | |
47 display: inline-block; | |
48 } | |
49 | |
50 } | |
51 | |
52 .wvButton--vflip { | |
53 @extend .wvButton; | |
54 // flip only the icon | |
55 &:before, &:after{ | |
56 transform: scaleX(-1); | |
57 display: inline-block; | |
58 } | |
59 | |
60 } | |
61 | |
62 // button w/ blue underline | |
63 .wvButton--underline, .fa.wvButton--underline { | |
64 @extend .wvButton; | |
65 | |
66 position: relative; | |
67 | |
68 background-color:inherit; | |
69 text-decoration: none; | |
70 text-align:left; | |
71 font-size: 1.2rem; | |
72 &.wvLargeButton{ | |
73 font-size: 2rem; | |
74 width: 6.4rem; | |
75 } | |
76 * { | |
77 pointer-events: none; | |
78 } | |
79 &:hover, &:active, &:focus{ | |
80 outline:0; | |
81 } | |
82 | |
83 width: 3.2rem; | |
84 vertical-align: middle; | |
85 color:white; | |
86 opacity: 0.75; | |
87 border:none; | |
88 border-bottom: 2px solid rgba(255,255,255,0.1); | |
89 &:hover, &:focus{ | |
90 border-color: rgba(255,255,255,1); | |
91 opacity:1; | |
92 .wvButton__bottomTriangle{ | |
93 border-left-color: rgba(255,255,255,1); | |
94 &.toggled{ | |
95 // border-color: rgba(255, 255, 255, 1); | |
96 } | |
97 } | |
98 } | |
99 &.active{ | |
100 opacity: 1; | |
101 border-color: $primary; | |
102 } | |
103 | |
104 // Make sure the 2px border is not hidden by viewports and other parts of | |
105 // the layout (.glyphicon class sets top to 1px) | |
106 top: 0px; | |
107 | |
108 // Compensate glyphicon whitespace | |
109 &::before { | |
110 position: relative; | |
111 top: -1px; | |
112 } | |
113 | |
114 // Adapt font-awesome icon to glyphicon styles | |
115 &.fa { | |
116 top: 0px; | |
117 font-weight: 800; | |
118 } | |
119 } | |
120 | |
121 .wvButton__bottomTriangle{ | |
122 transition: 0.3s border ease, 0.3s opacity ease; | |
123 | |
124 display:block; | |
125 position: absolute; | |
126 bottom:0; | |
127 left:0; | |
128 | |
129 width: 0; | |
130 height: 0; | |
131 border-style: solid; | |
132 border-width: 10px 0 0 10px; | |
133 border-color: transparent transparent transparent rgba(255,255,255,0.1); | |
134 &.active{ | |
135 border-color: transparent transparent transparent $primary !important; | |
136 &.toggled{ | |
137 border-left-color: $primary !important; | |
138 } | |
139 } | |
140 &.toggled{ | |
141 // border-width: 15px 0 0 15px; | |
142 } | |
143 } | |
144 | |
145 // button w/ border | |
146 .wvButton--border { | |
147 @extend .wvButton; | |
148 | |
149 // Prevent multi line buttons. | |
150 max-height: calc(2.8rem - 3px); | |
151 max-width: 100%; | |
152 overflow: hidden; | |
153 | |
154 // Set margin | |
155 margin: 0.6rem; | |
156 margin-left: 0rem; | |
157 margin-right: 0rem; | |
158 & + & { | |
159 margin-left: 0.7rem; | |
160 } | |
161 | |
162 // Set button size | |
163 line-height: 2rem; | |
164 | |
165 // Align text | |
166 padding-top: 0.1rem; | |
167 padding-bottom: 0.5rem; | |
168 | |
169 // Style button | |
170 font-size: 1.4rem; | |
171 border: 1px solid hsl(0, 0%, 27%); | |
172 | |
173 // Set best looking font with small-caps. | |
174 font-family: Arial; | |
175 | |
176 // Change background on hover | |
177 background-color: hsl(0, 0%, 0%); | |
178 &:hover { | |
179 background-color: hsl(0, 0%, 10%); | |
180 } | |
181 | |
182 & > .glyphicon { // used with the same element as glyphicons | |
183 // Position button | |
184 position: relative; | |
185 display: inline-block; | |
186 top: 3px; | |
187 margin-right: 4px; | |
188 } | |
189 } | |
190 | |
191 // button w/ border + white modifier to use when the background is white. | |
192 .wvButton--borderAndWhite { | |
193 @extend .wvButton--border; | |
194 | |
195 // Text color | |
196 color: hsl(0, 0%, 10%); | |
197 border: 1px solid hsl(0, 0%, 73%); | |
198 | |
199 // Change background on hover | |
200 background-color: hsl(0, 0%, 100%); | |
201 &:hover { | |
202 color: hsl(0, 0%, 10%); | |
203 background-color: hsl(0, 0%, 90%); | |
204 } | |
205 } |