hubl/src/styles/main.scss

294 lines
4.3 KiB
SCSS
Raw Normal View History

2018-09-28 19:20:15 +00:00
@import 'variables';
[hidden] {
display: none !important;
}
2018-10-31 09:38:41 +00:00
*,
2018-11-17 17:01:19 +00:00
*::after,
*::before {
// box-sizing: inherit;
2018-10-19 18:36:16 +00:00
}
2018-09-28 19:20:15 +00:00
html {
2018-11-16 10:33:39 +00:00
//box-sizing: border-box;
2018-09-28 19:20:15 +00:00
font-family: Open Sans, sans-serif;
font-size: 13px;
background-color: $color-grey-light;
2018-09-29 00:22:00 +00:00
color: $color-grey;
2018-09-28 19:20:15 +00:00
}
2018-11-16 10:33:39 +00:00
// body {
// height: 100%;
// display:flex;
// flex-direction: column;
// }
2018-10-05 09:37:48 +00:00
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-black;
font-weight: 600;
2018-10-18 18:06:43 +00:00
padding: 0;
2018-10-05 09:37:48 +00:00
margin: 0.67em 0;
2018-11-17 17:01:19 +00:00
2018-10-05 09:37:48 +00:00
span {
font-weight: 400;
padding-left: 0.5em;
2018-11-17 17:01:19 +00:00
2018-10-05 09:37:48 +00:00
&:before {
content: '// ';
}
}
}
h1 {
2018-10-31 09:38:41 +00:00
font-size: 1.24em;
2018-10-05 09:37:48 +00:00
}
2018-11-17 17:01:19 +00:00
2018-12-12 11:20:32 +00:00
h2 { font-size: 20px;
2018-10-05 09:37:48 +00:00
}
2018-11-17 17:01:19 +00:00
2018-10-05 09:37:48 +00:00
h3 {
2018-11-17 17:01:19 +00:00
font-size: 0.84em;
2018-10-31 09:38:41 +00:00
}
2018-11-17 17:01:19 +00:00
2018-10-31 09:38:41 +00:00
h4 {
font-size: 0.68em;
2018-10-05 09:37:48 +00:00
}
.debug {
outline: 2px dotted red;
}
2018-10-31 09:38:41 +00:00
.frame {
@extend %frame;
padding: 1em;
}
2018-09-28 19:20:15 +00:00
2018-12-06 18:47:32 +00:00
.menu-notification {
//flex-basis: 3em;
2018-12-06 18:50:33 +00:00
align-items: center;
2018-12-06 18:47:32 +00:00
display: flex;
flex-direction: column;
2018-12-06 18:50:33 +00:00
flex-grow: 0;
flex-shrink: 0;
2018-12-06 18:47:32 +00:00
justify-content: center;
2018-12-06 18:50:33 +00:00
width: 2em;
2018-12-06 18:47:32 +00:00
> div {
2018-12-06 18:50:33 +00:00
align-items: center;
background-color: $color-yellow-light;
border-radius: 100%;
2018-12-06 18:47:32 +00:00
color: $color-black;
display: flex;
2018-12-06 18:50:33 +00:00
font-size: 12px;
height: 1.7em;
2018-12-06 18:47:32 +00:00
justify-content: center;
width: 1.7em;
}
}
2018-11-17 17:01:19 +00:00
.layer {
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
display: flex;
2018-11-16 10:33:39 +00:00
flex-direction: column;
align-items: stretch;
overflow-x: hidden;
}
2018-09-28 19:20:15 +00:00
#subContainer {
display: flex;
2018-11-16 10:33:39 +00:00
flex-grow: 1;
align-items: stretch;
overflow: hidden;
2018-09-28 19:20:15 +00:00
}
#mainContainer {
2018-11-16 10:33:39 +00:00
flex-grow: 1;
flex-shrink: 1;
overflow-y: auto;
2018-09-28 19:20:15 +00:00
}
2018-10-08 08:49:31 +00:00
.limiter {
2018-10-05 09:37:48 +00:00
display: block;
max-width: 650px;
2018-09-29 00:22:00 +00:00
}
2018-10-05 09:37:48 +00:00
/* sub menu (right menu) */
#mainContainer {
2018-10-05 09:37:48 +00:00
display: flex;
> div {
flex-grow: 1;
2018-11-20 15:28:00 +00:00
display: flex;
flex-direction: row-reverse;
align-items: stretch;
> sib-router {
font-family: monospace;
color: $color-black;
background-color: $color-grey-light2;
display: flex;
flex-direction: column;
sib-route {
cursor: pointer;
> div {
position: relative;
padding: 1.5em 3em;
border-bottom: 1px solid $color-grey;
}
2018-11-17 17:01:19 +00:00
&:hover {
background-color: $color-grey;
}
2018-11-17 17:01:19 +00:00
&[active] {
font-weight: bold;
background-color: $color-black;
color: $color-yellow;
2018-11-17 17:01:19 +00:00
> div:before {
opacity: 1;
transform: translateX(-150%);
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
2018-10-08 08:49:31 +00:00
}
2018-11-17 17:01:19 +00:00
> div {
@include icon(arrow-left);
2018-11-17 17:01:19 +00:00
&:before {
position: absolute;
transform: translateX(-50%);
opacity: 0;
}
2018-10-05 09:37:48 +00:00
}
}
}
2018-11-17 17:01:19 +00:00
> div {
//display: flex;
//margin: 2.6em;
padding:2.6em;
//flex: 1 1 0;
flex-grow: 1;
}
2018-09-29 00:22:00 +00:00
}
}
2018-10-05 09:37:48 +00:00
#search-bar > div {
position: relative;
2018-09-29 00:22:00 +00:00
}
2018-10-05 09:37:48 +00:00
#search-icon {
2018-12-06 11:31:33 +00:00
-webkit-text-stroke: 1px $color-grey-light4;
color: $color-grey-light4;
2018-10-05 09:37:48 +00:00
pointer-events: none;
2018-09-29 00:22:00 +00:00
}
2018-11-17 17:01:19 +00:00
#close-search-icon,
#search-icon {
2018-10-05 09:37:48 +00:00
position: absolute;
2018-12-06 11:39:59 +00:00
right: 0.8em;
2018-10-05 09:37:48 +00:00
top: 50%;
transform: translateY(-50%);
margin: auto;
display: block;
2018-12-06 11:39:59 +00:00
font-size: 1.2em;
2018-10-05 09:37:48 +00:00
}
2018-11-17 17:01:19 +00:00
2018-10-05 09:37:48 +00:00
#search-input {
-webkit-appearance: textfield;
border-radius: 10em;
padding: 0.4em 0.8em;
2018-12-06 11:31:33 +00:00
border: 1px solid $color-grey-light4;
height: 2.8rem;
width: 22rem;
2018-11-17 17:01:19 +00:00
2018-10-05 09:37:48 +00:00
& ~ #close-search-icon {
opacity: 0;
}
2018-11-17 17:01:19 +00:00
2018-10-05 09:37:48 +00:00
&:focus {
& ~ #close-search-icon {
opacity: 1;
}
2018-11-17 17:01:19 +00:00
2018-10-05 09:37:48 +00:00
& ~ #search-icon {
visibility: hidden;
}
}
}
2018-10-08 08:49:31 +00:00
sib-route,
sib-trigger {
cursor: pointer;
}
2018-10-05 09:37:48 +00:00
sib-trigger.back {
display: block;
@include icon('arrow-left');
@extend h1;
}
2018-11-17 17:01:19 +00:00
.containerH {
display: flex;
2018-11-19 18:45:42 +00:00
flex-wrap: wrap;
2018-11-17 17:01:19 +00:00
}
.containerV {
display: flex;
flex-direction: column;
align-items: stretch;
}
.grow {
flex-grow: 1;
flex-shrink: 1;
}
.fix {
flex-grow: 0;
flex-shrink: 0;
}
.containerCenter {
justify-content: center;
align-items: center;
}
2018-11-19 18:45:42 +00:00
.reverse {
2018-11-19 18:45:42 +00:00
flex-direction: row-reverse;
}
.scrollY {
overflow-y: auto;
}
.grid-layer{
display: grid;
2018-12-09 18:56:56 +00:00
font-size: 16px;
2018-12-09 14:42:12 +00:00
grid-template-columns: [start]auto[middle]25%[end];
2018-12-09 18:56:56 +00:00
grid-template-rows: [start]13em[middle]auto[end];
}
2018-12-11 12:42:53 +00:00
.grid-layer-main {
grid-column-start: start;
grid-column-end: end;
grid-row-start: start;
grid-row-end: end;
}
2018-12-11 12:42:53 +00:00
.grid-layer-links {
grid-column-start: middle;
grid-column-end: end;
grid-row-start: start;
grid-row-end: middle;
}