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

74 lines
1.5 KiB
SCSS
Raw Normal View History

2020-04-02 20:50:48 +08:00
// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
2020-02-13 20:50:29 +08:00
.dashboard-container {
--dashboard-widgets-gap: 30px;
2020-04-02 20:50:48 +08:00
--widget-header-size: 44px;
2020-02-13 20:50:29 +08:00
display: grid;
grid-column-gap: var(--dashboard-widgets-gap);
grid-row-gap: var(--dashboard-widgets-gap);
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
min-height: calc(100vh - 51px);
padding: var(--dashboard-widgets-gap) calc(var(--dashboard-widgets-gap) - 15px);
width: 100%;
.basic-widget {
border-radius: $border-radius-modal;
box-shadow: $flyout-shadow;
position: relative;
.widget-header {
align-items: center;
border-bottom: $border-tertiary;
display: flex;
height: var(--widget-header-size);
padding-left: 16px;
.widget-title {
@include font-h2;
}
}
.widget-body {
height: calc(100% - var(--widget-header-size));
position: absolute;
width: 100%;
2020-03-12 22:00:14 +08:00
.widget-placeholder {
color: $color-alto;
padding: 24px;
.widget-placeholder-title {
@include font-h1;
}
.widget-placeholder-description {
@include font-main;
}
}
}
2020-02-13 20:50:29 +08:00
}
}
@media (max-width: 1300px) {
.dashboard-container {
--dashboard-widgets-gap: 16px;
}
}
2020-04-02 20:50:48 +08:00
@media (max-width: 700px) {
.dashboard-container {
--widget-header-size: 72px;
grid-template-rows: auto;
.widget-header {
flex-wrap: wrap;
.sci-secondary-navbar {
height: 36px;
}
}
}
}