399 lines
11 KiB
Sass
399 lines
11 KiB
Sass
/* Sass by Sfner
|
|
* using Material pallette
|
|
* with a layout heavily inspired by guanlecoja
|
|
*/
|
|
|
|
@import palette
|
|
|
|
$asideHeaderForeground: map-get($mat-green, 50)
|
|
$asideHeaderBackground: map-get($mat-green, 800)
|
|
|
|
$asideItemForegroundActive: $light-primary-text
|
|
$asideItemBackgroundActive: map-get($mat-green, 900)
|
|
|
|
$asideItemForegroundInactive: map-get($mat-green, 100)
|
|
$asideItemBackgroundInactive: map-get($mat-green, 700)
|
|
|
|
$asideItemTipSelected: map-get($mat-light-blue, 200)
|
|
|
|
$asideHeadingTextActive: map-get($mat-green, 50)
|
|
$asideHeadingTextInactive: map-get($mat-green, 200)
|
|
|
|
$iconBackground: map-get($mat-green, 500)
|
|
|
|
$iconSuccess: map-get($mat-green, 600)
|
|
$iconWarn: map-get($mat-amber, 800)
|
|
$iconDanger: map-get($mat-red, 600)
|
|
$iconInfo: map-get($mat-light-blue, 500)
|
|
|
|
$linkNormal: $iconSuccess
|
|
$linkDanger: $iconDanger
|
|
|
|
$mainHeaderForeground: #333333
|
|
$mainHeaderBackground: #FFFFFF
|
|
|
|
$mainMainBackground: #F3F3F3
|
|
|
|
$mainMainCardHeadingText: #767676
|
|
$mainMainCardHeadingBackground: #F6F6F6
|
|
|
|
$mainMainCardContentText: #333333
|
|
$mainMainCardContentTextMuted: #777777
|
|
$mainMainCardContentBackground: #FFFFFF
|
|
|
|
$mainFooterForeground: #CDCDCD
|
|
$mainFooterForegroundHover: #8F8F8F
|
|
$mainFooterBackground: #333333
|
|
|
|
*
|
|
transition-property: all
|
|
transition-duration: 250ms
|
|
transition-timing-function: ease-in-out
|
|
|
|
body
|
|
margin: 0px
|
|
font-family: 'Source Sans Pro', 'Montserrat', sans-serif
|
|
&>aside
|
|
position: fixed
|
|
left: 0
|
|
top: 0
|
|
width: 15em
|
|
height: 100vh
|
|
background-color: $asideItemBackgroundInactive
|
|
&>header
|
|
position: fixed
|
|
left: 0
|
|
top: 0
|
|
color: $asideHeaderForeground
|
|
background-color: $asideHeaderBackground
|
|
padding: 0.5em
|
|
height: 4em
|
|
width: 14em
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
flex-direction: column
|
|
line-height: 1.5em
|
|
&>a
|
|
width: 100%
|
|
height: 100%
|
|
text-align: text
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
flex-direction: column
|
|
&, &:link, &:active, &:visited, &:hover
|
|
color: $asideHeaderForeground
|
|
text-decoration-line: none
|
|
&>span
|
|
font-size: 125%
|
|
display: inline-block
|
|
&>main
|
|
position: fixed
|
|
left: 0
|
|
top: 5em
|
|
bottom: 3em
|
|
width: 15em
|
|
overflow-x: hidden
|
|
overflow-y: scroll
|
|
direction: rtl
|
|
&>*
|
|
display: block
|
|
direction: ltr
|
|
font-variant: small-caps
|
|
&>h3
|
|
margin: 0
|
|
padding-top: 0.5em
|
|
padding-left: 0.3em
|
|
padding-right: 0.3em
|
|
padding-bottom: 0.3em
|
|
&>h3.active
|
|
color: $asideHeadingTextActive
|
|
&>h3:not(.active)
|
|
color: $asideHeadingTextInactive
|
|
&>ul
|
|
list-style-type: none
|
|
margin-top: 0
|
|
margin-bottom: 0
|
|
padding-left: 0
|
|
&>li
|
|
padding-right: -0.25em
|
|
padding-left: 0.25em
|
|
border-left-width: 0.5em
|
|
border-left-style: solid
|
|
& a, & a:visited, & a:hover, & a:active, & a:link
|
|
text-decoration-line: none
|
|
display: block
|
|
padding: 0.5em
|
|
&>li.active
|
|
background-color: $asideHeaderBackground
|
|
border-left-color: $asideItemTipSelected
|
|
&>li:hover
|
|
background-color: $asideHeaderBackground
|
|
&>li.active, &>li:not(.active):hover
|
|
&, & a, & a:visited, & a:hover, & a:active, & a:link
|
|
color: $asideItemForegroundActive
|
|
&>li:not(.active):not(:hover)
|
|
background-color: transparent
|
|
border-left-color: transparent
|
|
&, & a, & a:visited, & a:hover, & a:active, & a:link
|
|
color: $asideItemForegroundInactive
|
|
&>footer
|
|
position: fixed
|
|
left: 0
|
|
bottom: 0
|
|
height: 2em
|
|
width: 14em
|
|
padding: 0.5em
|
|
color: $asideHeaderForeground
|
|
background-color: $asideHeaderBackground
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
&>section
|
|
min-height: 100vh
|
|
width: calc( 100vw - 15em )
|
|
margin-left: 15em
|
|
background-color: $mainFooterBackground
|
|
&>*
|
|
padding: 0.5em
|
|
&>header
|
|
color: $mainHeaderForeground
|
|
background-color: $mainHeaderBackground
|
|
&>main
|
|
color: $mainMainCardContentText
|
|
background-color: $mainMainBackground
|
|
& a, & a:visited, & a:active, & a:link
|
|
color: $mainFooterBackground
|
|
text-decoration-style: dotted
|
|
& a:hover
|
|
color: $mainFooterForegroundHover
|
|
text-decoration-style: solid
|
|
&>footer
|
|
color: $mainFooterForeground
|
|
& a, & a:visited, & a:active, & a:link
|
|
color: $mainFooterForeground
|
|
text-decoration-style: dotted
|
|
& a:hover
|
|
color: $mainFooterForegroundHover
|
|
text-decoration-style: solid
|
|
.floatRight
|
|
float: right
|
|
|
|
.marginTop1em5Negative
|
|
margin-top: -1.5em
|
|
|
|
button
|
|
font-size: 100%
|
|
|
|
.btn
|
|
text-decoration-line: none
|
|
display: inline-block
|
|
padding-top: 0.3em
|
|
padding-bottom: 0.3em
|
|
padding-left: 0.4em
|
|
padding-right: 0.4em
|
|
border-radius: 0.3em
|
|
border-style: solid
|
|
border-width: 0.085em
|
|
|
|
.btn-success
|
|
background-color: $iconSuccess
|
|
border-color: darken($iconSuccess, 10)
|
|
&:hover
|
|
background-color: darken($iconSuccess, 10)
|
|
&, &:visited, &:active, &:link, &:hover
|
|
color: $mainHeaderBackground
|
|
|
|
.btn-danger
|
|
background-color: $iconDanger
|
|
border-color: darken($iconDanger, 10)
|
|
&:hover
|
|
background-color: darken($iconDanger, 10)
|
|
&, &:visited, &:active, &:link, &:hover
|
|
color: $mainHeaderBackground
|
|
|
|
.btn-warn
|
|
background-color: $iconWarn
|
|
border-color: darken($iconWarn, 10)
|
|
&:hover
|
|
background-color: darken($iconWarn, 10)
|
|
&, &:visited, &:active, &:link, &:hover
|
|
color: $mainHeaderBackground
|
|
|
|
.btn-info
|
|
background-color: $iconInfo
|
|
border-color: darken($iconInfo, 10)
|
|
&:hover
|
|
background-color: darken($iconInfo, 10)
|
|
&, &:visited, &:active, &:link, &:hover
|
|
color: $mainHeaderBackground
|
|
|
|
.btn-outline
|
|
border-radius: 0.3em
|
|
border-style: solid
|
|
border-width: 0.085em
|
|
|
|
.btn-outline-success
|
|
border-color: $iconSuccess
|
|
&:hover
|
|
background-color: transparentize($iconSuccess, 0.9)
|
|
|
|
.btn-outline-danger
|
|
border-color: $iconDanger
|
|
&:hover
|
|
background-color: transparentize($iconDanger, 0.9)
|
|
|
|
.btn-outline-warn
|
|
border-color: $iconWarn
|
|
&:hover
|
|
background-color: transparentize($iconWarn, 0.9)
|
|
|
|
.btn-outline-info
|
|
border-color: $iconInfo
|
|
&:hover
|
|
background-color: transparentize($iconInfo, 0.9)
|
|
|
|
.clr-success
|
|
color: $iconSuccess
|
|
&:hover
|
|
color: darken($iconSuccess, 10)
|
|
|
|
.clr-danger
|
|
color: $iconDanger
|
|
&:hover
|
|
color: darken($iconDanger, 10)
|
|
|
|
.clr-warn
|
|
color: $iconWarn
|
|
&:hover
|
|
color: darken($iconWarn, 10)
|
|
|
|
.clr-info
|
|
color: $iconInfo
|
|
&:hover
|
|
color: darken($iconInfo, 10)
|
|
|
|
.db
|
|
display: block
|
|
|
|
.w100
|
|
width: 100%
|
|
|
|
.cardSection
|
|
margin: 0.4em
|
|
padding: 0.4em
|
|
background-color: $mainMainCardContentBackground
|
|
border-color: $mainFooterForegroundHover
|
|
border-width: 0.085em
|
|
border-style: solid
|
|
border-radius: 0.3em
|
|
overflow: hidden
|
|
&>.cardTitle
|
|
border-bottom-color: $mainFooterForegroundHover
|
|
border-bottom-width: 0.085em
|
|
border-bottom-style: solid
|
|
background-color: $mainMainCardHeadingBackground
|
|
color: $mainMainCardHeadingText
|
|
margin-top: -0.4em
|
|
margin-left: -0.4em
|
|
margin-right: -0.4em
|
|
margin-bottom: 0.4em
|
|
padding: 0.2em
|
|
&>h3
|
|
margin: 0px
|
|
& .textMuted
|
|
color: $mainMainCardContentTextMuted
|
|
main .textMuted
|
|
color: $mainMainCardContentTextMuted
|
|
|
|
form.singleLinerPair
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: nowrap
|
|
justify-content: center
|
|
&>:nth-child(1)
|
|
width: calc( 100% - 5em )
|
|
border-top-right-radius: 0px
|
|
border-bottom-right-radius: 0px
|
|
border-top-left-radius: 0.3em
|
|
border-bottom-left-radius: 0.3em
|
|
border-style: solid
|
|
background-color: $mainMainBackground
|
|
border-color: $mainMainCardHeadingText
|
|
border-width: 0.085em
|
|
&::placeholder
|
|
color: $mainMainCardHeadingText
|
|
|
|
&>:nth-child(2)
|
|
width: calc( 3em )
|
|
border-top-left-radius: 0px
|
|
border-bottom-left-radius: 0px
|
|
|
|
form.djangoFormsP
|
|
&>p>*
|
|
display: block
|
|
&>p>*:not([type="checkbox"]):not([type="radio"]):not(label),&>div.django-ckeditor-widget
|
|
width: calc( 100% - 1em - 1rem )
|
|
&>p>*:not(label),&>div.django-ckeditor-widget
|
|
margin-left: 1rem
|
|
&>p>label
|
|
font-weight: 400
|
|
&>p>textarea
|
|
resize: vertical
|
|
&>p>span.helptext
|
|
display: block
|
|
color: $mainMainCardContentTextMuted
|
|
font-style: italic
|
|
&>ul.errorlist
|
|
list-style-type: none
|
|
margin: 0px
|
|
padding: 0px
|
|
padding-left: 0.2em
|
|
margin-bottom: -0.75em
|
|
border-top-left-radius: 0.2em
|
|
border-top-right-radius: 0.2em
|
|
border-style: solid
|
|
border-width: 0.085em
|
|
border-bottom-width: 0em
|
|
border-color: $iconDanger
|
|
border-left-color: linear-gradient($iconDanger, transparent)
|
|
border-right-color: $iconDanger
|
|
border-bottom-color: transparent
|
|
background: linear-gradient(transparentize($iconDanger, 0.8), transparent)
|
|
@extend .clr-danger
|
|
// &>li:before
|
|
// display: float
|
|
// content: '—'
|
|
// margin-left: -0.75em
|
|
&>p:empty
|
|
display: none
|
|
&>p
|
|
padding-bottom: 1em
|
|
margin-bottom: 1em
|
|
border-bottom-style: solid
|
|
border-bottom-width: 0.085em
|
|
border-bottom-color: lighten($mainFooterForeground, 7.5)
|
|
&>div.django-ckeditor-widget
|
|
margin-top: -2em
|
|
padding-bottom: 1em
|
|
margin-bottom: 1em
|
|
border-bottom-style: solid
|
|
border-bottom-width: 0.085em
|
|
border-bottom-color: lighten($mainFooterForeground, 7.5)
|
|
background: $mainMainCardContentBackground
|
|
&>.cke
|
|
width: 100% !important
|
|
&>span.helptext
|
|
display: block
|
|
margin-top: -2em
|
|
padding-bottom: 1em
|
|
margin-bottom: 1em
|
|
padding-left: 1em
|
|
border-bottom-style: solid
|
|
border-bottom-width: 0.085em
|
|
border-bottom-color: lighten($mainFooterForeground, 7.5)
|
|
color: $mainMainCardContentTextMuted
|
|
background: $mainMainCardContentBackground
|
|
font-style: italic
|