scinote-web/app/assets/stylesheets/dashboard/show.scss

148 lines
2.5 KiB
SCSS
Raw Normal View History

2020-04-02 20:50:48 +08:00
// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
2020-10-02 20:49:08 +08:00
.dashboard-background {
background: $color-concrete;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
.dashboard-view {
2020-02-13 20:50:29 +08:00
--dashboard-widgets-gap: 30px;
2021-02-15 19:40:26 +08:00
padding: 15px
var(--dashboard-widgets-gap)
15px
2020-10-02 20:49:08 +08:00
var(--dashboard-widgets-gap);
}
.dashboard-header {
2021-02-15 19:40:26 +08:00
padding-bottom: 15px;
2020-10-02 20:49:08 +08:00
}
.dashboard-container {
2020-04-02 20:50:48 +08:00
--widget-header-size: 44px;
2020-02-13 20:50:29 +08:00
display: grid;
2021-02-15 19:40:26 +08:00
grid-auto-rows: 26em;
2020-02-13 20:50:29 +08:00
grid-column-gap: var(--dashboard-widgets-gap);
grid-row-gap: var(--dashboard-widgets-gap);
2020-10-02 20:49:08 +08:00
grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));
2020-02-13 20:50:29 +08:00
width: 100%;
.basic-widget {
2020-10-02 20:49:08 +08:00
background: $color-white;
2020-02-13 20:50:29 +08:00
border-radius: $border-radius-modal;
box-shadow: $flyout-shadow;
position: relative;
2020-10-02 20:49:08 +08:00
&.large-widget {
grid-column: auto / 9 span;
}
&.medium-widget {
grid-column: auto / 6 span;
}
&.small-widget {
grid-column: auto / 3 span;
}
.widget-header {
align-items: center;
border-bottom: $border-tertiary;
display: flex;
height: var(--widget-header-size);
padding-left: 16px;
.widget-title {
@include font-h2;
2020-10-02 20:49:08 +08:00
flex-shrink: 0;
}
}
.widget-body {
height: calc(100% - var(--widget-header-size));
position: absolute;
width: 100%;
2020-03-12 22:00:14 +08:00
.widget-placeholder {
padding: 24px;
.widget-placeholder-title {
@include font-h1;
}
.widget-placeholder-description {
@include font-main;
2020-11-12 19:49:00 +08:00
color: $color-alto;
2020-03-12 22:00:14 +08:00
}
}
}
2020-02-13 20:50:29 +08:00
}
}
.quick-start-buttons {
display: flex;
.btn {
margin-right: .25em;
}
}
2020-10-02 20:49:08 +08:00
@media (max-width: 1100px) {
.dashboard-container {
--dashboard-widgets-gap: 15px;
grid-template-columns: 100%;
.basic-widget {
&.large-widget,
&.medium-widget,
&.small-widget {
grid-column: auto / 1 span;
}
}
}
}
@media (max-height: 800px) {
.dashboard-container {
grid-auto-rows: 20em;
2020-10-02 20:49:08 +08:00
}
2021-02-15 19:40:26 +08:00
.dashboard-view {
--dashboard-widgets-gap: 15px;
}
2020-10-02 20:49:08 +08:00
}
@media (min-height: 1080px) {
2020-02-13 20:50:29 +08:00
.dashboard-container {
grid-auto-rows: 32em;
2020-02-13 20:50:29 +08:00
}
}
2020-04-02 20:50:48 +08:00
@media (max-width: 700px) {
2020-10-02 20:49:08 +08:00
2020-04-02 20:50:48 +08:00
.dashboard-container {
--widget-header-size: 72px;
2020-10-02 20:49:08 +08:00
.basic-widget {
&.large-widget,
&.medium-widget,
&.small-widget {
grid-column: 1 span;
}
}
2020-04-02 20:50:48 +08:00
.widget-header {
flex-wrap: wrap;
.sci-secondary-navbar {
height: 36px;
}
}
}
}