Mercurial > hg > orthanc-stone
view StoneWebViewer/Resources/Styles/_button.scss @ 1526:61023b0d39c8
Reverted the Stone Web Viewer plugin to rev. 307a805d0587
(mistakenly changed to serve the RT Viewer and make it
available in the Orthanc Explorer while it should have been
done in a separate plugin)
author | Benjamin Golinvaux <bgo@osimis.io> |
---|---|
date | Sun, 02 Aug 2020 13:53:48 +0200 |
parents | fb74ed5d8c22 |
children |
line wrap: on
line source
// clean icon buttons .wvButton { // Remove <a> default styles. Take care - this class may either be used // with <a> or <button>. &:hover { text-decoration: none; color: white; } // Remove <button> default styles. outline: none; background-color: transparent; border: none; border-radius: 0; // Set relative to position button absolutely position: relative; // Style button display: inline-block; cursor: pointer; font-variant: small-caps; text-transform: lowercase; text-align: center; font-size: 1.3rem; font-weight: 400; color: hsl(0, 0%, 85%); transition: 0.3s text-decoration ease, 0.3s border ease, 0.3s opacity ease; // Position button margin: 0; min-width: 3rem; padding: 0 10px; line-height: 3.6rem; &.wvLargeButton{ font-size: 2rem; line-height: 6.2rem; padding: 0 20px; } } .wvButton--rotate { @extend .wvButton; // Rotate only the icon &:before, &:after{ transform: rotate(90deg); display: inline-block; } } .wvButton--vflip { @extend .wvButton; // flip only the icon &:before, &:after{ transform: scaleX(-1); display: inline-block; } } // button w/ blue underline .wvButton--underline, .fa.wvButton--underline { @extend .wvButton; position: relative; background-color:inherit; text-decoration: none; text-align:left; font-size: 1.2rem; &.wvLargeButton{ font-size: 2rem; width: 6.4rem; } * { pointer-events: none; } &:hover, &:active, &:focus{ outline:0; } width: 3.2rem; vertical-align: middle; color:white; opacity: 0.75; border:none; border-bottom: 2px solid rgba(255,255,255,0.1); &:hover, &:focus{ border-color: rgba(255,255,255,1); opacity:1; .wvButton__bottomTriangle{ border-left-color: rgba(255,255,255,1); &.toggled{ // border-color: rgba(255, 255, 255, 1); } } } &.active{ opacity: 1; border-color: $primary; } // Make sure the 2px border is not hidden by viewports and other parts of // the layout (.glyphicon class sets top to 1px) top: 0px; // Compensate glyphicon whitespace &::before { position: relative; top: -1px; } // Adapt font-awesome icon to glyphicon styles &.fa { top: 0px; font-weight: 800; } } .wvButton__bottomTriangle{ transition: 0.3s border ease, 0.3s opacity ease; display:block; position: absolute; bottom:0; left:0; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: transparent transparent transparent rgba(255,255,255,0.1); &.active{ border-color: transparent transparent transparent $primary !important; &.toggled{ border-left-color: $primary !important; } } &.toggled{ // border-width: 15px 0 0 15px; } } // button w/ border .wvButton--border { @extend .wvButton; // Prevent multi line buttons. max-height: calc(2.8rem - 3px); max-width: 100%; overflow: hidden; // Set margin margin: 0.6rem; margin-left: 0rem; margin-right: 0rem; & + & { margin-left: 0.7rem; } // Set button size line-height: 2rem; // Align text padding-top: 0.1rem; padding-bottom: 0.5rem; // Style button font-size: 1.4rem; border: 1px solid hsl(0, 0%, 27%); // Set best looking font with small-caps. font-family: Arial; // Change background on hover background-color: hsl(0, 0%, 0%); &:hover { background-color: hsl(0, 0%, 10%); } & > .glyphicon { // used with the same element as glyphicons // Position button position: relative; display: inline-block; top: 3px; margin-right: 4px; } } // button w/ border + white modifier to use when the background is white. .wvButton--borderAndWhite { @extend .wvButton--border; // Text color color: hsl(0, 0%, 10%); border: 1px solid hsl(0, 0%, 73%); // Change background on hover background-color: hsl(0, 0%, 100%); &:hover { color: hsl(0, 0%, 10%); background-color: hsl(0, 0%, 90%); } }