mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
Ulf Gebhardt
6fe5fd6d7e
git-subtree-dir: community_server git-subtree-mainline: ff11f6efe35bba180260fe84077bcd94298895c1 git-subtree-split: b6544b9e69fb85d4da100934675323c3e8c8ef67
114 lines
2.3 KiB
Plaintext
114 lines
2.3 KiB
Plaintext
/* ============================================================
|
|
|
|
Grid Layout Page
|
|
|
|
Datei : layout.less
|
|
Datum : 2020-04-30
|
|
Autor : Christine Slotty
|
|
Copyright : Gradio
|
|
|
|
============================================================*/
|
|
|
|
/*====================================
|
|
= BREAK POINTS =
|
|
====================================*/
|
|
|
|
/* https://scotch.io/courses/getting-started-with-less/responsive-and-media-queries */
|
|
@wide-screen-down: ~'(max-width:1199px)';
|
|
@desktop-down: ~'(max-width:991px)';
|
|
@tablet-down: ~'(max-width:767px)';
|
|
@phone-down: ~'(max-width:480px)';
|
|
@small-phone-down: ~'(max-width:320px)';
|
|
|
|
/* GRID */
|
|
.layout {
|
|
display: grid;
|
|
grid-template-rows: [top] 8vh [line2] 86vh [footer1] 3vh [footer2] 5vh [end];
|
|
grid-template-columns: [left1] auto [left2] 1fr [left3] 12fr [right3] 1fr [right2] auto [right1];
|
|
grid-template-areas: "header header header header header"
|
|
"left . center center ."
|
|
"footer footer footer footer footer"
|
|
"bottom bottom bottom bottom bottom";
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
@media @wide-screen-down {
|
|
.layout {
|
|
grid-template-areas: "header header header header header"
|
|
"left . center center center"
|
|
"footer footer footer footer footer"
|
|
"bottom bottom bottom bottom bottom";
|
|
}
|
|
|
|
}
|
|
|
|
@media @tablet-down {
|
|
.layout {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-rows: [top] 12vh [line2] 80vh [footer1] 3vh [footer2] 8vh [end];
|
|
grid-template-columns: [left1] 100vw [right1];
|
|
grid-template-areas: "header"
|
|
"center"
|
|
"footer"
|
|
"bottom";
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
}
|
|
|
|
.header-notify {
|
|
grid-area: header;
|
|
grid-column-start: right3;
|
|
grid-column-end: right2;
|
|
}
|
|
|
|
.header-user {
|
|
grid-area: header;
|
|
grid-column-start: right2;
|
|
grid-column-end: right1;
|
|
}
|
|
|
|
.sidebar1 {
|
|
grid-area: left;
|
|
grid-row-start: top;
|
|
grid-row-end: end;
|
|
}
|
|
|
|
@media @tablet-down {
|
|
.sidebar1 {
|
|
position: relative;
|
|
grid-area: header;
|
|
z-index: 2;
|
|
top: -300px;
|
|
right: 0px;
|
|
}
|
|
|
|
.header-user,
|
|
.header-notify {
|
|
grid-area: header;
|
|
}
|
|
|
|
}
|
|
|
|
.center-form-single,
|
|
.content {
|
|
grid-area: center;
|
|
grid-row-start: line2;
|
|
grid-row-end: footer1;
|
|
}
|
|
|
|
.footer {
|
|
grid-area: footer;
|
|
grid-row-start: footer1;
|
|
grid-row-end: footer2;
|
|
}
|
|
|
|
.nav-bottom {
|
|
grid-area: bottom;
|
|
grid-row-start: footer2;
|
|
grid-row-end: end;
|
|
}
|