Mercurial > hg > orthanc-stone

annotate Applications/StoneWebViewer/Resources/Styles/_button.scss @ 1980:0aac8f552d89

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