diff --git a/static/sass/components/_mixins.scss b/static/sass/components/_mixins.scss new file mode 100644 index 00000000..dc1a95d3 --- /dev/null +++ b/static/sass/components/_mixins.scss @@ -0,0 +1,16 @@ +@mixin clearfix() { + &:before, + &:after { + content: " "; // 1 + display: table; // 2 + } + &:after { + clear: both; + } +} + +@mixin text-overflow() { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/static/sass/components/_variables.scss b/static/sass/components/_variables.scss index 4c59c127..e40d9652 100644 --- a/static/sass/components/_variables.scss +++ b/static/sass/components/_variables.scss @@ -34,11 +34,11 @@ // 1. Colors // ========================================================================== -$primary-color: color("materialize-red", "lighten-2") !default; +$primary-color: color("grey", "darken-4") !default; $primary-color-light: lighten($primary-color, 15%) !default; $primary-color-dark: darken($primary-color, 15%) !default; -$secondary-color: color("teal", "lighten-1") !default; +$secondary-color: color("blue", "darken-4") !default; $success-color: color("green", "base") !default; $error-color: color("red", "base") !default; $link-color: color("light-blue", "darken-1") !default; diff --git a/static/sass/main.scss b/static/sass/main.scss deleted file mode 100644 index cc102c43..00000000 --- a/static/sass/main.scss +++ /dev/null @@ -1,42 +0,0 @@ -@charset "UTF-8"; -//@import "materialize"; - -// Mixins -@import "components/color-classes"; -@import "components/color-variables"; - -// Variables -@import "components/variables"; -@import "components/normalize"; - -// components -@import "components/global"; - -@import "components/badges"; -@import "components/icons-material-design"; -@import "components/grid"; -@import "components/navbar"; -//@import "materialize/components/roboto"; -//@import "materialize/components/typography"; -//@import "materialize/components/transitions"; -//@import "materialize/components/cards"; -//@import "materialize/components/toast"; -//@import "materialize/components/tabs"; -//@import "materialize/components/tooltip"; -//@import "materialize/components/buttons"; -//@import "materialize/components/dropdown"; -//@import "materialize/components/waves"; -//@import "materialize/components/modal"; -//@import "materialize/components/collapsible"; -//@import "materialize/components/chips"; -//@import "materialize/components/materialbox"; -//@import "materialize/components/forms/forms"; -//@import "materialize/components/table_of_contents"; -//@import "materialize/components/sideNav"; -//@import "materialize/components/preloader"; -//@import "materialize/components/slider"; -//@import "materialize/components/carousel"; -//@import "materialize/components/date_picker/default"; -//@import "materialize/components/date_picker/default.date"; -//@import "materialize/components/date_picker/default.time"; - diff --git a/static/sass/materialize.scss b/static/sass/materialize.scss index 37c64290..b7829557 100644 --- a/static/sass/materialize.scss +++ b/static/sass/materialize.scss @@ -11,6 +11,7 @@ @import "components/normalize"; // components +@import "components/mixins"; @import "components/global"; @import "components/badges"; @import "components/icons-material-design"; @@ -40,10 +41,98 @@ @import "components/datepicker"; @import "components/timepicker"; +#full-div { + //width: 100vw; + height: 90vh; +} + + .container { width: 80% !important; } .nav-wrapper { padding: 0 10%; +} + +nav { + >div>ul>li>a { + color: #aaa; + } +} + +.panel { + background-color: color('grey', 'lighten-5'); + border: 1px solid $primary-color; + border-radius: 4px; +} + +.panel-heading { + color: white; + background-color: $primary-color; + border-color: #bce8f1; + + padding: 10px 15px; + border-bottom: 1px solid transparent; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} + +.panel-body { + padding: 15px; + + &.quick-actions { + >:last-child{ + margin-bottom: 0 !important; + } + >:first-child { + margin-top: 0 !important; + } + } +} + +dt { + font-weight: bold; +} + +$dl-horizontal-breakpoint: 768px; +$dl-horizontal-offset: 160px !default; + +.dl-horizontal { + dd { + @include clearfix; // Clear the floated `dt` if an empty `dd` is present + } + + @media (min-width: $dl-horizontal-breakpoint) { + dt { + float: left; + width: ($dl-horizontal-offset - 20); + clear: left; + text-align: right; + @include text-overflow; + } + dd { + margin-left: $dl-horizontal-offset; + } + } +} + +.button-group { + >button { + display: inline-block; + } +} + +.no-pad { + padding: 0 !important; +} + +.bold-text { + font-weight: bold; +} + +.disabled_input { + color: rgba(0, 0, 0, 0.42); + border-bottom: 1px dotted rgba(0, 0, 0, 0.42) !important; + cursor: default; } \ No newline at end of file