Mercurial > hg > orthanc-stone
diff Applications/StoneWebViewer/Resources/Styles/_helpers.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/_helpers.scss@fb74ed5d8c22 |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/Applications/StoneWebViewer/Resources/Styles/_helpers.scss Tue Aug 11 13:24:38 2020 +0200 @@ -0,0 +1,1115 @@ +/* + * Source code taken from private Osimis' frontend toolbox 3.2.1. + */ + +/** + _overlay.scss + */ +.overlay__transparent{ + position:fixed; + top:0; + left:0; + width:100%; + height:100%; + z-index: 1; +} + +/** _transition.scss **/ +.transition, +%transition{ + &{ + transition: 0.3s all ease; + } +} + +.transition--long, +%transition--long{ + &{ + transition: 0.6s all ease; + } +} + + +/** _list.scss **/ +// This is used in the study information panel. +dd+dt{ + clear:both; +} +.listDefinition{ + width:100%; + line-height: 1.3; +} +.listDefinition__term{ + clear:both; + float:left; + text-align: right; + padding-right:10px; + width:50%; + @extend .font__light; + +} +.listDefinition__data{ + text-align: left; + padding-left:10px; + float:right; + width:50%; + @extend .font__normal; + +} + + +/** _animation.scss **/ +@keyframes blink__primary { + 0% { color: $primary; } + 100% { color: $text-color; } +} + +.blink__primary{ + animation: blink__primary 0.8s linear infinite; +} + +[translate-cloak]{ + transition: 0.3s all ease; + opacity: 1; + &.translate-cloak{ + opacity: 0; + } +} + +/** _button.scss **/ +.button__unstyled, +%button__unstyled{ + background-color:inherit; + border:none; + text-decoration: none; + text-align:left; + padding:0; + cursor: pointer; + *{ + pointer-events: none; + } + &:hover, &:active, &:focus{ + outline:0; + } +} +.button__base, +%button__base{ + @extend .button__unstyled; + transition: 0.3s all ease; + //& *,& *:before,& *:after{ + // @extend .transition; + //} +} +.button__state--active{ + @extend .button__base; + opacity:1; + &:hover{ + opacity:0.9; + color:$primary; + } +} +.button__state--inactive{ + @extend .button__base; + opacity:0.333; + &:hover{ + opacity:0.4333; + color:$primary; + } +} +.button__iconed{ + @extend .button__base; + opacity: 1; + &:hover, &:focus, &.active{ + opacity: 0.75; + color:$primary; + } +} +.button__switch--base, +%button__switch--base{ + @extend .button__base; + padding:5px 0px; + display:inline-block; + text-align: center; + border-top: 1px solid; + border-bottom: 1px solid; + border-color: $primary; + background-color: white; + overflow: hidden; + &:hover, &:focus{ + background-color: lighten($primary, 10); + color:white; + } + &.active{ + background-color:$primary; + color:white; + } +} +.button__switch{ + @extend .button__switch--base; +} +.button__switch--first{ + @extend .button__switch--base; + border-left: 1px solid $primary; + border-radius: 5px 0 0 5px; +} +.button__switch--last{ + @extend .button__switch--base; + border-right: 1px solid $primary; + border-radius: 0 5px 5px 0; +} +.button__lightgrey--hover{ + @extend .button__base; + &:hover, &:focus, &.active{ + background-color: $lightGrey; + } +} +.button__text-danger--hover{ + @extend .button__base; + &:hover, &:focus, &.active{ + color: $dangerColor; + } +} +.button__text-primary--hover{ + @extend .button__base; + &:hover, &:focus, &.active{ + color: $primary; + } +} +.button__danger--hover{ + @extend .button__base; + &:hover, &:focus, &.active{ + background-color: $dangerColor; + color:white; + } +} +.button__text{ + @extend .button__base; + opacity:0.66; + &:hover, &.active, &:focus{ + opacity:1; + } +} +.button__text--underlined{ + @extend .button__base; + text-decoration: underline; + &:hover, &.active, &:focus{ + text-decoration:none; + } +} +.button__bordered{ + @extend .button__base; + border-bottom: 2px solid $text-color; + &:hover, &:focus, &.active{ + border-color: $primary; + } +} +.button__bordered--inverted{ + @extend .button__base; + border-bottom: 2px solid white; +} +.button__close{ + @extend .button__base; + position:absolute; + top:0; + right:0; + opacity:0.6; + z-index:10; + &:hover, &:focus{ + opacity:1; + } +} + + +/** _block.scss **/ +.block{ + display: block !important; +} + + +/** _boxsizing.scss **/ +.boxsizing__borderbox{ + box-sizing:border-box; +} +.boxsizing__contentbox{ + box-sizing:content-box; +} + + +/** _scrollable.scss **/ +.scrollable{ + overflow-y:auto; +} +.scrollable--x{ + overflow-x:auto; +} +.no-scroll{ + overflow:hidden; +} + + +/** _float.scss **/ +.float__right, +%float__right{ + float:right; +} +.float__left, +%float__left{ + float:left; +} + + +/** _fonts.scss **/ +.font__bold, +%font__bold{ + font-weight:600; +} +.font__normal, +%font__normal{ + font-weight: 400; +} +.font__light, +%font__light{ + font-weight: 200; +} +.fontColor__primary{ + color:$primary; +} +.fontColor__lightGrey{ + color:$lightGrey; +} +.fontColor__normal{ + color:$text-color; +} +.fontColor__darker{ + color:$darkGrey; +} +.fontColor__white{ + color:white; +} + + +/** _forms.scss **/ +.textarea__unstyled{ + border:none; + outline:none; + background-color:transparent; + color:inherit; + resize:none; + padding:0; + margin:0; + width:100%; +} + + +/** _position.scss **/ +.position__relative{ + position: relative; +} + + +/** _margin.scss **/ +.margin__auto{ + margin:auto; +} + + +/** _helpers.scss **/ +$steps: ( + 0,5,8,10, + 11,12,13,14,15,16,17,18,19,20, + 21,22,23,24,25,26,27,28,29,30, + 31,32,33,34,35,36,37,38,39,40, + 41,42,43,44,45,46,47,48,49,50, + 55,60,64,65,70,72,75,80,85,90,95,96,100, + 110,120,130,140,150,160,170,180,190,200, + 210,220,230,240,250,260,270,280,290,300, + 310,320,330,340,350,360,370,380,390,400, + 410,420,430,440,450,460,470,480,490,500 +); + + +/*************HELPERS**************/ +/**********************************/ + +/*** identical width and height ***/ +@each $step in $steps { + .wh__#{$step} { + width: $step + px !important; + height: $step + px !important; + } + .lh__#{$step} { + line-height: $step + px !important; + } +} +.lh__1{ + line-height: 1 !important; +} +.no-wrap{ + white-space: nowrap; +} + +.ov-h{ + overflow: hidden; +} +.va-m{ + vertical-align: middle; +} +.bg-inherit{ + background-color:inherit; +} +.bg-black{ + background-color: black; +} +.v-center{ + &:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; + margin-top: -0.25em; /* Adjusts for spacing */ + } +} +.fluid-height{ + height:100%; +} +.visibility__hidden{ + visibility: hidden; +} + +.pointerEvents__none{ + pointer-events: none; +} + +/* Padding Helpers */ +.pn { + padding: 0 !important; +} +.p1 { + padding: 1px !important; +} +.p2 { + padding: 2px !important; +} +.p3 { + padding: 3px !important; +} +.p4 { + padding: 4px !important; +} +.p5 { + padding: 5px !important; +} +.p6 { + padding: 6px !important; +} +.p7 { + padding: 7px !important; +} +.p8 { + padding: 8px !important; +} +.p10 { + padding: 10px !important; +} +.p12 { + padding: 12px !important; +} +.p15 { + padding: 15px !important; +} +.p20 { + padding: 20px !important; +} +.p25 { + padding: 25px !important; +} +.p30 { + padding: 30px !important; +} +.p35 { + padding: 35px !important; +} +.p40 { + padding: 40px !important; +} +.p50 { + padding: 50px !important; +} +.ptn { + padding-top: 0 !important; +} +.pt5 { + padding-top: 5px !important; +} +.pt10 { + padding-top: 10px !important; +} +.pt15 { + padding-top: 15px !important; +} +.pt20 { + padding-top: 20px !important; +} +.pt25 { + padding-top: 25px !important; +} +.pt30 { + padding-top: 30px !important; +} +.pt35 { + padding-top: 35px !important; +} +.pt40 { + padding-top: 40px !important; +} +.pt50 { + padding-top: 50px !important; +} +.prn { + padding-right: 0 !important; +} +.pr5 { + padding-right: 5px !important; +} +.pr10 { + padding-right: 10px !important; +} +.pr15 { + padding-right: 15px !important; +} +.pr20 { + padding-right: 20px !important; +} +.pr25 { + padding-right: 25px !important; +} +.pr30 { + padding-right: 30px !important; +} +.pr35 { + padding-right: 35px !important; +} +.pr40 { + padding-right: 40px !important; +} +.pr50 { + padding-right: 50px !important; +} +.pbn { + padding-bottom: 0 !important; +} +.pb5 { + padding-bottom: 5px !important; +} +.pb10 { + padding-bottom: 10px !important; +} +.pb15 { + padding-bottom: 15px !important; +} +.pb20 { + padding-bottom: 20px !important; +} +.pb25 { + padding-bottom: 25px !important; +} +.pb30 { + padding-bottom: 30px !important; +} +.pb35 { + padding-bottom: 35px !important; +} +.pb40 { + padding-bottom: 40px !important; +} +.pb50 { + padding-bottom: 50px !important; +} +.pln { + padding-left: 0 !important; +} +.pl5 { + padding-left: 5px !important; +} +.pl10 { + padding-left: 10px !important; +} +.pl15 { + padding-left: 15px !important; +} +.pl20 { + padding-left: 20px !important; +} +.pl25 { + padding-left: 25px !important; +} +.pl30 { + padding-left: 30px !important; +} +.pl35 { + padding-left: 35px !important; +} +.pl40 { + padding-left: 40px !important; +} +.pl50 { + padding-left: 50px !important; +} + +/* Axis Padding (both top/bottom or left/right) */ +.pv5 { + padding-top: 5px !important; + padding-bottom: 5px !important; +} +.pv8 { + padding-top: 8px !important; + padding-bottom: 8px !important; +} +.pv10 { + padding-top: 10px !important; + padding-bottom: 10px !important; +} +.pv15 { + padding-top: 15px !important; + padding-bottom: 15px !important; +} +.pv20 { + padding-top: 20px !important; + padding-bottom: 20px !important; +} +.pv25 { + padding-top: 25px !important; + padding-bottom: 25px !important; +} +.pv30 { + padding-top: 30px !important; + padding-bottom: 30px !important; +} +.pv40 { + padding-top: 40px !important; + padding-bottom: 40px !important; +} +.pv50 { + padding-top: 50px !important; + padding-bottom: 50px !important; +} +.ph5 { + padding-left: 5px !important; + padding-right: 5px !important; +} +.ph8 { + padding-left: 8px !important; + padding-right: 8px !important; +} +.ph10 { + padding-left: 10px !important; + padding-right: 10px !important; +} +.ph15 { + padding-left: 15px !important; + padding-right: 15px !important; +} +.ph20 { + padding-left: 20px !important; + padding-right: 20px !important; +} +.ph25 { + padding-left: 25px !important; + padding-right: 25px !important; +} +.ph30 { + padding-left: 30px !important; + padding-right: 30px !important; +} +.ph40 { + padding-left: 40px !important; + padding-right: 40px !important; +} +.ph50 { + padding-left: 50px !important; + padding-right: 50px !important; +} + +/* margin center helper */ +.mauto { + margin-left: auto; + margin-right: auto; +} +.mn { + margin: 0 !important; +} +.m1 { + margin: 1px !important; +} +.m2 { + margin: 2px !important; +} +.m3 { + margin: 3px !important; +} +.m4 { + margin: 4px !important; +} +.m5 { + margin: 5px !important; +} +.m8 { + margin: 8px !important; +} +.m10 { + margin: 10px !important; +} +.m15 { + margin: 15px !important; +} +.m20 { + margin: 20px !important; +} +.m25 { + margin: 25px !important; +} +.m30 { + margin: 30px !important; +} +.m35 { + margin: 35px !important; +} +.m40 { + margin: 40px !important; +} +.m50 { + margin: 50px !important; +} +.mtn { + margin-top: 0 !important; +} +.mt5 { + margin-top: 5px !important; +} +.mt10 { + margin-top: 10px !important; +} +.mt15 { + margin-top: 15px !important; +} +.mt20 { + margin-top: 20px !important; +} +.mt25 { + margin-top: 25px !important; +} +.mt30 { + margin-top: 30px !important; +} +.mt35 { + margin-top: 35px !important; +} +.mt40 { + margin-top: 40px !important; +} +.mt50 { + margin-top: 50px !important; +} +.mt70 { + margin-top: 70px !important; +} +.mrn { + margin-right: 0 !important; +} +.mr5 { + margin-right: 5px !important; +} +.mr10 { + margin-right: 10px !important; +} +.mr15 { + margin-right: 15px !important; +} +.mr20 { + margin-right: 20px !important; +} +.mr25 { + margin-right: 25px !important; +} +.mr30 { + margin-right: 30px !important; +} +.mr35 { + margin-right: 35px !important; +} +.mr40 { + margin-right: 40px !important; +} +.mr50 { + margin-right: 50px !important; +} +.mbn { + margin-bottom: 0 !important; +} +.mb5 { + margin-bottom: 5px !important; +} +.mb10 { + margin-bottom: 10px !important; +} +.mb15 { + margin-bottom: 15px !important; +} +.mb20 { + margin-bottom: 20px !important; +} +.mb25 { + margin-bottom: 25px !important; +} +.mb30 { + margin-bottom: 30px !important; +} +.mb35 { + margin-bottom: 35px !important; +} +.mb40 { + margin-bottom: 40px !important; +} +.mb50 { + margin-bottom: 50px !important; +} +.mb70 { + margin-bottom: 70px !important; +} +.mln { + margin-left: 0 !important; +} +.ml5 { + margin-left: 5px !important; +} +.ml10 { + margin-left: 10px !important; +} +.ml15 { + margin-left: 15px !important; +} +.ml20 { + margin-left: 20px !important; +} +.ml25 { + margin-left: 25px !important; +} +.ml30 { + margin-left: 30px !important; +} +.ml35 { + margin-left: 35px !important; +} +.ml40 { + margin-left: 40px !important; +} +.ml50 { + margin-left: 50px !important; +} + +/* Axis Margins (both top/bottom or left/right) */ +.mv5 { + margin-top: 5px !important; + margin-bottom: 5px !important; +} +.mv10 { + margin-top: 10px !important; + margin-bottom: 10px !important; +} +.mv15 { + margin-top: 15px !important; + margin-bottom: 15px !important; +} +.mv20 { + margin-top: 20px !important; + margin-bottom: 20px !important; +} +.mv25 { + margin-top: 25px !important; + margin-bottom: 25px !important; +} +.mv30 { + margin-top: 30px !important; + margin-bottom: 30px !important; +} +.mv40 { + margin-top: 40px !important; + margin-bottom: 40px !important; +} +.mv50 { + margin-top: 50px !important; + margin-bottom: 50px !important; +} +.mv70 { + margin-top: 70px !important; + margin-bottom: 70px !important; +} +.mh5 { + margin-left: 5px !important; + margin-right: 5px !important; +} +.mh10 { + margin-left: 10px !important; + margin-right: 10px !important; +} +.mh15 { + margin-left: 15px !important; + margin-right: 15px !important; +} +.mh20 { + margin-left: 20px !important; + margin-right: 20px !important; +} +.mh25 { + margin-left: 25px !important; + margin-right: 25px !important; +} +.mh30 { + margin-left: 30px !important; + margin-right: 30px !important; +} +.mh40 { + margin-left: 40px !important; + margin-right: 40px !important; +} +.mh50 { + margin-left: 50px !important; + margin-right: 50px !important; +} +.mh70 { + margin-left: 70px !important; + margin-right: 70px !important; +} + +/* Negative Margin Helpers */ +.mtn5 { + margin-top: -5px !important; +} +.mtn10 { + margin-top: -10px !important; +} +.mtn15 { + margin-top: -15px !important; +} +.mtn20 { + margin-top: -20px !important; +} +.mtn30 { + margin-top: -30px !important; +} +.mrn5 { + margin-right: -5px !important; +} +.mrn10 { + margin-right: -10px !important; +} +.mrn15 { + margin-right: -15px !important; +} +.mrn20 { + margin-right: -20px !important; +} +.mrn30 { + margin-right: -30px !important; +} +.mbn5 { + margin-bottom: -5px !important; +} +.mbn10 { + margin-bottom: -10px !important; +} +.mbn15 { + margin-bottom: -15px !important; +} +.mbn20 { + margin-bottom: -20px !important; +} +.mbn30 { + margin-bottom: -30px !important; +} +.mln5 { + margin-left: -5px !important; +} +.mln10 { + margin-left: -10px !important; +} +.mln15 { + margin-left: -15px !important; +} +.mln20 { + margin-left: -20px !important; +} +.mln30 { + margin-left: -30px !important; +} + +/* Vertical Negative Margin "mv" + "n" + "x" */ +.mvn5 { + margin-top: -5px !important; + margin-bottom: -5px !important; +} +.mvn10 { + margin-top: -10px !important; + margin-bottom: -10px !important; +} +.mvn15 { + margin-top: -15px !important; + margin-bottom: -15px !important; +} +.mvn20 { + margin-top: -20px !important; + margin-bottom: -20px !important; +} +.mvn30 { + margin-top: -30px !important; + margin-bottom: -30px !important; +} + +/* Horizontal Negative Margin "mh" + "n" + "x" */ +.mhn5 { + margin-left: -5px !important; + margin-right: -5px !important; +} +.mhn10 { + margin-left: -10px !important; + margin-right: -10px !important; +} +.mhn15 { + margin-left: -15px !important; + margin-right: -15px !important; +} +.mhn20 { + margin-left: -20px !important; + margin-right: -20px !important; +} +.mhn30 { + margin-left: -30px !important; + margin-right: -30px !important; +} + +/* Vertical Align Helpers */ +.va-t { + vertical-align: top !important; +} +.va-m { + vertical-align: middle !important; +} +.va-b { + vertical-align: bottom !important; +} +.va-s { + vertical-align: super !important; +} + +/* Text Helpers */ +.text-left { + text-align: left !important; +} +.text-right { + text-align: right !important; +} +.text-center { + text-align: center !important; +} +.text-justify { + text-align: justify !important; +} +.text-nowrap { + white-space: nowrap !important; +} + +/* Inline Block Helper */ +.ib, +.inline-object { + display: inline-block !important; +} + +.clear { + clear: both; +} + +// warning popup + +.wvWarning { + position: relative; + width: 320px; + min-height: 130px; + z-index: 999; + left: calc(50% - 160px); + border: #000 solid 1px; + -webkit-border-radius: 7px; + -moz-border-radius: 7px; + border-radius: 7px; + color: #FF5722; + box-shadow: 0px 3px 23px #ff980078; + -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ + -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */ + -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */ + animation-name: example; + animation-duration: 2s; + animation-fill-mode: both; + animation-timing-function: ease-out; +} + +@-webkit-keyframes example { + from {top: 0vh;opacity: 0;background: #868686} + to {top: 10vh;opacity: 1;background: #ffffff} +} + +@keyframes example { + from {top: 0vh;opacity: 0;background: #868686} + to {top: 10vh;opacity: 1;background: #ffffff} +} + +.wvWarning-content{ + position: relative; + width: 190px; + min-height: 88px; + max-height: 80vh; + margin: auto; +} +.wvWarning-icon{ + font-size: 32px; +} +.wvWarning-text{ + position: relative; +} +.wvWarning-button{ + background-color: #f1ededcc; + color: #607D8B; + width: 50px; + font-weight: 600; + margin-top: 2px; + margin-right: 30px; +} + +.wvScreenToSmallWarning { + position: fixed; + display: block; + top: 0; + left: 0; + background-color: white; + color: #333; + width: 100%; + height: 100%; + z-index: 1000; +} + +.wvScreenToSmallWarning-content { + padding: 10px; + text-align: center; +} + +/* on some mobile devices, the size returned for the "screen" is actually the viewport size so 360x640 is actually equal to 280x560 */ +@media only screen and (min-width: 550px) and (min-height: 280px) { + .wvScreenToSmallWarning { + display: none; + } +} + +/* on some mobile devices, the size returned for the "screen" is actually the viewport size so 360x640 is actually equal to 280x560 */ +@media only screen and (min-width: 280px) and (min-height: 550px) { + .wvScreenToSmallWarning { + display: none; + } +} \ No newline at end of file