Mercurial > hg > orthanc-stone
view StoneWebViewer/Resources/Styles/_button.scss @ 1515:b750b6eab453
sync
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Tue, 07 Jul 2020 20:52:35 +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%); } }