hypothetical/resources/assets/sass/dashboard.scss

437 lines
11 KiB
SCSS
Raw Normal View History

// Libraries
@import "bootstrap-sass/assets/stylesheets/_bootstrap.scss";
@import "fontawesome/scss/font-awesome.scss";
@import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.scss";
@import "datetimepicker/jquery.datetimepicker";
@import "simplemde/dist/simplemde.min";
@import "SpinKit/css/spinners/11-folding-cube";
// Core
@import "_var";
@import "_fonts";
// Fontawesome Path
$fa-font-path: "/fonts";
2016-08-19 00:33:12 -04:00
//
// Main Dashboard Styles
//
* {
outline: none !important;
}
body {
@include font-sans;
min-width: 320px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.navbar {
background-color: $c-dashboard-dark;
.navbar-brand {
font-weight: bold;
@media (max-width: $screen-xs-max) {
font-size: 14px;
}
}
#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: relative;
bottom: 0px;
left: 10px;
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: 40px;
.panel-body {
padding-bottom: 0px;
background-color: lighten($c-dashboard-light, 1%);
@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 {
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 {
float: right;
.btn {
position: relative;
bottom: 3px;
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);
}
.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%); }
&.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; }
}
.table {
> 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 {
&:first-child { padding-top: 20px; }
&:last-child { padding-bottom: 20px; }
}
> tbody > tr {
&:first-child > td:first-child { padding-top: 0px; }
&:last-child > td:last-child { padding-bottom: 0px; }
> td {
display: block;
border-top: 0;
}
}
}
@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;
padding-bottom: 15px;
&.linked-list {
margin-bottom: 0px;
.list-group-item {
padding: 0px;
a {
display: block;
padding: 10px 15px;
background-color: #fff;
color: $c-dashboard-dark;
transition: background-color 100ms, color 100ms;
&:focus, &:hover { text-decoration: none; }
&:hover {
background-color: $c-dashboard-dark;
color: $c-dashboard-light;
}
}
&:first-child a {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
&:last-child a {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
}
}
&.edit-list {
.list-group-item {
position: relative;
padding-top: 4px;
padding-bottom: 4px;
@media (max-width: $screen-xs-max) {
margin: 3px;
}
.sort-icon {
margin-right: 10px;
display: inline-block;
cursor: grab;
cursor: -webkit-grabbing;
}
.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;
.column {
margin-right: 3px;
display: inline-block;
&.spacer {
display: block;
font-size: 0;
}
}
}
@media (min-width: $screen-sm-min) {
&, .column {
float: left;
}
.column {
margin-right: 10px;
}
}
}
.button-column {
padding-right: 0px;
padding-left: 0px;
@media (max-width: $screen-xs-max) {
padding-bottom: 5px;
text-align: center;
}
@media (min-width: $screen-sm-min) {
float: right;
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%;
}
}
}
}
}
}
.edit-item {
margin-top: 10px;
.CodeMirror, .CodeMirror-scroll { min-height: 100px; }
.date-time-picker { cursor: pointer; }
label {
height: 32px;
line-height: 32px;
}
input {
margin-bottom: 15px;
display: block;
width: 100%;
}
.current-image {
width: 125px;
height: 125px;
background-position: left center;
background-size: contain;
background-repeat: no-repeat;
}
.back-button { float: left; }
.submit-button { float: right; }
.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%);
}
}
}
}