Mercurial > gemma
annotate client/src/application/assets/application.scss @ 630:855cca0142ec
refac: Usermanagement now flexible sidebar layout
In order to prevent overlapping of sidebar and content
a spacer is for a small viewport width added and collapsed
accordingly to the sidebar.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 12 Sep 2018 16:11:05 +0200 |
parents | 8278b2fb0c33 |
children | f2097d2aa048 |
rev | line source |
---|---|
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
1 $offset: 1rem; |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
2 $small-offset: 0.5rem; |
629
8278b2fb0c33
refac: UI refactorization
Thomas Junk <thomas.junk@intevation.de>
parents:
621
diff
changeset
|
3 $x-small-offset: 0.25rem; |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
4 $large-offset: 2rem; |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
5 $x-large-offset: 3rem; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
6 $basic-shadow: 1px 3px 8px 2px rgba(220, 220, 220, 0.75); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
7 $basic-shadow-light: 1px 1px 12px 1px rgba(235, 235, 235, 0.75); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
8 $transition: 0.5s; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
9 $transition-fast: 0.1s; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
10 $transition-slow: 3s; |
629
8278b2fb0c33
refac: UI refactorization
Thomas Junk <thomas.junk@intevation.de>
parents:
621
diff
changeset
|
11 $smaller: 0.9rem; |
8278b2fb0c33
refac: UI refactorization
Thomas Junk <thomas.junk@intevation.de>
parents:
621
diff
changeset
|
12 $border-radius: 5px; |
630
855cca0142ec
refac: Usermanagement now flexible sidebar layout
Thomas Junk <thomas.junk@intevation.de>
parents:
629
diff
changeset
|
13 $sidebar-width: 15rem; |
855cca0142ec
refac: Usermanagement now flexible sidebar layout
Thomas Junk <thomas.junk@intevation.de>
parents:
629
diff
changeset
|
14 $sidebar-height: 13rem; |
855cca0142ec
refac: Usermanagement now flexible sidebar layout
Thomas Junk <thomas.junk@intevation.de>
parents:
629
diff
changeset
|
15 $icon-height: 3rem; |
855cca0142ec
refac: Usermanagement now flexible sidebar layout
Thomas Junk <thomas.junk@intevation.de>
parents:
629
diff
changeset
|
16 $icon-width: 3rem; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
17 |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
18 .debug { |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
19 border: 1px solid red; |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
20 } |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
21 |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
22 %fully-centered { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
23 position: absolute; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
24 top: 50%; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
25 left: 50%; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
26 transform: translate(-50%, -50%); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
27 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
28 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
29 .ui-element { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
30 pointer-events: auto; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
31 } |