Mercurial > hg > orthanc-stone
diff Applications/StoneWebViewer/Resources/Styles/_studyIsland.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/_studyIsland.scss@fb74ed5d8c22 |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/Applications/StoneWebViewer/Resources/Styles/_studyIsland.scss Tue Aug 11 13:24:38 2020 +0200 @@ -0,0 +1,90 @@ +$gray: gray; +$blue: hsla(204, 70%, 53%, 0.7); +$red: rgba(206, 0, 0, 0.7); +$green: rgba(0, 160, 27, .7); +$yellow: rgba(220, 200 , 0, .9); +$violet: rgba(255, 31, 255, .7); + + +%wvStudyIsland { + margin: 1rem 1rem 1rem 1rem; + border: 0.3rem solid $gray; +} + +%wvStudyIsland__header { + background-color: $gray; + padding: 0.5rem 0.5rem 0.8rem 0.5rem; + line-height: 1.35rem; + width: 100%; +} +.wvStudyIsland__actions { + float: right; + + // Compensate header padding (since the inner download study button + // actually has margin). + margin-top: -0.8rem; + margin-right: -0.8rem; +} + +.wvStudyIsland__actions--oneCol { + float: none; + text-align: center; +} + +.wvStudyIsland__main { + padding: 0.4rem; // 0.7rem - 0.3rem (2px transparent border + 1px margin) + color: hsl(0, 0%, 100%); + width: 100%; // let some space for the 4-columns based items +} + + +// Color modifiers +.wvStudyIsland--blue { + @extend %wvStudyIsland; + border-color: $blue; +} + +.wvStudyIsland__header--blue { + @extend %wvStudyIsland__header; + background-color: $blue; +} + +.wvStudyIsland--red { + @extend %wvStudyIsland; + border-color: $red; +} + +.wvStudyIsland__header--red { + @extend %wvStudyIsland__header; + background-color: $red; +} + +.wvStudyIsland--green { + @extend %wvStudyIsland; + border-color: $green; +} + +.wvStudyIsland__header--green { + @extend %wvStudyIsland__header; + background-color: $green; +} + +.wvStudyIsland--yellow { + @extend %wvStudyIsland; + border-color: $yellow; +} + +.wvStudyIsland__header--yellow { + @extend %wvStudyIsland__header; + background-color: $yellow; +} + +.wvStudyIsland--violet { + @extend %wvStudyIsland; + border-color: $violet; +} + +.wvStudyIsland__header--violet { + @extend %wvStudyIsland__header; + background-color: $violet; +}