Mercurial > hg > orthanc-stone

comparison Applications/StoneWebViewer/Resources/Styles/_button.scss @ 1538:d1806b4e4839

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 }