hypothetical/resources/assets/sass/dashboard.scss

675 lines
17 KiB
SCSS
Vendored

// Libraries
@import "bootstrap-sass/assets/stylesheets/_bootstrap.scss";
@import "pickadate/lib/themes/default";
@import "pickadate/lib/themes/default.date";
@import "simplemde/dist/simplemde.min";
@import "SpinKit/css/spinners/11-folding-cube";
// Core
@import "_fonts";
// Colours
$c-text: #111; // text
$c-text-light: #fff; // light text
$c-input-bg: #fff; // white
$c-dashboard-dark: #3e6087;
$c-dashboard-light: #f1f1f1;
$c-dashboard-edit: #87823e;
$c-dashboard-delete: #87483e;
//
// Main Dashboard Styles
//
* {
outline: none !important;
}
body {
@include font-sans;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-overflow-scrolling: touch;
}
.navbar {
border: 0;
background-color: $c-dashboard-dark;
@media (max-width: $screen-xs-max) {
margin-bottom: 0px;
}
&-header {
height: $navbar-height;
}
&-brand {
overflow: hidden;
max-width: calc(100vw - 60px);
font-weight: bold;
white-space: nowrap;
@media (max-width: $screen-xs-max) {
font-size: 12px;
}
}
#spark-navbar-collapse {
border: 0;
box-shadow: none;
.dropdown {
.dropdown-toggle .caret {
margin-left: 4px;
}
&.open .dropdown-toggle {
background-color: darken($c-dashboard-dark, 5%);
color: $c-dashboard-light;
}
.dropdown-menu {
top: calc(100% - 1px);
right: -1px;
background-color: $c-dashboard-dark;
> li > a:hover, > li > a:focus {
background-color: transparent;
}
> li > a {
&, &:hover, &:focus {
color: #fff;
}
}
}
}
}
.navbar-brand, .navbar-default .navbar-nav > li > a, .navbar-nav > li > a {
&, &:hover, &:focus {
color: $c-dashboard-light;
}
}
.navbar-toggle {
position: absolute;
top: 6px;
right: 8px;
margin: 0px;
border: 0;
&, &:hover, &:focus {
background-color: transparent;
}
.icon-bar {
width: 27px;
height: 4px;
background-color: $c-dashboard-light;
transition: background-color 100ms;
}
&:hover .icon-bar {
background-color: darken($c-dashboard-dark, 15%);
}
}
}
.panel-default {
margin-top: 20px;
margin-bottom: 20px;
.panel-body {
background-color: lighten($c-dashboard-light, 1%);
&.dashboard {
@media (max-width: $screen-xs-max) {
padding: 0px;
}
}
.search {
margin-bottom: 10px;
width: 100%;
@media (max-width: $screen-xs-max) {
margin: 3px 3px 0px 3px;
width: calc(100% - 6px);
}
}
.help-text {
margin-top: 10px;
margin-bottom: 10px;
padding: 5px 10px;
border: 1px solid darken($c-dashboard-dark, 5%);
border-radius: 5px;
background-color: $c-dashboard-dark;
color: $c-text-light;
}
}
> .panel-heading {
position: relative;
border-top: 1px solid darken($c-dashboard-dark, 5%);
border-right: 1px solid darken($c-dashboard-dark, 5%);
border-left: 1px solid darken($c-dashboard-dark, 5%);
background-color: $c-dashboard-dark;
color: $c-dashboard-light;
font-weight: bold;
.dashboard-heading {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
.btn {
min-width: 70px;
height: 26px;
padding-top: 1px;
padding-bottom: 2px;
}
a {
color: $c-text;
text-decoration: none;
}
}
}
}
.form-control:focus {
border-color: $c-dashboard-dark;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px fade-out($c-dashboard-dark, 0.4);
}
.panel-body .form-group .checkbox {
position: relative;
display: inline-block;
min-height: 0px;
padding-top: 0px;
padding-left: 22px;
user-select: none;
span, input {
position: absolute;
top: 50%;
left: 0px;
transform: translateY(-50%);
display: block;
width: 16px;
height: 16px;
}
span {
border: 1px solid lighten($c-text, 50%);
border-radius: 4px;
background-color: $c-input-bg;
pointer-events: none;
&:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
transform: scale(0);
display: block;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOC4zOTUgMjUuNDczIj48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMy44NzYgODIuNzY0IC0xNy40NDYpIiBmaWxsPSIjMDAwMDAxIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPjxyZWN0IHJ5PSIwIiB5PSI1MS4xMDgiIHg9IjMyLjk5NyIgaGVpZ2h0PSI1LjY1NSIgd2lkdGg9IjE2LjA4NSIgc3Ryb2tlLXdpZHRoPSIuMTE4Ii8+PHJlY3QgdHJhbnNmb3JtPSJyb3RhdGUoOTApIiByeT0iMCIgeT0iLTQ5LjA3NyIgeD0iMzAuMDg2IiBoZWlnaHQ9IjUuNjQ2IiB3aWR0aD0iMjAuOTQ3IiBzdHJva2Utd2lkdGg9Ii4xMzQiLz48L2c+PC9zdmc+");
background-position: center center;
background-size: 65% auto;
background-repeat: no-repeat;
opacity: 0;
transition: transform 150ms, opacity 150ms;
}
}
input {
margin: 0px;
padding: 0px;
opacity: 0;
cursor: pointer;
&:checked + span:after {
transform: scale(1);
opacity: 1;
}
}
}
.btn {
border-color: darken($c-dashboard-dark, 5%);
background-color: $c-dashboard-dark;
transition: background-color 100ms;
&:hover { background-color: darken($c-dashboard-dark, 5%); }
&:focus { background-color: lighten($c-dashboard-dark, 5%); }
&.vertical-margin {
margin-top: 3px;
margin-bottom: 3px;
}
&.btn-warning {
border-color: darken($c-dashboard-edit, 10%);
background-color: $c-dashboard-edit;
&:hover { background-color: darken($c-dashboard-edit, 5%); }
&:focus { background-color: lighten($c-dashboard-edit, 5%); }
}
&.btn-danger {
border-color: darken($c-dashboard-delete, 10%);
background-color: $c-dashboard-delete;
&:hover { background-color: darken($c-dashboard-delete, 5%); }
&:focus { background-color: lighten($c-dashboard-delete, 5%); }
}
&.btn-default {
border-color: darken($c-dashboard-light, 10%);
background-color: $c-dashboard-light;
color: $c-text;
&:hover { background-color: darken($c-dashboard-light, 5%); }
&:focus { background-color: lighten($c-dashboard-light, 5%); }
}
&.btn-link { color: $c-dashboard-light; }
&, &:hover, &:focus { text-decoration: none; }
}
.view-table-container {
@media (max-width: $screen-xs-max) {
padding: 10px 5px;
}
.table {
margin-bottom: 0px;
> thead > tr > th {
border-bottom: 1px solid #666;
}
@media (max-width: $screen-md-max) {
tr {
&.heading-row {
display: none;
}
&:not(:first-child) {
border-top: 1px solid #ddd;
}
}
> tbody > tr {
> td {
display: block;
border-top: 0;
&:first-child {
padding-top: 20px;
}
&:last-child {
padding-bottom: 20px;
}
}
&:first-child > td:first-child {
padding-top: 0px;
}
&:last-child > td:last-child {
padding-bottom: 0px;
}
}
}
@media (min-width: $screen-lg-min) {
> tbody > tr > td { padding: 20px 8px; }
> tbody > tr:last-child > td { padding-bottom: 0px; }
.mobile-heading { display: none; }
}
}
}
.list-group {
margin-bottom: 0px;
&.menu-list .list-group-item {
position: relative;
padding: 10px 15px;
&-link {
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 100%;
height: 100%;
background-color: transparent;
color: $c-text;
transition: background-color 150ms;
&:hover {
background-color: fade-out(#000, 0.97);
text-decoration: none;
}
}
}
&.edit-list {
.list-group-item {
padding-top: 4px;
padding-bottom: 4px;
@media (max-width: $screen-xs-max) {
margin: 3px;
}
@media (min-width: $screen-sm-min) {
display: flex;
}
&.sortable {
@media (max-width: $screen-xs-max) {
padding-left: 50px;
}
}
.title-column {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 0px;
font-family: "Lucida Console", Monaco, monospace;
@media (max-width: $screen-xs-max) {
text-align: center;
}
@media (min-width: $screen-sm-min) {
overflow: hidden;
flex-grow: 1;
white-space: nowrap;
}
.sort-icon {
margin-right: 10px;
display: inline-block;
opacity: 1;
transition: opacity 100ms;
cursor: grab;
@media (max-width: $screen-xs-max) {
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
}
&-inner {
position: relative;
top: 2px;
display: inline-block;
width: 12px;
height: 14px;
&-bar {
position: absolute;
left: 0px;
width: 100%;
height: 2px;
background-color: $c-text;
&:nth-child(1) {
top: 2px;
}
&:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
&:nth-child(3) {
bottom: 2px;
}
}
}
}
.column {
display: inline-block;
}
.spacer {
@media (max-width: $screen-xs-max) {
display: block;
font-size: 0;
}
@media (min-width: $screen-sm-min) {
display: inline-block;
}
}
}
.button-column {
padding-right: 0px;
@media (max-width: $screen-xs-max) {
padding-bottom: 5px;
padding-left: 0px;
text-align: center;
}
@media (min-width: $screen-sm-min) {
padding-left: 5px;
flex-shrink: 0;
text-align: right;
}
.btn {
margin: 3px;
min-width: 70px;
height: 26px;
padding-top: 1px;
padding-bottom: 2px;
@media (max-width: $screen-xs-max) {
min-width: 33%;
}
}
}
}
&.filtered .list-group-item .title-column .sort-icon {
opacity: 0.5;
pointer-events: none;
}
}
}
.edit-item {
margin-top: 10px;
.CodeMirror {
height: 300px;
padding: 5px;
&-code {
margin-bottom: 10px;
}
}
.picker__holder {
overflow-y: hidden;
.picker__button--today {
white-space: nowrap;
}
.picker__select--year, .picker__select--month, .picker__month, .picker__day, .picker__weekday, .picker__footer {
@media (max-width: $screen-xs-max) {
font-size: 16px;
}
}
.picker__select--year, .picker__select--month {
width: auto;
height: 1.5em;
padding: 0px;
}
}
label {
height: 32px;
line-height: 32px;
}
input {
margin-bottom: 15px;
display: block;
width: 100%;
&:not([type="file"]) {
padding: 5px 8px;
border: 1px solid darken($c-dashboard-light, 10%);
border-radius: 2px;
transition: border-color 150ms;
}
&.date-picker {
cursor: pointer;
}
}
.current-image {
margin-bottom: 15px;
display: block;
width: 125px;
max-width: 100%;
}
.edit-button {
margin-bottom: ($grid-gutter-width / 2);
display: inline-block;
padding: 5px 10px;
border-radius: 5px;
text-transform: uppercase;
transition: background-color 150ms;
cursor: pointer;
&:hover, &:focus {
text-decoration: none;
}
&.view {
border: 1px solid darken($c-dashboard-dark, 5%);
background-color: $c-dashboard-dark;
color: $c-text-light;
&:hover {
background-color: lighten($c-dashboard-dark, 5%);
}
}
&.delete {
border: 1px solid darken($c-dashboard-delete, 5%);
background-color: $c-dashboard-delete;
color: $c-text-light;
&:hover {
background-color: lighten($c-dashboard-delete, 5%);
}
}
}
.back-button {
float: left;
}
.submit-button {
float: right;
&.disabled {
pointer-events: none;
}
}
.back-button, .submit-button {
margin: 25px 15px 15px 15px;
@media (max-width: ($screen-sm - 1)) {
float: none;
width: calc(100% - 30px);
&:first-child { margin: 25px 15px 5px 15px; }
&:last-child { margin: 5px 15px 25px 15px; }
}
}
}
#loading-modal {
z-index: 1000;
position: fixed;
top: 0px;
left: 0px;
visibility: hidden;
width: 100%;
height: 100%;
background-color: fade-out(lighten($c-dashboard-light, 1%), 0.6);
opacity: 0;
transition: opacity 250ms;
.spinner-container {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
.modal {
z-index: 1000;
position: fixed;
top: 0px;
left: 0px;
visibility: hidden;
display: table;
width: 100%;
height: 100%;
background-color: fade-out(lighten($c-dashboard-light, 1%), 0.6);
opacity: 0;
transition: opacity 250ms;
.modal-container {
display: table-cell;
vertical-align: middle;
text-align: center;
.panel { margin: 0px; }
.btn {
margin: 20px 15px;
display: inline-block;
}
}
&#alert-modal {
.modal-container {
.panel { position: relative; }
.message {
min-height: 50px;
padding: 15px 106px 10px 20px;
text-align: left;
}
.btn {
position: absolute;
top: 50%;
right: 0px;
transform: translateY(-50%);
}
}
}
}