Mercurial > hg > orthanc-stone
diff 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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/Applications/StoneWebViewer/Resources/Styles/_button.scss Tue Aug 11 13:24:38 2020 +0200 @@ -0,0 +1,205 @@ +// 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%); + } +}