fix: design tweaks
This commit is contained in:
Gregor Kleen
parent
1348c91c3c
commit
68eb44884e
@ -174,7 +174,10 @@ h4
|
||||
margin: 20px 0
|
||||
|
||||
.navbar__container-radio:checked ~ * &
|
||||
margin-top: calc(var(--current-header-height) + 40px)
|
||||
margin-top: calc(var(--current-header-height) + 30px)
|
||||
|
||||
@media (min-width: 769px) and (min-height: 501px)
|
||||
margin-top: calc(var(--current-header-height) + 44px)
|
||||
|
||||
.main__content, .modal__content
|
||||
a
|
||||
@ -183,19 +186,25 @@ h4
|
||||
p, form, .div-p
|
||||
margin: 0.5rem 0
|
||||
|
||||
&:first-child
|
||||
margin: 0 0 0.5rem 0
|
||||
|
||||
&:last-child
|
||||
margin: 0.5rem 0 0
|
||||
margin: 0.5rem 0 0 0
|
||||
|
||||
&:first-child
|
||||
margin: 0
|
||||
|
||||
@media (min-width: 769px) and (min-height: 501px)
|
||||
.main__content
|
||||
--current-header-height: var(--header-height)
|
||||
|
||||
@media (min-width: 426px)
|
||||
.main__content
|
||||
margin-left: var(--asidenav-width-md, 50px)
|
||||
|
||||
@media (min-width: 769px)
|
||||
@media (min-width: 769px) and (min-height: 501px)
|
||||
.main__content
|
||||
--current-header-height: var(--header-height)
|
||||
margin-left: var(--asidenav-width-lg, 20%)
|
||||
|
||||
@media (min-width: 1200px)
|
||||
@ -528,6 +537,9 @@ section
|
||||
display: grid
|
||||
grid-column: 2
|
||||
|
||||
h1 + &
|
||||
margin: 0 auto 0.5rem
|
||||
|
||||
&::before
|
||||
@extend .fas
|
||||
|
||||
@ -586,7 +598,7 @@ section
|
||||
&::before
|
||||
height: auto
|
||||
width: 45px
|
||||
font-size: 40px
|
||||
font-size: 20px
|
||||
top: 15px
|
||||
|
||||
.notification-error
|
||||
@ -602,15 +614,15 @@ section
|
||||
color: var(--color-warning)
|
||||
|
||||
// "Heated" element.
|
||||
Set custom property "--hotness" to a value from 0 to 1 to turn
|
||||
the element's background to a color on a gradient from green to red.
|
||||
// Set custom property "--hotness" to a value from 0 to 1 to turn
|
||||
// the element's background to a color on a gradient from green to red.
|
||||
|
||||
TBD:
|
||||
- move to a proper place
|
||||
- think about font-weight...
|
||||
// TBD:
|
||||
// - move to a proper place
|
||||
// - think about font-weight...
|
||||
|
||||
Example:
|
||||
<div .heated style="--hotness: 0.2">Lorem ipsum
|
||||
// Example:
|
||||
// <div .heated style="--hotness: 0.2">Lorem ipsum
|
||||
|
||||
.heated
|
||||
--hotness: 0
|
||||
@ -644,14 +656,17 @@ section
|
||||
pointer-events: none
|
||||
|
||||
.navbar__container-radio:checked ~ &
|
||||
top: calc(80px + var(--header-height))
|
||||
top: calc(84px + var(--header-height))
|
||||
|
||||
@media (max-width: 768px)
|
||||
@media (max-width: 768px), (max-height: 500px)
|
||||
.ribbon
|
||||
top: calc(20px + var(--header-height-collapsed))
|
||||
right: -83px
|
||||
transform: rotate(45deg) scale(0.6)
|
||||
|
||||
.navbar__container-radio:checked ~ &
|
||||
top: calc(50px + var(--header-height-collapsed))
|
||||
|
||||
#admin-studyterms
|
||||
select, option, input
|
||||
min-width: 50px
|
||||
|
||||
@ -1,24 +1,6 @@
|
||||
.navbar-container
|
||||
position: relative
|
||||
|
||||
.navbar-shadow
|
||||
position: fixed
|
||||
right: 0
|
||||
top: 0
|
||||
height: var(--header-height-collapsed)
|
||||
width: 20px
|
||||
z-index: 50
|
||||
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.4), transparent)
|
||||
transition: height 0.2s cubic-bezier(0.03, 0.43, 0.58, 1)
|
||||
|
||||
@media (min-width: 768px)
|
||||
.navbar-shadow
|
||||
height: var(--header-height)
|
||||
|
||||
@media (min-width: 1025px)
|
||||
.navbar-shadow
|
||||
display: none
|
||||
|
||||
.navbar
|
||||
position: fixed
|
||||
right: 0
|
||||
@ -38,23 +20,21 @@
|
||||
left: var(--asidenav-width-lg)
|
||||
|
||||
@media (max-width: 768px), (max-height: 500px)
|
||||
left: 0
|
||||
min-height: var(--header-height-collapsed)
|
||||
padding: 0
|
||||
|
||||
@media (max-width: 768px), (max-height: 500px)
|
||||
.navbar__link-wrapper
|
||||
height: var(--header-height-collapsed)
|
||||
@media (max-width: 768px)
|
||||
left: 0
|
||||
|
||||
.navbar__list-wrapper
|
||||
display: flex
|
||||
flex-flow: row nowrap
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
margin: 0 40px
|
||||
margin: 0
|
||||
|
||||
.navbar__list-left
|
||||
margin-right: 40px
|
||||
@media (min-width: 769px)
|
||||
margin: 0 40px
|
||||
|
||||
.navbar__list
|
||||
display: flex
|
||||
@ -62,9 +42,11 @@
|
||||
justify-content: flex-end
|
||||
align-items: center
|
||||
list-style-type: none
|
||||
margin: 0
|
||||
|
||||
&.navbar__list-left
|
||||
justify-content: flex-start
|
||||
margin-right: 40px
|
||||
|
||||
& > *
|
||||
display: block
|
||||
@ -80,13 +62,16 @@
|
||||
display: flex
|
||||
flex-flow: row nowrap
|
||||
align-items: center
|
||||
overflow: auto
|
||||
overflow: overlay
|
||||
list-style-type: none
|
||||
justify-content: flex-end
|
||||
margin: 0
|
||||
|
||||
& > *
|
||||
display: block
|
||||
margin-right: 12px
|
||||
|
||||
@media (min-width: 769px) and (min-height: 501px)
|
||||
margin-right: 12px
|
||||
|
||||
&:last-child
|
||||
margin-right: 0
|
||||
@ -94,7 +79,7 @@
|
||||
&.navbar__container-list--left > ul
|
||||
justify-content: flex-start
|
||||
|
||||
@media (max-width: 768px), (max-height: 500px)
|
||||
@media (max-width: 768px)
|
||||
padding: 0
|
||||
|
||||
visibility: collapse
|
||||
@ -125,6 +110,9 @@
|
||||
|
||||
&.navbar__container-list-closer--hidden
|
||||
visibility: hidden
|
||||
|
||||
@media (max-width: 768px)
|
||||
visibility: hidden
|
||||
|
||||
&.navbar__container-list--left .navbar__container-list-closer
|
||||
left: 14.5px
|
||||
@ -144,6 +132,10 @@
|
||||
overflow: hidden
|
||||
cursor: pointer
|
||||
|
||||
@media (max-width: 768px), (max-height: 500px)
|
||||
height: var(--header-height-collapsed)
|
||||
|
||||
|
||||
.navbar__link-icon
|
||||
opacity: 0.7
|
||||
transition: opacity 0.2s ease
|
||||
@ -179,10 +171,6 @@
|
||||
|
||||
@media (min-width: 769px) and (min-height: 501px)
|
||||
border: 1px solid rgba(255, 255, 255, 0.7)
|
||||
text-decoration: none
|
||||
|
||||
@media (max-width: 768px), (max-height: 500px)
|
||||
text-decoration: underline
|
||||
|
||||
height: 30px
|
||||
color: var(--color-lightwhite) !important
|
||||
@ -195,20 +183,15 @@
|
||||
min-width: 0
|
||||
transition: none
|
||||
cursor: pointer
|
||||
white-space: nowrap
|
||||
|
||||
&:not(.navbar__container-link--active):hover
|
||||
text-decoration: none
|
||||
|
||||
@media (min-width: 769px) and (min-height: 501px)
|
||||
background-color: var(--color-dark) !important
|
||||
color: var(--color-lightwhite) !important
|
||||
background-color: var(--color-dark) !important
|
||||
color: var(--color-lightwhite) !important
|
||||
|
||||
&.navbar__container-link--active
|
||||
text-decoration: none
|
||||
|
||||
@media (min-width: 769px) and (min-height: 501px)
|
||||
background-color: var(--color-lightwhite) !important
|
||||
color: var(--color-dark) !important
|
||||
background-color: var(--color-lightwhite) !important
|
||||
color: var(--color-dark) !important
|
||||
|
||||
|
||||
// list item
|
||||
@ -216,20 +199,14 @@
|
||||
position: relative
|
||||
transition: background-color .1s ease
|
||||
|
||||
&:not(.navbar__list-item--favorite) + .navbar__list-item--lang-wrapper
|
||||
margin-left: 12px
|
||||
|
||||
&:not(.navbar__list-item--favorite) + .navbar__list-item
|
||||
& + .navbar__list-item
|
||||
margin-left: 12px
|
||||
|
||||
@media (max-width: 500px)
|
||||
.navbar__list-item
|
||||
min-width: 60px
|
||||
|
||||
&:not(.navbar__list-item--favorite) + .navbar__list-item
|
||||
margin-left: 0
|
||||
|
||||
&:not(.navbar__list-item--favorite) + .navbar__list-item--lang-wrapper
|
||||
& + .navbar__list-item
|
||||
margin-left: 0
|
||||
|
||||
// "Favorites" list item, only visible on small screens and logged in
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
##{containerIdent}-radio:checked ~ * ##{containerIdent}-container
|
||||
visibility: visible
|
||||
margin: 14px 0 0 0
|
||||
height: 30px
|
||||
|
||||
@media (min-width: 769px) and (min-height: 501px)
|
||||
##{containerIdent}-radio:checked ~ * ##{containerIdent}-container
|
||||
margin: 14px 0 0 0
|
||||
|
||||
##{containerIdent}-radio:checked ~ * ##{containerIdent}
|
||||
background-color: var(--color-dark)
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
$newline never
|
||||
<div .navbar-container>
|
||||
<div .navbar-shadow>
|
||||
<nav .navbar>
|
||||
<div .navbar__list-wrapper>
|
||||
<ul .navbar__list.navbar__list-left>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user