${titleHelpURL} @@ -376,7 +375,7 @@

@@ -398,40 +397,33 @@ -

- - - -

- -

- - - ${titleHelpURL} - -

- - - -

- - -

+ + + +

${title}

- - - - - - +

+ Index: lams_build/common.properties =================================================================== diff -u -r658fe82d333cc79e8956978a0956960f728a7ff8 -r32670937f259e2c8a712e1dd2cd6bb5731f466c9 --- lams_build/common.properties (.../common.properties) (revision 658fe82d333cc79e8956978a0956960f728a7ff8) +++ lams_build/common.properties (.../common.properties) (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -34,7 +34,7 @@ # SASS properties sometimes get altered in project's own properties file scss.common.variables=../lams_central/conf/scss/ scss.css.dir=${basedir}/web/css -css.minify=true +css.minify=false js.minify=true yuicompressor=../lams_build/lib/yuicompressor/yuicompressor-2.4.9.jar Index: lams_central/conf/scss/_lams_variables.scss =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r32670937f259e2c8a712e1dd2cd6bb5731f466c9 --- lams_central/conf/scss/_lams_variables.scss (.../_lams_variables.scss) (revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80) +++ lams_central/conf/scss/_lams_variables.scss (.../_lams_variables.scss) (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -1,32 +1,35 @@ // Import this file into all LAMS scss files to get the consistent definitions -@import "_bootstrap-variables.scss"; +//@import "_material-kit.scss"; +@import "material-kit/variables.scss"; @import "_mixins.scss"; - + // LAMS SASS Global Variables +$gray-base: $black; // changed name in Bootstrap 4 $gray-light-mid: lighten($gray-base, 86.5%); // #dddddd $gray-lightest: lighten($gray-base, 96%); // #f5f5f5 or whitesmoke - +// // Primary colour shades -$brand-primary-darkest: #072B57; // used for main page offcanvas course list -$brand-primary-darker: #164276; // used for main page offcanvas course list +// $brand-primary-darkest: #072B57; // used for main page offcanvas course list +// $brand-primary-darker: #164276; // used for main page offcanvas course list $brand-primary-mid: lighten($brand-primary, 12%); // #5798d0 $brand-primary-light: lighten($brand-primary, 45%); // #dbe9f5 -$brand-primary-bright: #0E9AEF; // used when we need a primary standout, such as the right hand bar indicating the current org in the offcanvas course list. - +// $brand-primary-bright: #0E9AEF; // used when we need a primary standout, such as the right hand bar indicating the current org in the offcanvas course list. +// // a links -$a-link-default: $brand-primary; -$a-link-default-hover: $brand-primary-bright; -$a-link-default-focus: $brand-primary-bright; - +// $a-link-default: $brand-primary; +// $a-link-default-hover: $brand-primary-bright; +// $a-link-default-focus: $brand-primary-bright; +// // Success Green shades -$brand-success-light: lighten($brand-success, 25%); // #b5dfb5 - +$brand-success-light: lighten($green-500, 25%); // #b5dfb5 +// // Warning Yellow shades: -$contrast-fade-start: #FCF0AD; // Used in Forum, Comment for highlighting replies -$contrast-light: #F6EEBF; - +$contrast-fade-start: lighten($orange-500, 50%); // Used in Forum, Comment for highlighting replies +$contrast-light: lighten($orange-500, 20%); +// // Borders in various colours // Grey or black +$legend-border-color: #e5e5e5; $border-thin-black: thin solid black; $border-thin-dotted: thin dotted #AAAAAA; // admin, central, monitoring $border-thin-dashed: thin dashed #AAAAAA; // only used in admin @@ -40,10 +43,10 @@ // Red $border-thin-danger: thin solid $brand-danger; $border-medium-danger: 3px solid $brand-danger; - +// // learner page box shadow -$panel-box-shadow: 0 1px 1px rgba(8, 8, 8, 0.88); - +// $panel-box-shadow: 0 1px 1px rgba(8, 8, 8, 0.88); +// // progress bar $optional-activity-background: lighten($brand-primary-mid, 35%); $optional-activity-background-heading: lighten($brand-primary-mid, 5%); @@ -53,41 +56,41 @@ $gate-activity-fill: #FF0000; $complex-activity-fill: #999999; $not-started-activity-fill: #009900; - +// // Used just for main.css - the main page -$main_default_link: #5A738E; -$main_blue_light_highlight: #A6E5FD; -$main_fav_org_link: #A7B1C2; -$main_offcanvas_link: #2B5B95; -$main_offcanvas_link_color: $body-bg; -$main_offcanvas_background: $brand-primary-darker; -$main_offcanvas_color: $gray-lighter; -$main_offcanvas_logo_background: $brand-primary-darkest; -$main_offcanvas_search_background: $brand-primary-darkest; -$main_dropdown_border: #D9DEE4; -$main_navbar_link: #515356; -$main_singlelesson_hover_border: #9be0f9; -$main_singlelesson_hover_background: #F0F8FF; - +// $main_default_link: #5A738E; +// $main_blue_light_highlight: #A6E5FD; +// $main_fav_org_link: #A7B1C2; +// $main_offcanvas_link: #2B5B95; +// $main_offcanvas_link_color: $body-bg; +// $main_offcanvas_background: $brand-primary-darker; +// $main_offcanvas_color: $gray-lighter; +// $main_offcanvas_logo_background: $brand-primary-darkest; +// $main_offcanvas_search_background: $brand-primary-darkest; +// $main_dropdown_border: #D9DEE4; +// $main_navbar_link: #515356; +// $main_singlelesson_hover_border: #9be0f9; +// $main_singlelesson_hover_background: #F0F8FF; +// // navbar login bar // $navbar-brand-login-color: #ffffff; // $navbar-login-background: $brand-primary; - +// // panel header color // $panel-default-heading-background: lighten($brand-primary-bright, 20%); - +// // Text & typography // $headings-default-color: $brand-primary-darker; +// +// $stripes_background: url('/lams/images/css/light-fabric.jpg'); +// $url_css_directory: "/lams/images/css/"; +// $login_logo: "/lams/images/svg/lams_logo_black.svg"; +// $login_logo_size: auto 20px; +// $login-logo_div_width: 100px; +// +// $offcanvas_logo: "/lams/images/svg/lams_logo_white.svg"; +// $offcanvas_height: 31px; -$stripes_background: url('/lams/images/css/light-fabric.jpg'); -$url_css_directory: "/lams/images/css/"; -$login_logo: "/lams/images/svg/lams_logo_black.svg"; -$login_logo_size: auto 20px; -$login-logo_div_width: 100px; - -$offcanvas_logo: "/lams/images/svg/lams_logo_white.svg"; -$offcanvas_height: 31px; - // generic portrait colors $portrait-color-0:#001f3f; $portrait-color-1:#FF851B; Index: lams_central/conf/scss/_lams_variables_purple.scss =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r32670937f259e2c8a712e1dd2cd6bb5731f466c9 --- lams_central/conf/scss/_lams_variables_purple.scss (.../_lams_variables_purple.scss) (revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80) +++ lams_central/conf/scss/_lams_variables_purple.scss (.../_lams_variables_purple.scss) (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -1,119 +1,3 @@ -// Definitions for the Purple skin -@import "_bootstrap-variables.scss"; -@import "_mixins.scss"; +// Definitions for the Purple skin - for the moment same as the main skin as the main skin is pretty purple! +@import "lams_variables.scss"; -$brand-primary: #85237d; // Overridden bootstrap setting - -// LAMS SASS Global Variables - -$gray-light-mid: lighten($gray-base, 86.5%); // #dddddd -$gray-lightest: lighten($gray-base, 96%); // #f5f5f5 or whitesmoke - -// Primary colour shades -$brand-primary-darkest: #33002e; // used for main page offcanvas course list -$brand-primary-darker: #4d0046; // used for main page offcanvas course list -$brand-primary-mid: lighten($brand-primary, 12%); -$brand-primary-light: #edbae9; -$brand-primary-bright: #aa7fa6; // used when we need a primary standout, such as the right hand bar indicating the current org in the offcanvas course list. - -// a links -$a-link-default: $brand-primary-darkest; -$a-link-default-hover: $brand-primary-bright; -$a-link-default-focus: $brand-primary-bright; - -// Success Green shades -$brand-success-light: lighten($brand-success, 25%); // #b5dfb5 - -// Warning Yellow shades: -$contrast-fade-start: #FCF0AD; // Used in Forum, Comment for highlighting replies -$contrast-light: #F6EEBF; - -// Borders in various colours -// Grey or black -$border-thin-black: thin solid black; -$border-thin-dotted: thin dotted #AAAAAA; // admin, central, monitoring -$border-thin-dashed: thin dashed #AAAAAA; // only used in admin -$border-thin-solid: thin solid #AAAAAA; // admin and monitoring -$border-thin-body-bg: thin solid $body-bg; // white line -$border-thin-default: thin solid #AAAAAA; -$border-thin-default-light: thin solid $legend-border-color; -$medium-default: 3px solid $gray-light-mid; -// Blue -$border-thin-primary: thin solid $brand-primary; -// Red -$border-thin-danger: thin solid $brand-danger; -$border-medium-danger: 3px solid $brand-danger; - -// learner page box shadow -$panel-box-shadow: 0 1px 1px rgba(8, 8, 8, 0.88); - -// progress bar -$optional-activity-background: lighten($brand-primary-mid, 50%); -$optional-activity-background-heading: lighten($brand-primary-mid, 35%); -$optional-activity-background-hover: $contrast-light; -$completed-activity-fill: $brand-primary; -$current-activity-fill: #BB0000; -$gate-activity-fill: #FF0000; -$complex-activity-fill: #999999; -$not-started-activity-fill: #009900; - -// Used just for main.css - the main page -$main_default_link: #560400; // #5A738E; -$main_default_link_hover: $brand-primary-darker; -$main_blue_light_highlight: #b57bb1; -$main_fav_org_link: #fefefe; // #A7B1C2; -$main_offcanvas_link: #85237D; -$main_offcanvas_link_color: $body-bg; -$main_offcanvas_background: $brand-primary-darker; -$main_offcanvas_color: $gray-lighter; -$main_offcanvas_logo_background: $brand-primary-darkest; -$main_offcanvas_search_background: $brand-primary-darkest; -$main_dropdown_border: #D9DEE4; -$main_navbar_link: #515356; -$main_singlelesson_hover_border: #dabdd8; -$main_singlelesson_hover_background: #e6d3e5; - - -// navbar login bar -$navbar-brand-login-color: #f6f6f6; -$navbar-login-background: #56004e; - -// panel header color -$panel-default-heading-background: lighten($brand-primary-bright, 20%); - -// Text & typography -$headings-default-color: $brand-primary-darker; - -$stripes_background: url('/lams/images/css/light-fabric.jpg'); -$url_css_directory: "/lams/images/css/"; -$login_logo: "/lams/images/svg/lams_logo_white.svg"; -$login_logo_size: auto 20px; -$login-logo_div_width: 100px; - -$offcanvas_logo: "/lams/images/svg/lams_logo_white.svg"; -$offcanvas_height: 31px; -// Forms - Overridden bootstrap settings -$input-border-focus: lighten($brand-primary-bright, 20%); - -// Alerts - Overridden bootstrap settings -$alert-info-bg: lighten($brand-primary-bright, 30%); -$alert-info-text: $brand-primary; -$alert-info-border: darken(adjust-hue($alert-info-bg, -10), 7%); - -// generic portrait colors -$portrait-color-0:#001f3f; -$portrait-color-1:#FF851B; -$portrait-color-2:#85144b; -$portrait-color-3:#111111; -$portrait-color-4:#3D9970; -$portrait-color-5:#0074D9; -$portrait-color-6:#FF4136; - -// Canvas background svg: -// -// this has to be url encoded and added to the background below -$canvas-dot-background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2720%27%3E%0D%0A%20%20%3Crect%20width%3D%2720%27%20height%3D%2720%27%20fill%3D%27%23fefefe%27%2F%3E%0D%0A%3Crect%20x%3D%2710%27%20y%3D%2710%27%20width%3D%271.5%27%20height%3D%271.5%27%20fill%3D%27%23b6b6b6%27%2F%3E%0D%0A%3C%2Fsvg%3E"); - Index: lams_central/conf/scss/_mixins.scss =================================================================== diff -u -r7475d08afc280b5e2e5ddf04e8bf35e3166aaf80 -r32670937f259e2c8a712e1dd2cd6bb5731f466c9 --- lams_central/conf/scss/_mixins.scss (.../_mixins.scss) (revision 7475d08afc280b5e2e5ddf04e8bf35e3166aaf80) +++ lams_central/conf/scss/_mixins.scss (.../_mixins.scss) (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -2,125 +2,130 @@ // // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons - -@mixin button-variant($color, $background, $border) { - color: $color; - background-color: $background; - border-color: $border; - - &:focus, - &.focus { - color: $color; - background-color: darken($background, 10%); - border-color: darken($border, 25%); - outline:0; - } - &:hover { - color: $color; - background-color: darken($background, 10%); - border-color: darken($border, 12%); - } - &:active, - &.active, - .open > &.dropdown-toggle { - color: $color; - background-color: darken($background, 10%); - border-color: darken($border, 12%); - - &:hover, - &:focus, - &.focus { - color: $color; - background-color: darken($background, 17%); - border-color: darken($border, 25%); - outline:0; - } - } - &:active, - &.active, - .open > &.dropdown-toggle { - background-image: none; - } - &.disabled, - &[disabled], - fieldset[disabled] & { - &:hover, - &:focus, - &.focus { - background-color: $background; - border-color: $border; - } - } - - .badge { - color: $background; - background-color: $color; - } -} - -// Button sizes -@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { - padding: $padding-vertical $padding-horizontal; - font-size: $font-size; - line-height: $line-height; - border-radius: $border-radius; -} - -// Drop shadows -@mixin box-shadow($shadow) { - -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 - box-shadow: $shadow; -} -@mixin form-control-focus($color) { - $color-rgba: rgba(red($color), green($color), blue($color), .6); +// +// @mixin button-variant($color, $background, $border) { +// color: $color; +// background-color: $background; +// border-color: $border; +// +// &:focus, +// &.focus { +// color: $color; +// background-color: darken($background, 10%); +// border-color: darken($border, 25%); +// outline:0; +// } +// &:hover { +// color: $color; +// background-color: darken($background, 10%); +// border-color: darken($border, 12%); +// } +// &:active, +// &.active, +// .open > &.dropdown-toggle { +// color: $color; +// background-color: darken($background, 10%); +// border-color: darken($border, 12%); +// +// &:hover, +// &:focus, +// &.focus { +// color: $color; +// background-color: darken($background, 17%); +// border-color: darken($border, 25%); +// outline:0; +// } +// } +// &:active, +// &.active, +// .open > &.dropdown-toggle { +// background-image: none; +// } +// &.disabled, +// &[disabled], +// fieldset[disabled] & { +// &:hover, +// &:focus, +// &.focus { +// background-color: $background; +// border-color: $border; +// } +// } +// +// .badge { +// color: $background; +// background-color: $color; +// } +// } +// +// // Button sizes +// @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { +// padding: $padding-vertical $padding-horizontal; +// font-size: $font-size; +// line-height: $line-height; +// border-radius: $border-radius; +// } +// +// // Drop shadows +// @mixin box-shadow($shadow) { +// -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 +// box-shadow: $shadow; +// } +@mixin form-control-focus() { &:focus { - border-color: $color; + color: $input-focus-color; + background-color: $input-focus-bg; + border-color: $input-focus-border-color; outline: 0; - $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba; - @include box-shadow($shadow); + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: $input-box-shadow, $input-focus-box-shadow; + } @else { + box-shadow: $input-focus-box-shadow; + } } } +// +// // Alerts +// @mixin alert-variant($background, $border, $text-color) { +// background-color: $background; +// border-color: $border; +// color: $text-color; +// +// hr { +// border-top-color: darken($border, 5%); +// } +// .alert-link { +// color: darken($text-color, 10%); +// } +// } +// +// // Contextual backgrounds +// +// // [converter] $parent hack +// @mixin bg-variant($parent, $color) { +// #{$parent} { +// background-color: $color; +// } +// a#{$parent}:hover, +// a#{$parent}:focus { +// background-color: darken($color, 10%); +// } +// } +// +// // Typography +// +// // [converter] $parent hack +// @mixin text-emphasis-variant($parent, $color) { +// #{$parent} { +// color: $color; +// } +// a#{$parent}:hover, +// a#{$parent}:focus { +// color: darken($color, 10%); +// } +// } -// Alerts -@mixin alert-variant($background, $border, $text-color) { - background-color: $background; - border-color: $border; - color: $text-color; - - hr { - border-top-color: darken($border, 5%); - } - .alert-link { - color: darken($text-color, 10%); - } -} - -// Contextual backgrounds - -// [converter] $parent hack -@mixin bg-variant($parent, $color) { - #{$parent} { - background-color: $color; - } - a#{$parent}:hover, - a#{$parent}:focus { - background-color: darken($color, 10%); - } -} - -// Typography - -// [converter] $parent hack -@mixin text-emphasis-variant($parent, $color) { - #{$parent} { - color: $color; - } - a#{$parent}:hover, - a#{$parent}:focus { - color: darken($color, 10%); - } -} - // Generic avatars used in place of profile pictures @mixin portrait($size) { width: $size; Index: lams_central/conf/scss/material-kit.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit.scss (revision 0) +++ lams_central/conf/scss/material-kit.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,66 @@ +/*! + + ========================================================= + * Material Kit - v2.0.5 + ========================================================= + + * Product Page: https://www.creative-tim.com/product/material-kit + * Copyright 2018 Creative Tim (http://www.creative-tim.com) + + ========================================================= + + * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + + */ + + @import "material-kit/variables"; + @import "material-kit/mixins"; + @import "material-kit/core-bootstrap"; + @import "material-kit/reboot"; + + // Core Components + @import "material-kit/layout"; + @import "material-kit/buttons"; + @import "material-kit/misc"; + @import "material-kit/checkboxes"; + @import "material-kit/custom-forms"; + @import "material-kit/switches"; + @import "material-kit/radios"; + @import "material-kit/carousel"; + @import "material-kit/forms"; + @import "material-kit/input-group"; + @import "material-kit/list-group"; + @import "material-kit/nav"; + @import "material-kit/images"; + @import "material-kit/navbar"; + @import "material-kit/badges"; + @import "material-kit/alerts"; + @import "material-kit/pagination"; + @import "material-kit/pills"; + @import "material-kit/info-areas"; + @import "material-kit/type"; + @import "material-kit/tabs"; + @import "material-kit/tooltip"; + @import "material-kit/popover"; + @import "material-kit/modal"; + @import "material-kit/dropdown"; + @import "material-kit/drawer"; + @import "material-kit/progress"; + @import "material-kit/togglebutton"; + @import "material-kit/ripples"; + @import "material-kit/headers"; + @import "material-kit/footers"; + + // Cards + @import 'material-kit/cards'; + @import 'material-kit/cards/card-carousel'; + @import 'material-kit/cards/card-login'; + @import 'material-kit/cards/card-plain'; + + // Core Plugins + @import 'material-kit/plugins/plugin-datetime-picker'; + @import 'material-kit/plugins/plugin-nouislider'; + + // Sections and Example pages + @import "material-kit/example-pages"; + @import "material-kit/responsive"; Index: lams_central/conf/scss/material-kit/_alerts.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_alerts.scss (revision 0) +++ lams_central/conf/scss/material-kit/_alerts.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,53 @@ +.alert { + border: 0; + border-radius: 0; + + padding: 20px 15px; + line-height: 20px; + + //@include shadow-z-2(); + + b{ + font-weight: $font-weight-bold; + text-transform: uppercase; + font-size: $font-size-small; + } + // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content + @include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light); + + &-info, &-danger, &-warning, &-success { + color: $mdb-text-color-light; + } + + &-default { + a, .alert-link { + color: $mdb-text-color-primary; + } + } + + .alert-icon{ + display: block; + float: left; + margin-right: $margin-base; + + i{ + margin-top: -7px; + top: 5px; + position: relative; + } + } + .close{ + color: $white-color; + text-shadow: none; + opacity: .9; + + i{ + font-size: 20px; + } + + &:hover, + &:focus{ + opacity: 1; + } + } +} Index: lams_central/conf/scss/material-kit/_badges.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_badges.scss (revision 0) +++ lams_central/conf/scss/material-kit/_badges.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,43 @@ +.badge { + padding: 5px 12px; + text-transform: uppercase; + font-size: 10px; + color: $white-color; + + @include badge-color(); +} + +.badge-default[href]:hover, +.badge-default[href]:focus { + background-color: darken($brand-default, 5%); +} + +.badge-primary[href]:hover, +.badge-primary[href]:focus { + background-color: darken($brand-primary, 5%); +} + +.badge-info[href]:hover, +.badge-info[href]:focus { + background-color: darken($brand-info, 5%); +} + +.badge-success[href]:hover, +.badge-success[href]:focus { + background-color: darken($brand-success, 5%); +} + +.badge-warning[href]:hover, +.badge-warning[href]:focus { + background-color: darken($brand-warning, 5%); + color: $white-color; +} + +.badge-danger[href]:hover, +.badge-danger[href]:focus { + background-color: darken($brand-danger, 5%); +} +.badge-rose[href]:hover, +.badge-rose[href]:focus { + background-color: darken($brand-rose, 5%); +} Index: lams_central/conf/scss/material-kit/_buttons.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_buttons.scss (revision 0) +++ lams_central/conf/scss/material-kit/_buttons.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,228 @@ +.btn{ + position: relative; + padding: 12px 30px; + margin: $bmd-btn-margin-bottom 1px; + font-size: .75rem; // 12px + font-weight: 400; + line-height: $bmd-line-height; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0; + cursor: pointer; + background-color: transparent; + border: 0; + border-radius: $border-radius-sm; + outline: 0; + transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: box-shadow, transform; + @include undo-bs-tab-focus(); + + //-- + // Colors + @include bmd-raised-button-color(); + &.btn-white { + &, + &:focus, + &:hover { + background-color: $white-color; + color: $gray-color; + } + &.btn-link { + color: $white-color; + background: transparent; + box-shadow: none; + } + } + &.btn-link:hover, + &.btn-link:focus, + &.btn-link:active { + text-decoration: none !important; + } + + &.btn-disabled { + cursor: not-allowed; + pointer-events: none; + + &:hover { + box-shadow: none; + } + } + + @include hover-focus(); + + //--- + // btn-raised + &.btn-raised, + .btn-group-raised & { + // baseline shadow + // @include box-shadow($bmd-shadow-2dp); + + // reverse any of the above for links + &.btn-link { + box-shadow: none; + @include bmd-hover-focus-active() { + box-shadow: none; + } + } + + @include bmd-disabled() { + box-shadow: none; + } + } + + //--- + // btn-outline + @include bmd-outline-button-color(); + + // Size variations + &.btn-lg, + .btn-group-lg & { + @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $bmd-btn-font-size, $btn-lg-line-height, $border-radius-sm); + } + &.btn-sm, + .btn-group-sm & { + @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $bmd-btn-font-size-sm, $line-height-sm, $border-radius-sm); + } + + &.btn-round { + border-radius: $border-radius-extreme; + } + + &.btn-fab, + &.btn-just-icon { + // see above for color variations + font-size: $mdb-btn-fab-font-size; + height: $mdb-btn-fab-size; + min-width: $mdb-btn-fab-size; + width: $mdb-btn-fab-size; + // margin: auto; + padding: 0; + overflow: hidden; + position: relative; + line-height: $mdb-btn-fab-size; + + &.btn-round{ + border-radius: 50%; + } + + .btn-group-sm &, + &.btn-sm, + &.btn-fab-mini{ + height: $mdb-btn-fab-size-mini + 1; + min-width: $mdb-btn-fab-size-mini + 1; + width: $mdb-btn-fab-size-mini + 1; + + .material-icons, + .fa{ + font-size: $mdb-btn-icon-size-mini; + line-height: $mdb-btn-fab-size-mini; + } + } + + .btn-group-lg &, + &.btn-lg{ + height: $mdb-btn-fab-size-lg + 1; + min-width: $mdb-btn-fab-size-lg + 1; + width: $mdb-btn-fab-size-lg + 1; + line-height: $mdb-btn-fab-size-lg; + + .material-icons, + .fa{ + font-size: $mdb-btn-icon-size; + line-height: $mdb-btn-fab-size-lg; + } + } + + .material-icons, + .fa { + margin-top: 0; + position: absolute; + width: 100%; + transform: none; + left: 0; + top: 0; + height: 100%; + + line-height: $mdb-btn-fab-size; + font-size: $mdb-btn-just-icon-font-size; + } + } +} + +.btn-just-icon{ + &.btn-lg{ + font-size: $mdb-btn-fab-font-size; + height: $mdb-btn-fab-size; + min-width: $mdb-btn-fab-size; + width: $mdb-btn-fab-size; + } +} + +.input-group-btn > .btn{ + border: 0; +} + + +// Align icons inside buttons with text +.btn .material-icons, +.btn:not(.btn-just-icon):not(.btn-fab) .fa{ + position: relative; + display: inline-block; + top: 0; + margin-top: -1em; + margin-bottom: -1em; + font-size: 1.1rem; + vertical-align: middle; + } + +// Disabled buttons and button groups +.btn, +.input-group-btn .btn, +.btn-group, +.btn-group-vertical { + // have to ratchet up the specificity to kill drop shadows on disabled raised buttons + @include bmd-disabled() { + .bg-inverse & { + color: $bmd-inverse-btn-disabled; + } + + // flat buttons shouldn't lose transparency on disabled hover/focus + } +} + +// btn-group variations +.btn-group, +.btn-group-vertical { + position: relative; + margin: 10px 1px; + + // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons + //&.open { + // .dropdown-toggle { + // } + // + // > .dropdown-toggle.btn { + // @include bmd-raised-button-color-bg(); + // } + //} + + .dropdown-menu { + border-radius: 0 0 $border-radius $border-radius; + } + + &.btn-group-raised { + @include box-shadow($bmd-shadow-2dp); + } + + .btn + .btn, + .btn, + .btn:active, + .btn-group { + margin: 0; + } + + // remove margin from nested btn-group(s) to properly align them with the outer buttons + > .btn-group { + margin: 0; + } +} Index: lams_central/conf/scss/material-kit/_cards.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_cards.scss (revision 0) +++ lams_central/conf/scss/material-kit/_cards.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,327 @@ +//https://www.google.com/design/spec/components/cards.html#cards-content-blocks +// Card resting elevation: 2dp +.card { + border: 0; + margin-bottom: 30px; + margin-top: 30px; + border-radius: $border-radius-large; + color: $gray-dark; + background: $white-color; + width: 100%; + + .card-category:not([class*="text-"]) { + color: $gray-color; + } + .card-category{ + margin-top: 10px; + + .material-icons{ + position: relative; + top: 8px; + line-height: 0; + } + } + + .form-check { + margin-top: 15px; + } + + .card-title{ + margin-top: 0.625rem; + + &:last-child{ + margin-bottom: 0; + } + } + + // Cards have a default elevation of 2dp. + @include box-shadow($bmd-shadow-2dp); + @extend %std-font; + + + &.no-shadow { + .card-header-image, + .card-header-image img { + box-shadow: none !important; + } + } + + .card-body, + .card-footer { + padding: $padding-card-body-y $padding-card-body-x; + } + + .card-body { + & + .card-footer{ + padding-top: 0rem; + border: 0; + border-radius: $border-radius-large; + } + } + + .card-footer { + display: flex; + align-items: center; + background-color: transparent; + border: 0; + + .author, + .stats { + display: inline-flex; + } + + .stats { + color: $gray-color; + + .material-icons { + position: relative; + top: 3px; + margin-right: 3px; + margin-left: 3px; + font-size: 18px; + } + } + } + + &.bmd-card-raised { + // Card raised elevation: 8dp + @include box-shadow($bmd-shadow-8dp); + } + + @include media-breakpoint-up(lg) { + // On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover. + &.bmd-card-flat { + box-shadow: none; + } + } + + .card-header { + border-radius: $border-radius-base; + padding: $bmd-label-top-margin-base 15px; + margin-left: 15px; + margin-right: 15px; + margin-top: -30px; + border: 0; + background: linear-gradient(60deg, $grey-200, $grey-400); + + .title{ + color: $white-color; + } + + &:not([class*="header-"]){ + @include shadow-big(); + } + + .nav-tabs { + padding: 0; + } + + &.card-header-image { + position: relative; + padding: 0; + z-index: 1; + margin-left: 15px; + margin-right: 15px; + margin-top: -30px; + border-radius: $border-radius-large; + + a { + display: block; + } + + img { + width: 100%; + border-radius: $border-radius-large; + pointer-events: none; + @include shadow-big-image(); + } + .card-title { + position: absolute; + bottom: 15px; + left: 15px; + color: $white-color; + font-size: $font-size-h4; + text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5); + } + + .colored-shadow{ + transform: scale(0.94); + top: 12px; + filter: blur(12px); + position: absolute; + width: 100%; + height: 100%; + background-size: cover; + z-index: -1; + transition: opacity .45s; + opacity: 0; + } + + &.no-shadow{ + box-shadow: none; + + &.shadow-normal{ + @include shadow-big(); + } + + .colored-shadow{ + display: none !important; + } + } + } + } + + .card-header-primary, + &.bg-primary, + &.card-rotate.bg-primary .front, + &.card-rotate.bg-primary .back{ + background: linear-gradient(60deg, $purple-400, $purple-700); + } + .card-header-info, + &.bg-info, + &.card-rotate.bg-info .front, + &.card-rotate.bg-info .back{ + background: linear-gradient(60deg, $cyan-400, $cyan-700); + } + .card-header-success, + &.bg-success, + &.card-rotate.bg-success .front, + &.card-rotate.bg-success .back{ + background: linear-gradient(60deg, $green-400, $green-700); + } + .card-header-warning, + &.bg-warning, + &.card-rotate.bg-warning .front, + &.card-rotate.bg-warning .back{ + background: linear-gradient(60deg, $orange-400, $orange-700); + } + .card-header-danger, + &.bg-danger, + &.card-rotate.bg-danger .front, + &.card-rotate.bg-danger .back{ + background: linear-gradient(60deg, $red-400, $red-700); + } + + .card-header-rose, + &.bg-rose, + &.card-rotate.bg-rose .front, + &.card-rotate.bg-rose .back{ + background: linear-gradient(60deg, $pink-400, $pink-700); + } + + .card-header-primary{ + @include shadow-big-color($brand-primary); + } + .card-header-danger{ + @include shadow-big-color($brand-danger); + } + + .card-header-rose{ + @include shadow-big-color($brand-rose); + } + + .card-header-warning{ + @include shadow-big-color($brand-warning); + } + + .card-header-info{ + @include shadow-big-color($brand-info); + } + + .card-header-success{ + @include shadow-big-color($brand-success); + } + + [class*="header-"], + &[class*="bg-"]{ + color: $white-color; + + .card-title a, + .card-title, + .icon i{ + color: $white-color; + } + + .icon i{ + border-color: rgba(255, 255, 255, 0.25); + } + .author a, + .stats, + .card-category, + .card-description{ + color: $white-transparent; + } + + .author a{ + &:hover, + &:focus, + &:active{ + color: $white-color; + } + } + } + + .author{ + .avatar{ + width: 30px; + height: 30px; + overflow: hidden; + border-radius: 50%; + margin-right: 5px; + } + + a{ + color: $black-color; + text-decoration: none; + + .ripple-container{ + display: none; + } + } + } + + .card-category-social{ + .fa{ + font-size: 24px; + position: relative; + margin-top: -4px; + top: 2px; + margin-right: 5px; + } + + .material-icons{ + position: relative; + top: 5px; + } + } + + &[class*="bg-"], + &[class*="bg-"] .card-body{ + border-radius: $border-radius-large; + + h1, + h2, + h3{ + small{ + color: $white-transparent; + } + } + } + + .card-stats{ + background: transparent; + display: flex; + + .author, + .stats{ + display: inline-flex; + } + } +} + +// some jss/css to make the cards look a bit better on Internet Explorer +@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + .card{ + display: inline-block; + } +} Index: lams_central/conf/scss/material-kit/_carousel.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_carousel.scss (revision 0) +++ lams_central/conf/scss/material-kit/_carousel.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,95 @@ +.carousel{ + .carousel-control{ + &.left, + &.right{ + background-image: none; + } + + &.right{ + i{ + right: 0; + } + } + } + + .card{ + margin-top: 0; + } + + .item{ + text-align: center; + } + &.carousel-full-nagivation{ + .carousel-control{ + width: 50%; + + &.left, + &.right{ + background-image: none; + } + + .material-icons, + .fa{ + display: none; + } + } + } + + .carousel-control{ + height: 15%; + margin: auto; + } + + .carousel-control-prev, + .carousel-control-next{ + .material-icons{ + z-index: 5; + display: inline-block; + font-size: 50px; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 50px; + margin: auto; + } + } + .carousel-indicators{ + bottom: 5px; + + li, + .active{ + margin: 11px 10px; + } + + li{ + display: inline-block; + width: 10px; + height: 10px; + text-indent: -999px; + cursor: pointer; + border: 1px solid #fff; + border-radius: 10px; + background: #FFFFFF; + @include shadow-2dp(); + @extend .animation-transition-general; + border-radius: $border-radius-small; + } + .active{ + margin-top: 10px; + @include transform-scale(1.5); + @include shadow-4dp(); + } + } + + .carousel-caption{ + padding-bottom: 45px; + + .material-icons{ + position: relative; + top: 5px; + } + } + +} Index: lams_central/conf/scss/material-kit/_checkboxes.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_checkboxes.scss (revision 0) +++ lams_central/conf/scss/material-kit/_checkboxes.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,201 @@ +.form-check { + margin-bottom: .5rem; + padding-left: 0; + + .form-check-label { + cursor: pointer; + padding-left: 0; // Reset for Bootstrap rule + // color: $mdb-checkbox-label-color; + @include mdb-label-color-toggle-focus(); + } + + // Hide native checkbox + .form-check-input{ + opacity: 0; + position: absolute; + margin: 0; + z-index: -1; + width: 0; + height: 0; + overflow: hidden; + left: 0; + pointer-events: none; + } + + .form-check-sign{ + vertical-align: middle; + position: relative; + top: -2px; + float: left; + padding-right: 10px; + display: inline-block; + + &:before { + display: block; + position: absolute; + left: 0; + content: ""; + background-color: rgba(0,0,0,.84); + height: $mdb-checkbox-size; + width: $mdb-checkbox-size; + border-radius: 100%; + z-index: 1; + opacity: 0; + margin: 0; + top: 0; + @include transform-scale3d(unquote('2.3,2.3,1')); + } + + .check { + position: relative; + display: inline-block; + width: $mdb-checkbox-size; + height: $mdb-checkbox-size; + border: 1px solid $mdb-checkbox-border-color; + overflow: hidden; + z-index: 1; + border-radius: $border-radius-base; + + &:before { + position: absolute; + content: ""; + transform: rotate(45deg); + display: block; + margin-top: -3px; + margin-left: 7px; + width: 0; + color: $white-color; + height: 0; + box-shadow: + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0 inset; + @include animation(checkbox-off $mdb-checkbox-animation-check forwards); + } + } + + } + + .form-check-input{ + + &:focus + .form-check-sign .check:after { + opacity: 0.2; + } + + &:checked { + & + .form-check-sign .check { + background: $mdb-checkbox-checked-color; + } + + & + .form-check-sign .check:before { + color: #FFFFFF; + box-shadow: 0 0 0 10px, + 10px -10px 0 10px, + 32px 0 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 20px -12px 0 11px; + @include animation(checkbox-on $mdb-checkbox-animation-check forwards); + } + + & + .form-check-sign:before { + @include animation(rippleOn $mdb-checkbox-animation-ripple); + } + + & + .form-check-sign .check:after { + //background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed + @include animation(rippleOn $mdb-checkbox-animation-ripple forwards); + } + } + + &:not(:checked) { + & + .form-check-sign:before { + @include animation(rippleOff $mdb-checkbox-animation-ripple); + } + + & + .form-check-sign .check:after { + @include animation(rippleOff $mdb-checkbox-animation-ripple); // Ripple effect on uncheck + + } + } + } + + // Style for disabled inputs + fieldset[disabled] &, + fieldset[disabled] & .form-check-input, + .form-check-input[disabled] ~ .form-check-sign .check, + .form-check-input[disabled] + .circle { + opacity: 0.5; + } + + .form-check-input[disabled] ~ .form-check-sign .check{ + border-color: #000000; + opacity: .26; + } + + .form-check-input[disabled] + .form-check-sign .check:after { + background-color: $mdb-text-color-primary; + transform: rotate(-45deg); + } + + .form-check-input[disabled][checked] + .form-check-sign .check{ + background-color: $black; + } +} + +@keyframes checkbox-on { + 0% { + box-shadow: + 0 0 0 10px, + 10px -10px 0 10px, + 32px 0 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 15px 2px 0 11px; + } + 50% { + box-shadow: + 0 0 0 10px, + 10px -10px 0 10px, + 32px 0 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 20px 2px 0 11px; + } + 100% { + box-shadow: + 0 0 0 10px, + 10px -10px 0 10px, + 32px 0 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 20px -12px 0 11px; + } +} + +@keyframes rippleOn { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} +@keyframes rippleOff { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} Index: lams_central/conf/scss/material-kit/_core-bootstrap.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_core-bootstrap.scss (revision 0) +++ lams_central/conf/scss/material-kit/_core-bootstrap.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,66 @@ +// FIXME: only necessary because there isn't an underscored file - see https://github.com/twbs/bootstrap/issues/18350 +//@import "../bower_components/bootstrap/scss/ +//@import "../../bootstrap/scss/ + +// Core variables and mixins +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/mixins"; + +// #853 start - https://github.com/twbs/bootstrap/pull/18976/files +// hack +@mixin pull-left { + float: left !important; + @if $enable-flex { + margin-right: auto; + } +} +@mixin pull-right { + float: right !important; + @if $enable-flex { + margin-left: auto; + } +} +// #853 end - https://github.com/twbs/bootstrap/pull/18976/files + +// Reset and dependencies +@import "bootstrap/scss/reboot"; +@import "bootstrap/scss/print"; + +// Core CSS +@import "bootstrap/scss/reboot"; +@import "bootstrap/scss/type"; +@import "bootstrap/scss/images"; +@import "bootstrap/scss/code"; +@import "bootstrap/scss/grid"; +@import "bootstrap/scss/tables"; +@import "bootstrap/scss/forms"; +@import "bootstrap/scss/buttons"; +@import "bootstrap/scss/transitions"; + +// Components +@import "bootstrap/scss/dropdown"; +@import "bootstrap/scss/button-group"; +@import "bootstrap/scss/input-group"; +@import "bootstrap/scss/custom-forms"; +@import "bootstrap/scss/nav"; +@import "bootstrap/scss/navbar"; +@import "bootstrap/scss/card"; +@import "bootstrap/scss/breadcrumb"; +@import "bootstrap/scss/pagination"; +@import "bootstrap/scss/jumbotron"; +@import "bootstrap/scss/alert"; +@import "bootstrap/scss/progress"; +@import "bootstrap/scss/media"; +@import "bootstrap/scss/list-group"; +@import "bootstrap/scss/close"; +@import "bootstrap/scss/badge"; + +// Components w/ JavaScript +@import "bootstrap/scss/modal"; +@import "bootstrap/scss/tooltip"; +@import "bootstrap/scss/popover"; +@import "bootstrap/scss/carousel"; + +// Utility classes +@import "bootstrap/scss/utilities"; Index: lams_central/conf/scss/material-kit/_custom-forms.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_custom-forms.scss (revision 0) +++ lams_central/conf/scss/material-kit/_custom-forms.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,10 @@ +.custom-file-control { + // @extend .form-control; + // @include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color); + // + // &::before { + // @extend .btn; + // position: absolute; + // height: calc(100% - 1px); + // } +} Index: lams_central/conf/scss/material-kit/_drawer.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_drawer.scss (revision 0) +++ lams_central/conf/scss/material-kit/_drawer.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,121 @@ +// Implementation specification in https://github.com/FezVrasta/bootstrap-material-design/issues/822 + +// Drawer. +.bmd-layout-drawer { + position: absolute; + z-index: 5; // over a header and content + box-sizing: border-box; + display: flex; + + flex-direction: column; + flex-wrap: nowrap; + + max-height: 100%; + overflow: visible; + overflow-y: auto; + font-size: .875rem; + //color: $bmd-layout-drawer-text-color; + //background: $bmd-layout-drawer-bg-color; + + // Transform offscreen. + transition: transform; + will-change: transform; + transform-style: preserve-3d; + @include box-shadow($bmd-shadow-2dp); + @include material-animation-default(); + + > * { + flex-shrink: 0; + } + + // Placement of common components within the drawer + // You might say this is opinionated - feedback welcome. + > header { + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: 1rem; + + .navbar-brand { + padding-left: 1.5rem; + font-size: 1.25rem; + } + } + + > .list-group { + padding-top: 1rem; + + .list-group-item { + padding-right: 2.5rem; + padding-left: 2.5rem; + font-size: .8125rem; + font-weight: 500; + } + } +} + +//---------------- +// Sizing and positioning below here + +// for left or right drawers, setup widths, heights and positions +@include bmd-drawer-x-out($bmd-drawer-x-size); + +// for top or bottom drawers, setup widths, heights and positions +@include bmd-drawer-y-out($bmd-drawer-y-size); + +// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.bmd-drawer-in')), as well +// as responsive sizes (i.e. bmd-drawer-in-md will open once the browser is wider than 768px). +// +// +// bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg +// We iterate over the standard grid breakpoints, but we also need styles for the simpler `bmd-drawer-in` +// without a size (for triggered openings). Since the xs size is 0, instead of using `bmd-drawer-in-xs` +// (which is mostly meaningless), we create `bmd-drawer-in` meaning always open. +// +// NOTE: bmd-drawer-in-* uses media-breakpoint-up() +// +// bmd-drawer-out +// A marker class that will _force_ the drawer closed regardless of the responsive class present. If (for some +// strange reason) both bmd-drawer-out and bmd-drawer-in are present, it appears that the closed option wins. +// +// bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg +// We iterate over the standard grid breakpoints, but we also need styles for the simpler `bmd-drawer-overlay`. +// Since the xs size is 0, instead of using `bmd-drawer-overlay-xs`, we create `bmd-drawer-overlay` meaning always overlay. +// +// NOTE: bmd-drawer-overlay-* uses media-breakpoint-down() - this is because we usually want a responsive overlay to be used in small screen scenarios. +// + +// +// Drawer open positioning, and style options (push is default, overlay is optional) +:not(.bmd-drawer-out) { + // first eliminate positioning or sizing rules if the drawer is already forced closed + @each $breakpoint in map-keys($grid-breakpoints) { + @include bmd-drawer-x-in-up($bmd-drawer-x-size, $breakpoint); + @include bmd-drawer-y-in-up($bmd-drawer-y-size, $breakpoint); + + @include bmd-drawer-x-overlay-down($breakpoint); + @include bmd-drawer-y-overlay-down($breakpoint); + } +} + +////---- +//// Example 1: creates a media responsive kitchen-sink-drawer that pairs with bmd-drawer-in-lg and allows for the bmd-drawer-in trigger +//.kitchen-sink-drawer { +// $custom-size: 500px; +// @include bmd-drawer-x-out($custom-size); +// &:not(.bmd-drawer-out) { +// @each $breakpoint in map-keys($grid-breakpoints) { +// @include bmd-drawer-x-in-up($custom-size, $breakpoint); +// } +// } +//} +// +//// +////---- +//// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the bmd-drawer-in trigger +//.kitchen-sink-drawer-static { +// $custom-size: 500px; +// @include bmd-drawer-x-out($custom-size); // closed by default +// @include bmd-drawer-x-in($custom-size); // triggered with bmd-drawer-in +// @include bmd-drawer-x-overlay(); // overlay by default, no other classes necessary +//} Index: lams_central/conf/scss/material-kit/_dropdown.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_dropdown.scss (revision 0) +++ lams_central/conf/scss/material-kit/_dropdown.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,205 @@ +// Menus https://www.google.com/design/spec/components/menus.html#menus-specs +// Dropdown buttons (mobile and desktop) https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons + +.dropdown-menu { + display: none; + padding: $bmd-dropdown-margin-y 0; + border: 0; + opacity: 0; + transform: scale(0); + transform-origin: 0 0; + will-change: transform, opacity; + transition: transform $bmd-menu-expand-duration $bmd-animation-curve-default, + opacity $bmd-menu-fade-duration $bmd-animation-curve-default; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); + + &.showing { + animation-name: bmd-dropdown-animation; + animation-duration: $bmd-menu-expand-duration; + animation-fill-mode: forwards; + animation-timing-function: $bmd-animation-curve-default; + } + + .open > &, + &.show { + display: block; + opacity: 1; + transform: scale(1); + } + + &.hiding { + display: block; + opacity: 0; + transform: scale(0); + } + + &[x-placement="bottom-start"] { + transform-origin: 0 0; + } + + &[x-placement="bottom-end"] { + transform-origin: 100% 0; + } + + &[x-placement="top-start"] { + transform-origin: 0 100%; + } + + &[x-placement="top-end"] { + transform-origin: 100% 100%; + } + + .disabled > a{ + color: $bmd-dropdown-header-color; + + &:focus, + &:hover{ + text-decoration: none; + background-color: transparent; + background-image: none; + color: $bmd-dropdown-header-color; + } + } + + &.dropdown-with-icons .dropdown-item{ + padding: $dropdown-item-padding-y + 0.125 $dropdown-item-padding-x $dropdown-item-padding-y + 0.125 $dropdown-item-padding-y + 0.125; + + & .material-icons{ + vertical-align: middle; + font-size: 24px; + position: relative; + margin-top: -4px; + top: 1px; + margin-right: 12px; + opacity: .5; + } + } + + + // https://www.google.com/design/spec/components/menus.html#menus-specs + .dropdown-item, + li > a{ // used to properly size the ripple container + position: relative; + width: auto; + + display: flex; + flex-flow: nowrap; + align-items: center; + color: $bmd-dropdown-link-color; + font-weight: normal; + text-decoration: none; + + font-size: .8125rem; + border-radius: $border-radius / 2; + margin: 0 $bmd-dropdown-margin-y; + @include transitions($fast-transition-time, $transition-linear); + + min-width: $bmd-menu-item-min-width; + + padding: $dropdown-item-padding-y $dropdown-item-padding-x; + + overflow: hidden; + line-height: $bmd-line-height; + text-overflow: ellipsis; + word-wrap: break-word; + + @include media-breakpoint-up(md) { + padding-right: $bmd-menu-item-padding-right-md; + padding-left: $bmd-menu-item-padding-left-md; + } + } + + .dropdown-item:hover, + .dropdown-item:focus, + a:hover, + a:focus, + a:active { + @include shadow-small-color($brand-primary); + background-color: $brand-primary; + color: #FFFFFF; + } +} + +// this could be in a .btn-group or .dropdown +.dropdown-toggle { + &.bmd-btn-icon, + &.bmd-btn-fab { + // remove the dropdown icon + &::after { + display: none; + } + + ~ .dropdown-menu { + &.dropdown-menu-top-left, + &.dropdown-menu-top-right { + bottom: $bmd-btn-icon-size; // push up the bottom of the menu the height of the button + } + } + } + + &:after{ + will-change: transform; + transition: transform $bmd-animation-dropdown-caret linear; + } + + .show &:after{ + @include rotate-180(); + } + + &.bmd-btn-fab-sm { + ~ .dropdown-menu { + &.dropdown-menu-top-left, + &.dropdown-menu-top-right { + bottom: $bmd-btn-fab-size-sm; // push up the bottom of the menu the height of the button + } + } + } + + &.bmd-btn-icon { + ~ .dropdown-menu { + // collapse some spacing + margin: 0; + } + } +} + +.dropdown-header{ + font-size: 0.75rem; + padding-top: $dropdown-header-padding-y; + padding-bottom: $dropdown-header-padding-y; + text-transform: none; + color: $bmd-dropdown-header-color; + line-height: $bmd-line-height; + font-weight: inherit; +} + +@keyframes bmd-dropdown-animation { + from { + opacity: 0; + transform: scale(0); + } + to { + opacity: 1; + transform: scale(1); + } +} + +.dropdown-menu.bootstrap-datetimepicker-widget{ + opacity: 0; + transform: scale(0); + transition-duration: $bmd-menu-expand-duration; + transition-timing-function: $bmd-animation-curve-default; + transform-origin: 0 0; + will-change: transform, opacity; + top: 0; +} + +.dropdown-menu.bootstrap-datetimepicker-widget.top{ + transform-origin: 0 100%; +} + +.dropdown-menu.bootstrap-datetimepicker-widget.open{ + opacity: 1; + transform: scale(1); + top: 0; +} Index: lams_central/conf/scss/material-kit/_example-pages.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_example-pages.scss (revision 0) +++ lams_central/conf/scss/material-kit/_example-pages.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,164 @@ +.index-page{ + .section-components h6.description{ + margin-top: 5px; + margin-bottom: 30px; + } + + .page-header{ + height: 90vh; + overflow: hidden; + } + .brand{ + color: $white-color; + text-align: center; + + h1{ + font-size: 4.2rem; + font-weight: 600; + display: inline-block; + position: relative; + } + h3{ + font-size: 1.313rem; + max-width: 500px; + margin: 10px auto 0; + } + } + + h4.description{ + font-size: 1.5em; + } +} +.section{ + padding: 70px 0; +} +.profile-page{ + .page-header{ + height: 380px; + background-position: top center; + } + .profile{ + text-align: center; + + img{ + max-width: 160px; + width: 100%; + margin: 0 auto; + @include transform-translate-y(-50%); + } + .name{ + margin-top: -80px; + } + } + .follow{ + position: absolute; + top: 0; + right: 0; + } + .description{ + margin: $margin-base auto 0; + max-width: 600px; + } + .profile-tabs{ + margin-top: $margin-base * 4; + } + .gallery{ + margin-top: $margin-base * 3; + padding-bottom: 50px; + + img{ + width: 100%; + margin-bottom: $margin-base * 2; + } + } + .follow{ + .btn-fab{ + margin-top: -28px; + } + } + .card-background{ + .content{ + padding: 30% 0; + min-width: 160px; + } + } + .work{ + padding: 40px 0px; + .collections{ + margin-top: 20px; + } + + .stats{ + ul > li{ + padding: 5px 0px; + font-size: 1em; + b{ + font-size: 1.2em; + } + + } + } + } + + .connections{ + padding: 40px 0px; + .card-profile{ + text-align: left; + } + } + + .tab-content{ + .collections{ + .card .card-body{ + display: flex; + flex-direction: column; + justify-content: center; + + .badge{ + display: inline-table; + margin: 0 auto; + } + } + } + } +} + +.signup-page{ + .page-header{ + min-height: 100vh; + height: auto; + display: inherit; + + .container{ + padding-top: 20vh; + } + } + + .card-signup{ + border-radius: $border-radius-base * 2; + @include shadow-16dp(); + margin-bottom: 100px; + padding: 40px 0px; + } + .info-horizontal{ + padding: 0px 0px 20px; + } + .social{ + .btn{ + margin: 5px; + } + h4{ + margin-top: 20px; + } + } + .footer{ + .container{ + padding: 0; + } + .copyright, + a{ + color: #FFFFFF; + } + } + +} Index: lams_central/conf/scss/material-kit/_footers.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_footers.scss (revision 0) +++ lams_central/conf/scss/material-kit/_footers.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,93 @@ +footer{ + padding: $padding-general-x 0; + text-align: center; + display: -webkit-flex; /* Safari */ /* Safari 6.1+ */ + display: flex; + + ul{ + margin-bottom: 0; + padding: 0; + list-style: none; + + li{ + display: inline-block; + + a{ + color: inherit; + padding: $padding-general-x; + font-weight: $font-weight-bold; + font-size: $mdb-btn-font-size-base; + text-transform: uppercase; + border-radius: $border-radius-base; + text-decoration: none; + position: relative; + display: block; + + &:hover{ + text-decoration: none; + } + } + + .btn{ + margin: 0; + } + } + + &.links-horizontal{ + &:first-child a{ + padding-left: 0; + } + + &:last-child a{ + padding-right: 0; + } + } + + &.links-vertical{ + li{ + display: block; + margin-left: -5px; + margin-right: -5px; + + a{ + padding: 5px; + } + } + } + } + + .social-buttons{ + a, + .btn{ + margin-top: 5px; + margin-bottom: 5px; + } + } + + .footer-brand{ + float: left; + height: 50px; + padding: 15px 15px; + font-size: 18px; + line-height: 20px; + margin-left: -15px; + + &:hover, + &:focus{ + color: $black-color; + } + } + .copyright{ + padding: 15px 0; + .material-icons{ + font-size: 18px; + position: relative; + top: 3px; + } + } + + .pull-center{ + display: inline-block; + float: none; + } +} Index: lams_central/conf/scss/material-kit/_forms.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_forms.scss (revision 0) +++ lams_central/conf/scss/material-kit/_forms.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,360 @@ +form { + // ensure enough room at the bottom of any form to display a one-line bmd-help + margin-bottom: ($bmd-help-size-ratio * $font-size-base) * $line-height-base; + + .card &{ + margin: 0; + } + // reverse the above for navbars (no help expected in a navbar form) + .navbar & { + margin-bottom: 0; // only adjust bottom so that pull-xs-right flexed margin-left: auto works + + .bmd-form-group { + display: inline-block; + padding-top: 0; + } + + .btn { + margin-bottom: 0; + } + } +} + +// ----- +// Inputs +// +// Reference http://www.google.com/design/spec/components/text-fields.html +// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section +.form-control { + background: $bmd-form-control-bg-repeat-y $bmd-form-control-bg-position; + background-size: $bmd-form-control-bg-size; + border: 0; + height: 36px; + transition: background 0s ease-out; + padding-left: 0; + padding-right: 0; + border-radius: 0; + font-size: $mdb-input-font-size-base; + + // The border bottom should be static in all states, the decorator will be animated over this. + &:focus, + .bmd-form-group.is-focused & { + background-size: $bmd-form-control-bg-size-active; + //border-bottom: $input-btn-border-width solid $input-border-color; + transition-duration: 0.3s; + box-shadow: none; + } + + @include material-placeholder() { + color: $mdb-input-placeholder-color; + font-weight: 400; + font-size: $mdb-input-font-size-base; +} + + .has-white &{ + @include material-placeholder(){ + color: $white-color; + } + } +} + + + +// Help blocks (not in v4) +// position: absolute approach - uses no vertical space and there is no form jumping, but text wrapping - not so good. +// FIXME: width/wrapping isn't automatic and overflows occur. What are some solutions? +// +.bmd-help { + position: absolute; + display: none; + font-size: .8rem; + font-weight: normal; + @extend .text-muted; + + .bmd-form-group.is-focused & { + display: block; + } + + //-------------------------------------- + // Multiple help blocks + // - absolute positioning is used above to prevent bouncing + // - when there is more than one, this will bounce but will at least show + &:nth-of-type(2) { + padding-top: 1rem; // the first one requires top padding to push it below the first one which is absolute positioned + } + + + .bmd-help { + position: relative; + margin-bottom: 0; + } +} + +// ----- +// State coloring: default, success, info, warning, danger +// +@include bmd-selection-color(); +@include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color, $input-border-color); + +.has-success { + @include bmd-form-color($brand-success, $brand-success, $brand-success, $input-border-color); +} + +.has-info { + @include bmd-form-color($brand-info, $brand-info, $brand-info, $input-border-color); +} + +.has-white{ + @include bmd-form-color($white-color, $white-color, $white-color, $input-border-color-white); + + .form-control{ + &:focus{ + color: $white-color; + } + } +} + +.has-warning { + @include bmd-form-color($brand-warning, $brand-warning, $brand-warning, $input-border-color); +} + +.has-danger { + @include bmd-form-color($brand-danger, $brand-danger, $brand-danger, $input-border-color); +} + +.has-rose { + @include bmd-form-color($brand-rose, $brand-rose, $brand-rose, $input-border-color); +} + +// Reference http://www.google.com/design/spec/components/text-fields.html +// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section +//.variations(unquote(" label"), color, $bmd-input-placeholder-color); // default label color variations + +// Whereas .form-group adds structure, bmd-form-group just needs to make sure we have enough padding for our labels to work. That's the only purpose. +.bmd-form-group { + position: relative; + padding-top: 27px; + + // ----- + // Labels + // + // Reference http://www.google.com/design/spec/components/text-fields.html + // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section + + &:not(.has-success):not(.has-danger){ + [class^='bmd-label'], + [class*=' bmd-label']{ + &.bmd-label-floating{ + color: $mdb-input-placeholder-color; + } + } + } + [class^='bmd-label'], + [class*=' bmd-label'] { + position: absolute; + pointer-events: none; + transition: 0.3s ease all; + + // hint to browser for optimization + &.bmd-label-floating { + will-change: left, top, contents; + margin: 0; + line-height: 1.4; + font-weight: 400; + } + } + + // hide label-placeholders when the field is filled + &.is-filled .bmd-label-placeholder { + display: none; + } + + // Optional class to make the text field inline collapsible/expandable (collapsed by default) + // This uses the BS collapse js to make the width expand. + // `width` class must also be on the element FIXME: do this with JS, it is a marker class and should be implicit because after all, we are an bmd-collapse-inline + // FIXME: js needs to do the focus on shown.bs.collapse event http://v4-alpha.getbootstrap.com/components/collapse/#events + &.bmd-collapse-inline { + display: flex; + align-items: center; + padding: 0; // get rid of any padding as this is a width transition + min-height: 2.1em; + + // Expandable Holder. + .collapse { + flex: 1; + display: none; + &.show { + // This is an unfortunate hack. Animating between widths in percent (%) + // in many browsers (Chrome, Firefox) only animates the inner visual style + // of the input - the outer bounding box still 'jumps'. + // Thus assume a sensible maximum, and animate to/from that value. + max-width: 1200px; + } + } + + .collapsing, + .width:not(.collapse), + // collapsing is removed and momentarily only width is present + .collapse.show { + display: block; + } + + .collapsing { + @include material-animation-default(); + } + } + + // default floating size/location with an bmd-form-group + @include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height, "bmd-form-group default"); + + // sm floating size/location + &.bmd-form-group-sm { + @include bmd-form-size-variant($font-size-sm, $bmd-label-top-margin-sm, $input-padding-y-sm, $bmd-form-line-height-sm, "bmd-form-group sm"); + } + + // lg floating size/location + &.bmd-form-group-lg { + @include bmd-form-size-variant($font-size-lg, $bmd-label-top-margin-lg, $input-padding-y-lg, $bmd-form-line-height-sm, "bmd-form-group lg"); + } +} + +// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) - IMPORTANT for non-form-group spacing such as radio/checkbox/switch +@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height); + +select { + &, + &.form-control { + // Use vendor prefixes as `appearance` isn't part of the CSS spec. OSX doesn't obey the border-radius: 0 without this. + -moz-appearance: none; + -webkit-appearance: none; + } +} + +// Input files - hide actual input - requires specific markup in the sample. +//.bmd-form-group input[type=file] { +// opacity: 0; +// position: absolute; +// top: 0; +// right: 0; +// bottom: 0; +// left: 0; +// width: 100%; +// height: 100%; +// z-index: 100; +//} + +// +// +//.form-horizontal { +// +// // Consistent vertical alignment of radios and checkboxes +// .radio, +// .checkbox, +// .radio-inline, +// .checkbox-inline { +// padding-top: 0; +// } +// +// .radio { +// margin-bottom: 10px; +// } +// +// label { +// text-align: right; +// } +// +// label { +// margin: 0; +// } +//} + + +.form-inline { + @include media-breakpoint-up(sm) { + .input-group { + display: inline-flex; + align-items: center; + } + } +} + +.form-control-feedback{ + position: absolute; + top: 33px; + right: 0; + z-index: 2; + display: block; + width: 34px; + height: 34px; + line-height: 34px; + text-align: center; + pointer-events: none; + opacity: 0; + + .has-success &{ + color: $green; + opacity: 1; + } + + .has-danger &{ + color: $red; + opacity: 1; + } +} + +.form-group{ + margin-bottom: 17px; + position: relative; +} + +textarea{ + height: auto !important; + resize: none; + line-height: $bmd-line-height !important; +} + +.form-group input[type=file] { + opacity: 0; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} + +.form-newsletter{ + .input-group, + .form-group{ + float: left; + width: 78%; + margin-right: 2%; + margin-top: 9px; + padding-top: 5px; + } + + .btn{ + float: left; + width: 20%; + margin: 9px 0 0; + } +} + +.form-file-upload{ + .input-group-btn:last-child>.btn-round{ + border-radius: 30px; + } + + .input-group-btn .btn{ + margin: 0; + } + + .input-group{ + width: 100%; + } +} + +.input-group .input-group-btn{ + padding: 0 12px; +} Index: lams_central/conf/scss/material-kit/_headers.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_headers.scss (revision 0) +++ lams_central/conf/scss/material-kit/_headers.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,71 @@ +.page-header{ + height: 100vh; + background-position: center center; + background-size: cover; + margin: 0; + padding: 0; + border: 0; + display: flex; + align-items: center; + + .carousel .carousel-indicators{ + bottom: 60px; + } + + > .container{ + color: $white-color; + } + + .title{ + color: $white-color; + } + + &.header-small{ + height: 65vh; + min-height: 65vh; + } + + .iframe-container{ + iframe{ + width: 100%; + box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), + 0 4px 25px 0px rgba(0, 0, 0, 0.12), + 0 8px 10px -5px rgba(0, 0, 0, 0.2); + } + } +} + +.header-filter{ + position: relative; + + &:before, + &:after{ + position: absolute; + z-index: 1; + width: 100%; + height: 100%; + display: block; + left: 0; + top: 0; + content: ""; + } + + &::before{ + background: rgba(0,0,0,.5); + } + + .container{ + z-index: 2; + position: relative; + } +} +.clear-filter::before { + background: none; +} + +.purple-filter:after{ + background: rgba(101, 47, 142, 0.64); + background: linear-gradient(45deg, rgba(101, 47, 142, 0.88) 0%, rgba(125, 46, 185, 0.45) 100%); + background: -moz-linear-gradient(135deg, rgba(101, 47, 142, 0.88) 0%, rgba(125, 46, 185, 0.45) 100%); + background: -webkit-linear-gradient(135deg, rgba(101, 47, 142, 0.88) 0%, rgba(125, 46, 185, 0.45) 100%); +} Index: lams_central/conf/scss/material-kit/_images.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_images.scss (revision 0) +++ lams_central/conf/scss/material-kit/_images.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,10 @@ +.img-thumbnail{ + border-radius: 16px; +} +.img-raised{ + @include shadow-big-image(); +} + +.rounded{ + border-radius: $border-radius-large !important; +} Index: lams_central/conf/scss/material-kit/_info-areas.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_info-areas.scss (revision 0) +++ lams_central/conf/scss/material-kit/_info-areas.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,57 @@ +.info{ + max-width: 360px; + margin: 0 auto; + padding: 70px 0 30px; + + .icon{ + color: $gray-color; + + > i{ + font-size: 3.85rem; + } + } + .info-title{ + color: $black-color; + margin: 0.875rem * 2 0 0.875rem; + } + p{ + color: $gray-color; + } +} + +.info-horizontal{ + .icon{ + float: left; + margin-top: 24px; + margin-right: 10px; + + >i{ + font-size: $font-size-h2; + } + } + .description{ + overflow: hidden; + } + +} + +.icon { + &.icon-primary { + color: $brand-primary; + } + &.icon-info { + color: $brand-info; + } + &.icon-success { + color: $brand-success; + } + &.icon-warning { + color: $brand-warning; + } + &.icon-danger { + color: $brand-danger; + } + &.icon-rose { + color: $brand-rose; +} +} Index: lams_central/conf/scss/material-kit/_input-group.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_input-group.scss (revision 0) +++ lams_central/conf/scss/material-kit/_input-group.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,43 @@ +// ----------------------------------------- +// input-group and input-group-addon styles +// note: form-groups are not required +// +@mixin input-group-button-variation($vertical-padding) { + .input-group-btn { + .btn { + //margin: 0 0 $vertical-padding 0; + } + } +} + +// default margin - no form-group required +@include input-group-button-variation(input-padding-y); + +.bmd-form-group-sm { + @include input-group-button-variation($input-padding-y-sm); +} + +.bmd-form-group-lg { + @include input-group-button-variation($input-padding-y-lg); +} + +.input-group { + // may be in or outside of form-group + + .input-group-text { + display: flex; + justify-content: center; + align-items: center; + padding: 0 15px 0 15px; + background-color: transparent; + border-color: transparent; + } + + .input-group-btn { + position: absolute; + right: 0; + bottom: 0; + padding-right: 0; + } + +} Index: lams_central/conf/scss/material-kit/_layout.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_layout.scss (revision 0) +++ lams_central/conf/scss/material-kit/_layout.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,81 @@ +// This is a set of flex-based layout containers necessary for components such as the drawer. +// It allows for flex based positioning such as sticky header and footer inside an bmd-layout, with a +// bmd-layout-content that scrolls. + +// mobile webkit smooth scrolling: http://stackoverflow.com/a/15147497/2363935 + +// First element +.bmd-layout-canvas { + // added by js? + position: absolute; + width: 100%; + height: 100%; +} + +// Primary layout container, belongs inside a bmd-layout-canvas. +.bmd-layout-container { + position: relative; + display: flex; + flex-direction: column; // allows for sticky header and footer + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; // mobile webkit smooth scrolling +} + +// Header layout (fixed top), belongs in a bmd-layout-container +.bmd-layout-header { + z-index: 3; + display: flex; + flex-direction: column; // since this is a column, it is necessary that something like an actual navbar is a child + flex-wrap: nowrap; + flex-shrink: 0; + justify-content: flex-start; + width: 100%; + max-height: 1000px; + transform: translateZ(0); // mobile webkit smooth scrolling + @include material-animation-default(); +} + +// Content layout, belongs in a bmd-layout-container +.bmd-layout-content { + position: relative; + z-index: 1; // under a header + display: inline-block; + //-ms-flex: 0 1 auto; // Fix IE10 bug. + flex-grow: 1; + overflow-x: hidden; + overflow-y: auto; // mobile webkit smooth scrolling may need scroll, but auto seems to be working and omits the scroll border + -webkit-overflow-scrolling: touch; // mobile webkit smooth scrolling + @include material-animation-default(); +} + +// Pushes flex-based content to the other end (x or y) +.bmd-layout-spacer { + flex-grow: 1; +} + +// Backdrop - generic backdrop to be used by other components i.e. drawer in overlay mode +.bmd-layout-backdrop { + position: absolute; + top: 0; + left: 0; + z-index: 4; + width: 100%; + height: 100%; + visibility: hidden; + background-color: transparent; + transition-property: background-color; + @include material-animation-default(); + + @supports (pointer-events: auto) { + background-color: rgba(0, 0, 0, 0.5); + opacity: 0; + transition-property: opacity; + visibility: visible; + pointer-events: none; + } + + // NOTE: the &.in style is responsive, generated by @mixin bmd-layout-backdrop-in() where needed. +} Index: lams_central/conf/scss/material-kit/_list-group.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_list-group.scss (revision 0) +++ lams_central/conf/scss/material-kit/_list-group.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,102 @@ +// https://www.google.com/design/spec/components/lists.html#lists-specs + +// - single line 48dp +// - single line avatar 56dp +// - double line (with and w/o avatar) 72dp +// - triple line 88dp + +.list-group { + // #853 start -- https://github.com/twbs/bootstrap/pull/18981/files + @if $enable-flex { + display: flex; + flex-direction: column; + } + // #853 end -- https://github.com/twbs/bootstrap/pull/18981/files + + flex-grow: 1; + + // Add 8dp of padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding. + padding: .5rem 0; + + // dense size variation + &.bmd-list-group-sm { + padding: .25rem 0; + + .list-group-item { + padding: .5rem 1rem; + } + } +} + +.bmd-list-group-col { + display: flex; + flex-direction: column; + min-width: 0; + //flex-shrink: 0; +} + +.list-group-item { + // #853 start -- https://github.com/twbs/bootstrap/pull/18981/files + @if $enable-flex { + display: flex; + flex-flow: row wrap; + align-items: center; + } @else { + display: block; + } + // #853 end -- https://github.com/twbs/bootstrap/pull/18981/files + padding: 1rem; + line-height: 1; + + .list-group-item-text { + // word wrap? http://stackoverflow.com/a/26535469/2363935 + //flex-flow: row wrap; + min-width: 0; + max-height: 2.188rem; // 88dp tile total height + // FIXME: text overflow with ellipsis is not working + //flex: 0 1 auto; // http://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text + overflow: hidden; + text-overflow: ellipsis; + } + + //------ + // NOTE: there are many variations of icons/labels in a list, each one of these rules exist for a reason. + + // first icon/label on the left + :first-child { + margin-right: 2rem; // single line icon is 72dp to text (16 pad + 24 icon + 32 margin) + } + + // second icon/label, or only icon/label marked as 'pull-*-right', or any direct child element marked as right + > .pull-xs-right, + > .pull-sm-right, + > .pull-md-right, + > .pull-lg-right, + > .pull-xl-right, + > * ~ .label:last-child, + > * ~ .material-icons:last-child { + margin-right: 0; // some variations actually match the first-child + margin-left: auto; + } + + // add the padding to icons (margin-left is used for alignment) + .material-icons.pull-xs-right, + // need the specificity + .material-icons.pull-sm-right, + .material-icons.pull-md-right, + .material-icons.pull-lg-right, + .material-icons.pull-xl-right, + .material-icons ~ .material-icons:last-child { + padding-left: 1rem; // guarantee space per spec + } + //------ + + .list-group-item-heading { + //font-size: 1rem; + } + + .list-group-item-text { + font-size: .875rem; + color: $gray; + } +} Index: lams_central/conf/scss/material-kit/_misc.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_misc.scss (revision 0) +++ lams_central/conf/scss/material-kit/_misc.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,550 @@ +body{ + background-color: #eee; + color: $black-color; + font-weight: 300; +} + +legend { + border-bottom: 0; +} + +.serif-font{ + font-family: $font-family-serif; +} + +// Prevent highlight on mobile +* { + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + -webkit-tap-highlight-color: transparent; + &:focus { + outline: 0; + } +} + +a{ + color: $link-color; + &:hover, + &:focus{ + color: darken($link-color, 5%); + text-decoration: none; + } + + &.text-info{ + &:hover, &:focus{ + color: darken($brand-info, 5%); + } + } + + & .material-icons { + vertical-align: middle; + } +} + +.main{ + background: #FFFFFF; + position: relative; + z-index: 3; +} + +.form-check, +label{ + font-size: 14px; + line-height: 1.42857; + color: $checkboxes-text-color; + font-weight: 400; +} + +.main-raised{ + margin: -60px 30px 0px; + border-radius: $border-radius-base * 2; + @include shadow-16dp(); +} + +/* Animations */ +.animation-transition-general{ + @include transitions($general-transition-time, $transition-linear); +} + +.animation-transition-slow{ + @include transitions($slow-transition-time, $transition-linear); +} + +.animation-transition-fast{ + @include transitions($fast-transition-time, $transition-ease); +} + + +.animation-transition-fast, +.navbar, +.bootstrap-tagsinput .tag, +.bootstrap-tagsinput [data-role="remove"], +.card-collapse .card-header a i{ + @include transitions($fast-transition-time, $transition-ease); +} + +.signup-page{ + .card-signup{ + form{ + .form-check{ + padding-left: 20px; + + .form-check-label{ + padding-left: 35px; + } + } + } + } +} + +// style for index.html (free version) + +.section-signup{ + .card-signup{ + .card-header{ + width: auto; + } + .card-body{ + .input-group{ + padding-bottom: 7px; + margin: 27px 0 0 0; + } + } + } +} + + +// offline-doc +.offline-doc, +.offline-free-doc { + .page-header { + height: 100vh !important; + + &:after { + background: rgba(0, 0, 0, 0.5) !important; + content: ""; + display: block; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 2; + } + + .container { + z-index: 3; + } + } + .footer { + position: absolute; + width: 100%; + background: transparent; + bottom: 0; + color: $white-color; + z-index: 2; + + .copyright a{ + color: $white-color; + } + } + + .navbar { + .navbar-brand, + .navbar-collapse .nav-link { + color: $white-color; + } + } +} + + +// hinge card + + + +@-webkit-keyframes hinge { + 0% { + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 20%, 60% { + -webkit-transform: rotate3d(0, 0, 1, 80deg); + transform: rotate3d(0, 0, 1, 80deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 40%, 80% { + -webkit-transform: rotate3d(0, 0, 1, 60deg); + transform: rotate3d(0, 0, 1, 60deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + opacity: 1; + } + + to { + -webkit-transform: translate3d(0, 700px, 0); + transform: translate3d(0, 700px, 0); + opacity: 0; + } +} + +@keyframes hinge { + 0% { + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 20%, 60% { + -webkit-transform: rotate3d(0, 0, 1, 80deg); + transform: rotate3d(0, 0, 1, 80deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + + 40%, 80% { + -webkit-transform: rotate3d(0, 0, 1, 60deg); + transform: rotate3d(0, 0, 1, 60deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + opacity: 1; + } + + to { + -webkit-transform: translate3d(0, 700px, 0); + transform: translate3d(0, 700px, 0); + opacity: 0; + } +} + +.hinge { + -webkit-animation-name: hinge; + animation-name: hinge; +} + +.animated.hinge { + -webkit-animation-duration: 2s; + animation-duration: 2s; +} + +.animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.tim-row{ + margin-bottom: 20px; +} + +.tim-white-buttons { + background-color: #777777; +} +.title{ + margin-top: 30px; + margin-bottom: 25px; + min-height: 32px; +} + +#map { + position: relative; + z-index: 2; + width: 100%; + height: calc(100vh - 70px); + margin-top: 70px; +} + +.tim-typo{ + padding-left: 25%; + margin-bottom: 40px; + position: relative; + width: 100%; +} +.tim-typo .tim-note{ + bottom: 5px; + color: #c0c1c2; + display: block; + font-weight: 400; + font-size: 13px; + line-height: 15px; + left: 0; + margin-left: 20px; + position: absolute; + width: 260px; +} +.tim-row{ + padding-top: 50px; +} +.tim-row h3{ + margin-top: 0; +} +#typography h1, #typography h2, #typography h3, +#typography h4, #typography h5, #typography h6{ + margin-bottom: 0; +} + +.switch{ + margin-right: 20px; +} +#navbar-full .navbar{ + border-radius: 0 !important; + margin-bottom: 15px; + z-index: 2; +} +.space{ + height: 130px; + display: block; +} +.space-110{ + height: 110px; + display: block; +} +.space-50{ + height: 50px; + display: block; +} +.space-70{ + height: 70px; + display: block; +} +.navigation-example .img-src{ + background-attachment: scroll; +} + +.navigation-example{ + background-position: center center; + background-size: cover; + margin-top:0; + min-height: 740px; +} +#notifications{ + background-color: $white-color; + display: block; + width: 100%; + position: relative; +} +#notifications .alert-danger{ + margin-bottom: 0px; +} +.tim-note{ + text-transform: capitalize; +} + +#buttons .btn{ + margin: 0 0px 15px; +} +.space-100{ + height: 100px; + display: block; + width: 100%; +} + + // PARALLAX + +.parallax{ + width:100%; + height:570px; + + display: block; + background-attachment: fixed; + background-repeat:no-repeat; + background-size:cover; + background-position: center center; + +} +.parallax .parallax-image{ + width: 100%; + overflow: hidden; + position: absolute; +} +.parallax .parallax-image img{ + width: 100%; +} + +@media (max-width: 768px){ + .parallax .parallax-image{ + width: 100%; + height: 640px; + overflow: hidden; + } + .parallax .parallax-image img{ + height: 100%; + width: auto; + } +} + +.separator{ + content: "Separator"; + color: #FFFFFF; + display: block; + width: 100%; + padding: 20px; +} +.separator-line{ + background-color: #EEE; + height: 1px; + width: 100%; + display: block; +} +.separator.separator-gray{ + background-color: #EEEEEE; +} +.social-buttons-demo .btn{ + margin: 10px 5px 7px 1px; +} + +.img-container{ + width: 100%; + overflow: hidden; +} +.img-container img{ + width: 100%; +} + +.section-black { + background-color: #333; +} + +.animate { + transition: 1.5s ease-in-out; + -moz-transition: 1.5s ease-in-out; + -webkit-transition: 1.5s ease-in-out; +} + +.sharing-area{ + margin-top: 80px; +} +.sharing-area .btn{ + margin: 15px 4px 0; + color: #FFFFFF; +} +.sharing-area .btn i{ + font-size: 18px; + position: relative; + top: 2px; + margin-right: 5px; +} +#navbar{ + margin-bottom: -20px; +} +.sharing-area .btn-twitter{ + background-color: #55acee; +} +.sharing-area .btn-facebook{ + background-color: #3b5998; +} +.sharing-area .btn-google-plus{ + background-color: #dd4b39; +} +.sharing-area .btn-github{ + background-color: #333333; +} +#navbar .navbar{ + border-radius: 0; +} + +@media (max-width: 830px){ + .main-raised{ + margin-left: 10px; + margin-right: 10px; + } +} +@media (max-width: 767px){ + .tab-pane#schedule-2 { + padding-top: 20px; + } +} + +.bd-docs .bd-example.bd-example-popover-static .popover, +.bd-docs .bd-example.bd-example-tooltip-static .tooltip { + z-index: 3!important; +} + +@media all and (max-width: 375px) { + .page-header { + height: calc(100vh + 270px); + } + + .index-page { + overflow-x: hidden; + } + + .pagination { + &.pagination-primary { + .page-item:nth-of-type(3), + .page-item:nth-of-type(7) { + display: none; + } + } + &.pagination-info { + .page-item:nth-of-type(2) { + display: none; + } + } + } + + .main.main-raised { + margin-top: -30px; + } + + .form-group.is-focused { + .bootstrap-datetimepicker-widget { + left: -32px !important; + } + } +} + +.show.modal .dropdown-toggle:after { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); +} + +// timepicker increase/decrease buttons + +.bootstrap-datetimepicker-widget .timepicker { + .table-condesed .btn{ + .ripple-container { + width: 40px; + height: 40px; + margin: -11px 3px; + } + } +} + +// docs + + .bd-docs { + .bd-toc-item { + .bd-sidenav a span { + float: right; + margin-top: 5px; + padding: 3px 7px; + font-size: 8px; + line-height: 9px; + background-color: $brand-primary; + } + } + + .bd-content .bd-title { + .btn { + padding: 7px 20px; + margin-bottom: 10px; + } + } +} Index: lams_central/conf/scss/material-kit/_mixins.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_mixins.scss (revision 0) +++ lams_central/conf/scss/material-kit/_mixins.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,13 @@ +@import "mixins/utilities"; +@import "mixins/breakpoints"; +@import "mixins/animations"; +@import "mixins/type"; +@import "mixins/layout"; +@import "mixins/drawer"; +@import "mixins/forms"; +@import "mixins/buttons"; +@import "mixins/hover"; +@import "mixins/navs"; +@import "mixins/colored-shadows"; +@import "mixins/navbar-colors"; +@import "mixins/alert"; Index: lams_central/conf/scss/material-kit/_modal.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_modal.scss (revision 0) +++ lams_central/conf/scss/material-kit/_modal.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,91 @@ +// +// Modals +// Material Design element Dialogs +// -------------------------------------------------- +.modal-dialog { + & .modal-content{ + @include shadow-z-5(); + border-radius: $border-radius-large; + border: none; + + .card-signup{ + margin: 0; + + .modal-header{ + padding-top: 0; + } + } + } + + // Modal header + // Top section of the modal w/ title and dismiss + .modal-header { + border-bottom: none; + padding-top: 24px; + padding-right: 24px; + padding-bottom: 0; + padding-left: 24px; + } + // Modal body + // Where all modal content resides (sibling of .modal-header and .modal-footer) + .modal-body { + padding-top: 24px; + padding-right: 24px; + padding-bottom: 16px; + padding-left: 24px; + } + // Footer (for actions) + .modal-footer { + border-top: none; + padding: 24px; + + &.text-center{ + text-align: center; + } + + button { + margin: 0; + padding-left: 16px; + padding-right: 16px; + width: auto; + &.pull-left { + padding-left: 5px; + padding-right: 5px; + position: relative; + left: -5px; + } + } + } + .modal-body + .modal-footer { + padding-top: 0; + } +} +.modal-backdrop { + background: rgba(0,0,0,0.5); +} + +.modal{ + .modal-dialog{ + margin-top: 130px; + } + .modal-header .close{ + color: $gray-light; + + &:hover, + &:focus{ + opacity: 1; + } + + i{ + font-size: 16px; + } + } +} + +.show:not(.modal) .dropdown-toggle:after { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -o-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} Index: lams_central/conf/scss/material-kit/_nav.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_nav.scss (revision 0) +++ lams_central/conf/scss/material-kit/_nav.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,38 @@ +// https://www.google.com/design/spec/components/tabs.html#tabs-specs + +.nav-link { + //line-height: $bmd-nav-link-line-height; // set baseline line-height and font sizes + text-transform: uppercase; +} + +// navbars +.navbar-nav { + .nav-link { + padding: $bmd-navbar-link-padding; + font-size: $bmd-navbar-link-font-size; + font-weight: $bmd-navbar-link-font-weight; + } +} + +//pills and tabs +.nav-tabs, +.nav-pills { + border: 0; + border-radius: 3px; + padding: 0 15px; + + .nav-link { + padding: $bmd-nav-tabs-pills-link-padding; + font-size: $bmd-nav-tabs-pills-font-size; + font-weight: $bmd-nav-tabs-pills-font-weight; + border: 0; + } +} + + +// used to correctly size ripple container +.nav { + .nav-item { + position: relative; + } +} Index: lams_central/conf/scss/material-kit/_navbar.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_navbar.scss (revision 0) +++ lams_central/conf/scss/material-kit/_navbar.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,160 @@ +.navbar { + border: 0; + border-radius: $border-radius-base; + padding: 0.625rem 0; + margin-bottom: 20px; + @include navbar-colors($white-color, $navbar-color); + + &.fixed-top{ + border-radius: 0; + } + + .navbar-nav{ + .nav-item .nav-link{ + position: relative; + color: inherit; + padding: $padding-general-x; + font-weight: $font-weight-default; + font-size: $mdb-btn-font-size-base; + text-transform: uppercase; + border-radius: $border-radius-base; + line-height: 20px; + + &:not(.btn-just-icon) .fa{ + position: relative; + top: 2px; + margin-top: -4px; + margin-right: 4px; + } + + & .material-icons, + & .fa{ + font-size: $font-size-lg; + max-width: 24px; + margin-top: -1.1em; + } + + &:not(.btn) .material-icons{ + margin-top: -7px; + top: 3px; + position: relative; + margin-right: 3px; + } + + &.profile-photo{ + padding: 0; + margin: 0 3px; + + &:after{ + display: none; + } + + & .profile-photo-small{ + height: 40px; + width: 40px; + } + + .ripple-container{ + border-radius: 50%; + } + } + } + + .dropdown-menu-right{ + transform-origin: 100% 0; + } + + .nav-item.active .nav-link{ + &, + &:hover, + &:focus { + background-color: rgba(255, 255, 255, 0.1); + } + } + } + + .btn, + .navbar-nav .nav-item .btn{ + margin-top: 0; + margin-bottom: 0; + } + + .navbar-toggler{ + cursor: pointer; + + .navbar-toggler-icon{ + position: relative; + width: 22px; + height: 2px; + vertical-align: middle; + outline: 0; + display: block; + border-radius: 1px; + + & + .navbar-toggler-icon{ + margin-top: 4px; + } + } + } + + &.navbar-absolute{ + position: absolute; + width: 100%; + padding-top: 10px; + z-index: 1029; + } + + .navbar-wrapper{ + display: inline-flex; + align-items: center; + } + + // give correct size to ripple container + .navbar-brand { + position: relative; + color: inherit; + height: 50px; + font-size: $navbar-brand-font-size - 0.125; + line-height: 30px; + padding: $padding-general-y 0; + } + + &.bg-primary{ + @include navbar-colors($bg-primary, $white-color); + } + &.bg-info{ + @include navbar-colors($bg-info, $white-color); + } + + &.bg-warning{ + @include navbar-colors($bg-warning, $white-color); + } + + &.bg-rose{ + @include navbar-colors($bg-rose, $white-color); + } + + &.bg-danger{ + @include navbar-colors($bg-danger, $white-color); + } + + &.bg-success{ + @include navbar-colors($bg-success, $white-color); + } + &.bg-dark{ + @include navbar-colors($grey-900, $white-color); + } + + &.navbar-transparent{ + background-color: transparent !important; + box-shadow: none; + padding-top: 25px; + color: $white-color; + } + +} + +// for demo +#navbar .navbar{ + border-radius: 0; +} Index: lams_central/conf/scss/material-kit/_pagination.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_pagination.scss (revision 0) +++ lams_central/conf/scss/material-kit/_pagination.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,98 @@ +.pagination{ + > .page-item > .page-link, + > .page-item > span{ + border: 0; + border-radius: 30px !important; + transition: all .3s; + padding: 0px 11px; + margin: 0 3px; + min-width: 30px; + height: 30px; + line-height: 30px; + color: $gray-color; + font-weight: $font-weight-default; + font-size: $mdb-btn-font-size-base; + text-transform: uppercase; + background: transparent; + text-align: center; + + &:hover, + &:focus{ + color: $gray-color; + } + } + + > .page-item.active > a, + > .page-item.active > span{ + color: $gray-color; + + &, + &:focus, + &:hover{ + background-color: $brand-primary; + border-color: $brand-primary; + color: $white-color; + @include shadow-4dp-color($brand-primary); + } + + } + + // Colors + &.pagination-info{ + > .page-item.active > a, + > .page-item.active > span{ + &, + &:focus, + &:hover{ + background-color: $brand-info; + border-color: $brand-info; + @include shadow-4dp-color($brand-info); + } + } + } + + &.pagination-success{ + > .page-item.active > a, + > .page-item.active > span{ + &, + &:focus, + &:hover{ + background-color: $brand-success; + border-color: $brand-success; + @include shadow-4dp-color($brand-success); + } + } + } + + &.pagination-warning{ + > .page-item.active > a, + > .page-item.active > span{ + &, + &:focus, + &:hover{ + background-color: $brand-warning; + border-color: $brand-warning; + @include shadow-4dp-color($brand-warning); + } + } + } + + &.pagination-danger{ + > .page-item.active > a, + > .page-item.active > span{ + &, + &:focus, + &:hover{ + background-color: $brand-danger; + border-color: $brand-danger; + @include shadow-4dp-color($brand-danger); + } + } + } +} + +.pagination { + .page-item .page-link:focus { + box-shadow: none; + } +} Index: lams_central/conf/scss/material-kit/_pills.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_pills.scss (revision 0) +++ lams_central/conf/scss/material-kit/_pills.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,125 @@ +.nav-pills{ + + &:not(.flex-column) .nav-item + .nav-item:not(:first-child){ + margin-left: 5px; + } + + &.flex-column{ + .nav-item + .nav-item{ + margin-top: 5px; + } + } + + .nav-item { + .nav-link{ + line-height: $mdb-btn-font-size-base * 2; + text-transform: uppercase; + font-size: $mdb-btn-font-size-base; + font-weight: $font-weight-bold; + min-width: 100px; + text-align: center; + color: $pills-color; + transition: all .3s; + border-radius: 30px; + padding: 10px 15px; + + &:hover{ + background-color: rgba(200, 200, 200, 0.2); + } + + &.active{ + color: $white-color; + background-color: $brand-primary; + @include shadow-big-color($brand-primary); + } + } + + i{ + display: block; + font-size: 30px; + padding: 15px 0; + } + + } + + &.nav-pills-info{ + .nav-item { + .nav-link.active{ + &, + &:focus, + &:hover{ + background-color: $brand-info; + @include shadow-big-color($brand-info); + color: $white-color; + } + } + } + } + + &.nav-pills-rose{ + .nav-item { + .nav-link.active{ + &, + &:focus, + &:hover{ + background-color: $brand-rose; + @include shadow-big-color($brand-rose); + color: $white-color; + } + } + } + } + + &.nav-pills-success{ + .nav-item { + .nav-link.active{ + &, + &:focus, + &:hover{ + background-color: $brand-success; + @include shadow-big-color($brand-success); + color: $white-color; + } + } + } + } + + &.nav-pills-warning{ + .nav-item { + .nav-link.active{ + &, + &:focus, + &:hover{ + background-color: $brand-warning; + @include shadow-big-color($brand-warning); + color: $white-color; + } + } + } + } + + &.nav-pills-danger{ + .nav-item { + .nav-link.active{ + &, + &:focus, + &:hover{ + background-color: $brand-danger; + @include shadow-big-color($brand-danger); + color: $white-color; + } + } + } + } + + &.nav-pills-icons{ + .nav-item{ + .nav-link{ + border-radius: 4px; + } + } + } +} +.tab-space{ + padding: 20px 0 50px 0px; +} Index: lams_central/conf/scss/material-kit/_popover.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_popover.scss (revision 0) +++ lams_central/conf/scss/material-kit/_popover.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,53 @@ +.popover, .tooltip-inner { + line-height: 1.5em; + background: $white-color; + border: none; + border-radius: $border-radius-base; + @include shadow-8dp(); + color: $popover-color; +} + + +.popover{ + padding: 0; + @include shadow-16dp(); + + &.left, + &.right, + &.top, + &.bottom{ + > .arrow{ + border: none; + } + } + + + &.bs-popover-top, + &.bs-popover-auto[x-placement^="top"], + &.bs-popover-bottom, + &.bs-popover-auto[x-placement^="bottom"], + &.bs-popover-right, + &.bs-popover-auto[x-placement^="right"], + &.bs-popover-left, + &.bs-popover-auto[x-placement^="left"]{ + & .arrow::before{ + border: 0; + } + } + +} + +.popover-header{ + background-color: $white-color; + border: none; + padding: 15px 15px 5px; + font-size: $font-size-h4; + margin: 0; + color: $popover-color; +} + +.popover-body{ + padding: 10px 15px 15px; + line-height: 1.4; + color: $popover-color; +} Index: lams_central/conf/scss/material-kit/_progress.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_progress.scss (revision 0) +++ lams_central/conf/scss/material-kit/_progress.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,42 @@ +.progress { + height: 4px; + border-radius: 0; + box-shadow: none; + background: #DDDDDD; + margin-bottom: 20px; + .progress-bar { + box-shadow: none; + @include variations(unquote(".progress-bar"), unquote(""), background-color, $brand-primary); + &.progress-bar-primary{ + background: $brand-primary !important; + } + &.progress-bar-info{ + background: $brand-info; + } + &.progress-bar-success{ + background: $brand-success; + } + &.progress-bar-warning{ + background: $brand-warning; + } + &.progress-bar-danger{ + background: $brand-danger; + } + } + + &.progress-line-primary{ + background: rgba($brand-primary,.2); + } + &.progress-line-info{ + background: rgba($brand-info,.2); + } + &.progress-line-success{ + background: rgba($brand-success,.2); + } + &.progress-line-warning{ + background: rgba($brand-warning,.2); + } + &.progress-line-danger{ + background: rgba($brand-danger,.2); + } +} Index: lams_central/conf/scss/material-kit/_radios.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_radios.scss (revision 0) +++ lams_central/conf/scss/material-kit/_radios.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,186 @@ +@mixin radio-color($color, $opacity){ + & ~ .check, + & ~ .circle { + opacity: $opacity; + } + + & ~ .check { + background-color: $color; + } + + & ~ .circle { + border-color: $color; + } +} + +.form-check{ + .form-check-label { + cursor: pointer; + padding-left: 25px; + position: relative; + @include mdb-label-color-toggle-focus(); + + span { + display: block; + position: absolute; + left: -1px; + top: -1px; + transition-duration: 0.2s; + } + .circle { + border: 1px solid $mdb-radio-color-off; + height: 15px; + width: 15px; + border-radius: 100%; + top: 1px; + + .check { + height: 15px; + width: 15px; + border-radius: 100%; + background-color: $mdb-radio-color-on; + @include transform-scale3d(unquote('0,0,0')); + + + } + } + + } + + .form-check-input { + opacity: 0; + height: 0; + width: 0; + overflow: hidden; + + + &:checked { + @include radio-color($mdb-radio-color-on, 1); + + .check:before { + animation: checkboxOn .5s forwards; + } + } + &:checked ~ .circle .check { + @include transform-scale3d(unquote('0.65, 0.65, 1')); + } + + } + + .form-check-input[disabled] { + + // light theme spec: Disabled: #000000, Opacity 26% + @include radio-color($black, 0.26); + + & + .circle .check{ + background-color: $black; + } + } + + + .form-check-sign{ + vertical-align: middle; + position: relative; + top: -2px; + float: left; + padding-right: 10px; + display: inline-block; + + } + +} + +.form-check { + .form-check-label { + .circle { + &:before { + display: block; + position: absolute; + left: -1px; + content: ""; + background-color: rgba(0, 0, 0, 0.84); + height: 15px; + width: 15px; + border-radius: 100%; + z-index: 1; + opacity: 0; + margin: 0; + top: -1px; + -webkit-transform: scale3d(2.3,2.3,1); + -moz-transform: scale3d(2.3,2.3,1); + -o-transform: scale3d(2.3,2.3,1); + -ms-transform: scale3d(2.3,2.3,1); + transform: scale3d(2.3,2.3,1); + } + } + + .form-check-input:checked + .circle:before { + animation: rippleOn .5s; + } + + .form-check-input:checked + .circle .check:before { + color: #FFFFFF; + box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px; + animation: checkboxOn 0.3s forwards; + } + } +} + +.form-check + .form-check { + margin-top: 0; +} + +@keyframes checkboxOn { + 0% { + box-shadow: + 0 0 0 10px, + 10px -10px 0 10px, + 32px 0 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 15px 2px 0 11px; + } + 50% { + box-shadow: + 0 0 0 10px, + 10px -10px 0 10px, + 32px 0 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 20px 2px 0 11px; + } + 100% { + box-shadow: + 0 0 0 10px, + 10px -10px 0 10px, + 32px 0 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 20px -12px 0 11px; + } +} + + +@keyframes rippleOn { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} + +@keyframes rippleOff { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} Index: lams_central/conf/scss/material-kit/_reboot.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_reboot.scss (revision 0) +++ lams_central/conf/scss/material-kit/_reboot.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,24 @@ +body { + background-color: #FFFFFF; +} + +a { + &:focus { + outline: none; // remove the terrible @include tab-focus(); + } +} + +button:focus { + outline: none; + //outline: 1px dotted; + //outline: 5px auto -webkit-focus-ring-color; +} + +//// Prevent highlight on mobile +//* { +// -webkit-tap-highlight-color: rgba($white, 0); +// -webkit-tap-highlight-color: transparent; +// &:focus { +// outline: 0; +// } +//} Index: lams_central/conf/scss/material-kit/_responsive.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_responsive.scss (revision 0) +++ lams_central/conf/scss/material-kit/_responsive.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,441 @@ +@media all and (max-width: 991px) { + [class*="navbar-expand-"] > .container, + [class*="navbar-expand-"] > .container-fluid{ + padding-left: 15px; + padding-right: 15px; + } + + // multilevel dropdown-menu + + .dropdown-menu.show { + .dropdown-item.open + .dropdown-menu.show { + right: 101% !important; + + .dropdown-item.open + .dropdown-menu, + .dropdown-item.open + .dropdown-menu.show,{ + left: -165px !important; + } + } + } + + .navbar .navbar-collapse .navbar-nav > li.button-container{ + padding: 15px; + } + + .carousel .card .card-body{ + max-width: 340px; + margin: 0 auto; + min-height: 400px; + } + + .navbar-collapse{ + position: fixed; + display: block; + top: 0px; + height: 100vh; + width: 230px; + right: 0; + margin-right: 0 !important; + z-index: 1032; + visibility: visible; + background-color: #999; + overflow-y: visible; + border-top: none; + text-align: left; + padding-right: 0; + padding-left: 0; + + max-height: none !important; + + @include transform-translate-x(230px); + @include transitions (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + + &::after{ + top: 0; + left: 0; + height: 100%; + width: 100%; + position: absolute; + background-color: $white-color; + display: block; + content: ""; + z-index: 1; + } + + .dropdown-toggle:after{ + position: absolute; + right: 16px; + margin-top: 8px; + } + + .navbar-nav{ + position: relative; + z-index: 3; + + .nav-item{ + .nav-link{ + color: $black-color; + margin: 5px 15px; + } + + &.active .nav-link, + &.active .nav-link:hover, + &.active .nav-link:focus, + &.active .nav-link:active{ + background-color: rgba(236, 237, 239, 1); + color: $black-color; + } + + &.button-container .nav-link{ + margin: 15px; + } + + &:after{ + width: calc(100% - 30px); + content: ""; + display: block; + height: 1px; + margin-left: 15px; + background-color: #e5e5e5; + } + + &:last-child { + &:after{ + display: none; + } + } + } + } + + .nav-open &{ + @include transform-translate-x(0px); + } + } + + .nav-open{ + .navbar-translate{ + @include transform-translate-x(-230px); + } + } + + .navbar{ + .navbar-translate{ + width: 100%; + position: relative; + display: flex; + -ms-flex-pack: justify !important; + justify-content: space-between !important; + -ms-flex-align: center; + align-items: center; + @include transitions-property (transform, 0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + } + + .dropdown.show .dropdown-menu{ + display: block; + } + + .dropdown .dropdown-menu{ + display: none; + } + + .dropdown-menu{ + .dropdown-item{ + margin-left: 1.5rem; + margin-right: 1.5rem; + } + } + + .dropdown.show .dropdown-menu, + .dropdown .dropdown-menu{ + background-color: transparent; + border: 0; + padding-bottom: 15px; + transition: none; + -webkit-box-shadow: none; + box-shadow: none; + transform: none !important; + width: auto; + margin-bottom: 15px; + padding-top: 0; + height: 300px; + animation: none; + opacity: 1; + overflow-y: scroll; + } + } + + .navbar.navbar-transparent{ + .navbar-toggler{ + .navbar-toggler-icon{ + background-color: $white-color; + } + } + } + + #bodyClick { + height: 100%; + width: 100%; + position: fixed; + opacity: 0; + top: 0; + left: auto; + right: 230px; + content: ""; + z-index: 1029; + overflow-x: hidden; + } + + // for demo + #navbar .navbar-collapse, + #navigation .navbar-collapse{ + display: none !important; + } + +} + +@media all and (min-width: 991px) { + .navbar .navbar-nav{ + align-items: center; + + .button-container{ + margin-left: 0.1875px; + } + } + .contactus-2{ + .card-contact{ + margin: 80px 0 80px 150px; + } + } + + .index-page { + .fileinput-new.thumbnail.img-circle { + margin-top: 50px; + } + } +} + +@media screen and (max-width: 991px) { + .presentation-page { + .section-components { + .components-macbook { + max-width: 850px !important; + max-height: 480px !important; + margin-top: 12vh; + left: -12px; + } + .coloured-card-img, + .table-img { + display: none; + } + .social-img { + left: 47%; + top: 37%; + } + .pin-btn-img { + top: 54%; + } + .share-btn-img { + top: 12%; + } + .coloured-card-btn-img { + top: -2%; + left: 65%; + } + } + .section-content { + .area-img { + max-width: 130px; + max-height: 170px; + } + .info-img { + max-width: 170px; + max-height: 120px; + } + } + } + + @include topbar-x-rotation(); + @include topbar-back-rotation(); + @include bottombar-x-rotation(); + @include bottombar-back-rotation(); + + .navbar { + .navbar-toggler{ + .navbar-toggler-icon:nth-child(2){ + top: 0px; + @include bar-animation(topbar-back); + } + .navbar-toggler-icon:nth-child(3){ + opacity: 1; + } + .navbar-toggler-icon:nth-child(4){ + bottom: 0px; + @include bar-animation(bottombar-back); + } + + &.toggled{ + .navbar-toggler-icon:nth-child(2){ + top: 6px; + @include bar-animation(topbar-x); + } + .navbar-toggler-icon:nth-child(3){ + opacity: 0; + } + .navbar-toggler-icon:nth-child(4){ + bottom: 6px; + @include bar-animation(bottombar-x); + } + } + } + } +} + +@media screen and (max-width: 767px) { + .presentation-page { + .section-components { + .components-macbook { + max-width: 350px !important; + max-height: 250px !important; + margin-top: 12vh; + left: -12px; + } + .coloured-card-img, + .table-img { + display: none; + } + .social-img { + left: -7%; + top: 37%; + } + .pin-btn-img { + top: 54%; + } + .share-btn-img { + top: 7%; + } + .coloured-card-btn-img { + top: -2%; + } + } + } + + .card.card-form-horizontal { + .input-group { + padding-bottom: 10px; + } + } + + .presentation-page, + .index-page, + .section-page{ + #cd-vertical-nav{ + display: none; + } + } + + .index-page{ + .cd-section{ + .tim-typo .tim-note{ + width: 60px; + } + } + } + + .login-page { + .page-header { + min-height: 100vh; + max-height: 1000px; + height: 100%; + + > .container { + padding-top: 20vh; + padding-bottom: 200px; + } + } + } +} + +@media screen and (max-width: 400px){ + .cd-vertical-nav{ + display: none !important; + } +} + +@media screen and (min-width: 767px){ + .bd-docs .bd-example { + .card.card-profile { + .card-header-image { + max-height: 100% !important; + } + } + } + .card-profile { + .card-header-image { + max-height: 215px; + } + } +} + + +// Menu on LEFT + +@media screen and (max-width: 991px){ + .menu-on-left{ + .page-header, + .main, + .navbar > div { + @include transform-translate-x(0px); + transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); + } + + .navbar .collapse{ + left: 0; + top: -25px; + right: auto; + @include transform-translate-x(-230px); + } + + .navbar .navbar-translate{ + .navbar-brand { + position: absolute; + right: 0; + top: -15px; + } + } + } + + .nav-open { + .menu-on-left { + .page-header, + .main { + @include transform-translate-x(230px); + } + + .navbar .collapse{ + @include transform-translate-x(0px); + } + + .navbar > div .navbar-translate { + @include transform-translate-x(230px); + transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); + } + } + } +} + +@media (min-width: 575px) and (max-width: 991px){ + .menu-on-left { + .navbar .collapse { + @include transform-translate-x(-255px); + } + } + + .nav-open { + .menu-on-left { + .navbar .collapse { + @include transform-translate-x(-25px); + width: 245px; + } + } + } +} Index: lams_central/conf/scss/material-kit/_ripples.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_ripples.scss (revision 0) +++ lams_central/conf/scss/material-kit/_ripples.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,41 @@ +// marker class (used as a selector for one-off elements to decorate) +.ripple { + position: relative; +} + +.ripple-container { + position: absolute; + top: 0; + left: 0; + z-index: 1; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; + border-radius: inherit; + + .ripple-decorator { + position: absolute; + width: 20px; + height: 20px; + margin-top: -10px; + margin-left: -10px; + pointer-events: none; + background-color: rgba($black, 0.05); + border-radius: 100%; + opacity: 0; + transform: scale(1); + transform-origin: 50%; + + &.ripple-on { + opacity: 0.1; + transition: opacity 0.15s ease-in 0s, + transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; + } + + &.ripple-out { + opacity: 0; + transition: opacity 0.1s linear 0s !important; + } + } +} Index: lams_central/conf/scss/material-kit/_switches.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_switches.scss (revision 0) +++ lams_central/conf/scss/material-kit/_switches.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,86 @@ +// http://codepen.io/rosskevin/pen/EPPwRR?editors=110 +.switch { + label { + position: relative; + padding-left: $bmd-switch-width + $bmd-switch-label-padding; // absolutely positioned so add the radio size + + .bmd-switch-track { + position: absolute; + top: calc-top($line-height-base, $font-size-base, $bmd-switch-height); + left: 0; + display: inline-block; + width: $bmd-switch-width; + height: $bmd-switch-height; + cursor: pointer; + background-image: linear-gradient( + to right, + $bmd-switch-unchecked-bg 0%, + $bmd-switch-unchecked-bg 50%, + $bmd-switch-checked-bg 50%, + $bmd-switch-checked-bg 100% + ); + background-position: 0%; + background-size: $bmd-switch-width * 2 $bmd-switch-height; + border-radius: $bmd-switch-width; + transition: background-position 0.2s ease-in; + + &::after { + position: absolute; + top: 50%; + left: 0; + display: block; + align-self: center; + width: $bmd-switch-handle-size; + height: $bmd-switch-handle-size; + content: ""; + background: $bmd-switch-handle-unchecked-bg; + border-radius: 100%; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); + transition: left 0.2s ease-in, background-color 0.2s ease-in, + transform 0.3s ease; + transform: translateY(-50%); + } + + // Jelly effect on click + &:active::after { + transform: translateY(-50%) scale3d(1.15, 0.85, 1); + } + } + + input { + // Hide original checkbox, but don't use `display: none` to allow focus on it using keyboard + position: absolute; + display: block; + width: 0; + height: 0; + opacity: 0; + + &:checked { + + .bmd-switch-track { + background-position: -100%; + &::after { + left: unquote( + "calc(100% - #{$bmd-switch-handle-size})" + ); //calc(100% - $bmd-switch-handle-size); + background-color: $bmd-switch-handle-checked-bg; + } + } + } + + &:disabled { + // No jelly effect on disabled switchs + + .bmd-switch-track:active::after { + transform: translateY(-50%); + } + + + .bmd-switch-track { + cursor: default; + background: $bmd-switch-disabled-bg; + &::after { + background: $bmd-switch-handle-disabled-bg; + } + } + } + } + } +} Index: lams_central/conf/scss/material-kit/_tabs.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_tabs.scss (revision 0) +++ lams_central/conf/scss/material-kit/_tabs.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,73 @@ + +.nav-tabs { + border: 0; + border-radius: $border-radius-base; + padding: 0 15px; + + .nav-item { + .nav-link { + color: $white-color; + border: 0; + margin: 0; + border-radius: $border-radius-base; + line-height: $mdb-btn-font-size-base * 2; + text-transform: uppercase; + font-size: $mdb-btn-font-size-base; + padding: 10px 15px; + background-color: transparent; + transition: 0.3s background-color 0s; + + &:hover { + border: 0; + } + } + .nav-link, + .nav-link:hover, + .nav-link:focus { + border: 0 !important; + color: $white-color !important; + font-weight: $font-weight-bold; + } + &.disabled .nav-link, + &.disabled .nav-link:hover { + color: rgba(255,255,255,0.5); + } + + .material-icons{ + margin: -1px 5px 0 0; + } + + .nav-link.active{ + background-color: rgba(255,255,255, .2); + transition: 0.3s background-color 0.2s; + } + } +} + + +.nav-tabs { + .nav-link { + border-bottom: $bmd-nav-tabs-border-size solid transparent; + } + + // colors + @include bmd-tabs-color($bmd-nav-tabs-color, $bmd-nav-tabs-active-color, $bmd-nav-tabs-active-border-color, $bmd-nav-tabs-disabled-link-color, $bmd-nav-tabs-disabled-link-color-hover); + + &.header-primary { + @include bmd-tabs-color($bmd-nav-tabs-primary-color, $bmd-nav-tabs-primary-active-color, $bmd-nav-tabs-primary-active-border-color, $bmd-nav-tabs-primary-disabled-link-color, $bmd-nav-tabs-primary-disabled-link-color-hover); + } + + &.bg-inverse { + @include bmd-tabs-color($bmd-nav-tabs-inverse-color, $bmd-nav-tabs-inverse-active-color, $bmd-nav-tabs-inverse-active-border-color, $bmd-nav-tabs-inverse-disabled-link-color, $bmd-nav-tabs-inverse-disabled-link-color-hover); + } +} + + + +.card-nav-tabs{ + margin-top: 45px; + + .card-header{ + margin-top: -30px !important; + } +} Index: lams_central/conf/scss/material-kit/_togglebutton.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_togglebutton.scss (revision 0) +++ lams_central/conf/scss/material-kit/_togglebutton.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,85 @@ +.togglebutton { + vertical-align: middle; + &, label, input, .toggle { + user-select: none; + } + label { + cursor: pointer; + color: $mdb-toggle-label-color; + @include mdb-label-color-toggle-focus(); + + // Hide original checkbox + input[type=checkbox] { + opacity: 0; + width: 0; + height: 0; + } + + .toggle { + text-align: left; // Issue #737 horizontal form + margin-left: 5px; + } + // Switch bg off and disabled + .toggle, + input[type=checkbox][disabled] + .toggle { + content: ""; + display: inline-block; + width: 30px; + height: 15px; + background-color: rgba(80, 80, 80, 0.7); + border-radius: 15px; + margin-right: 15px; + transition: background 0.3s ease; + vertical-align: middle; + } + // Handle off + .toggle:after { + content: ""; + display: inline-block; + width: 20px; + height: 20px; + background-color: #FFFFFF; + border-radius: 20px; + position: relative; + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4); + left: -5px; + top: -2.5px; + border: 1px solid $mdb-checkbox-border-color; + transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease; + } + input[type=checkbox] { + // Handle disabled + &[disabled] { + & + .toggle:after, + &:checked + .toggle:after { + background-color: #BDBDBD; + } + } + + & + .toggle:active:after, + &[disabled] + .toggle:active:after { + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1); + } + + // Ripple off and disabled + &:checked + .toggle:after { + left: 15px; + } + } + + // set bg when checked + input[type=checkbox]:checked { + + .toggle { + background-color: rgba($brand-primary, (70/100)); // Switch bg on + } + + + .toggle:after { + border-color: $brand-primary; // Handle on + } + + + .toggle:active:after { + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on + } + } + } +} Index: lams_central/conf/scss/material-kit/_tooltip.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_tooltip.scss (revision 0) +++ lams_central/conf/scss/material-kit/_tooltip.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,49 @@ +// specs https://material.google.com/components/tooltips.html#tooltips-tooltips-desktop- + +.tooltip-arrow { + display: none; +} + +.tooltip.show{ + opacity: 1; + @include transform-translate-y(0px); + + +} +.tooltip{ + opacity: 0; + transition: opacity, transform .2s ease; + @include transform-translate-y(5px); + font-size: $tooltip-font-size; + + &.bs-tooltip-top, + &.bs-tooltip-auto[x-placement^="top"]{ + & .arrow::before{ + border-top-color: $white-color; + } + } + + &.bs-tooltip-right, + &.bs-tooltip-auto[x-placement^="right"]{ + & .arrow::before{ + border-right-color: $white-color; + } + } + &.bs-tooltip-left, + &.bs-tooltip-auto[x-placement^="left"]{ + & .arrow::before{ + border-left-color: $white-color; + } + } + &.bs-tooltip-bottom, + &.bs-tooltip-auto[x-placement^="bottom"]{ + & .arrow::before{ + border-bottom-color: $white-color; + } + } +} + +.tooltip-inner{ + padding: 10px 15px; + min-width: 130px; +} Index: lams_central/conf/scss/material-kit/_type.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_type.scss (revision 0) +++ lams_central/conf/scss/material-kit/_type.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,145 @@ +body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { + font-family: $font-family-sans-serif; + font-weight: 300; + line-height: 1.5em; +} + +h1,h2,h3,.h1,.h2,.h3{ + margin-top: 20px; + margin-bottom: 10px; +} + +h4,h5,h6,.h4,.h5,.h6{ + margin-top: 10px; + margin-bottom: 10px; +} + +html *{ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +h1, .h1 { + font-size: $font-size-h1; + line-height: 1.15em; +} +h2, .h2{ + font-size: $font-size-h2; + line-height: 1.5em; +} +h3, .h3{ + font-size: $font-size-h3; + line-height: 1.4em; +} +h4, .h4{ + font-size: $font-size-h4; + line-height: 1.5em; +} +h5, .h5 { + font-size: $font-size-h5; + line-height: 1.55em; + margin-bottom: 15px; +} +h6, .h6{ + font-size: $font-size-h6; + text-transform: uppercase; + font-weight: $font-weight-bold; +} +p{ + font-size: $font-paragraph; + margin: 0 0 10px; +} + +b{ + font-weight: 700; +} + +small, +.small{ + font-size: 75%; + color: #777; +} + +.title, +.card-title, +.info-title, +.footer-brand, +.footer-big h5, +.footer-big h4, +.media .media-heading{ + font-weight: $font-weight-extra-bold; + font-family: $font-family-serif; + + &, + a{ + color: $black-color; + text-decoration: none; + } +} + +h2.title{ + margin-bottom: $headings-margin-bottom * 2; +} + +.description, +.card-description, +.footer-big p{ + color: $gray-light; +} + +.text-warning { + color: $brand-warning !important; +} +.text-primary { + color: $brand-primary !important; +} +.text-danger { + color: $brand-danger !important; +} +.text-success { + color: $brand-success !important; +} +.text-info { + color: $brand-info !important; +} +.text-rose{ + color: $brand-rose !important; +} +.text-gray{ + color: $gray-color !important; +} + +.space{ + height: 130px; + display: block; +} +.space-110{ + height: 110px; + display: block; +} +.space-50{ + height: 50px; + display: block; +} +.space-70{ + height: 70px; + display: block; +} + +.blockquote{ + padding: 10px 20px; + margin: 0 0 20px; + border-left: 5px solid #eee; + + p{ + font-size: 1.063rem; + font-style: italic; + } + + small{ + display: block; + font-size: 80%; + line-height: 1.42857143; + color: #777; + } +} Index: lams_central/conf/scss/material-kit/_variables.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/_variables.scss (revision 0) +++ lams_central/conf/scss/material-kit/_variables.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,39 @@ +@import "variables/colors"; +@import "variables/shadow"; + +@import "variables/bootstrap-material-design-base"; + +// Customized BS variables +@import "variables/custom-forms"; +@import "variables/spacing"; +@import "variables/body"; +@import "variables/brand"; +@import "variables/buttons"; +@import "variables/card"; +@import "variables/code"; +@import "variables/dropdown"; +@import "variables/forms"; +@import "variables/list-group"; +@import "variables/nav"; +@import "variables/pagination"; +@import "variables/state"; +@import "variables/tables"; +@import "variables/tooltip"; +@import "variables/type"; +@import "variables/modals"; +@import "variables/carousel"; + +// import their vars after customization for use below +$enable-flex: true; // fully adopt flexbox layouts +$enable-shadows: true; // enable shadows, set to false to turn off shadows + +// Core Bootstrap Variables +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; + +@import "variables/layout"; +@import "variables/menu"; +@import "variables/drawer"; +@import "variables/snackbar"; + +@import "variables/bootstrap-material-design"; Index: lams_central/conf/scss/material-kit/bootstrap/scss/_alert.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/bootstrap/scss/_alert.scss (revision 0) +++ lams_central/conf/scss/material-kit/bootstrap/scss/_alert.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,51 @@ +// +// Base styles +// + +.alert { + position: relative; + padding: $alert-padding-y $alert-padding-x; + margin-bottom: $alert-margin-bottom; + border: $alert-border-width solid transparent; + @include border-radius($alert-border-radius); +} + +// Headings for larger alerts +.alert-heading { + // Specified to prevent conflicts of changing $headings-color + color: inherit; +} + +// Provide class for links that match alerts +.alert-link { + font-weight: $alert-link-font-weight; +} + + +// Dismissible alerts +// +// Expand the right padding and account for the close button's positioning. + +.alert-dismissible { + padding-right: ($close-font-size + $alert-padding-x * 2); + + // Adjust close link position + .close { + position: absolute; + top: 0; + right: 0; + padding: $alert-padding-y $alert-padding-x; + color: inherit; + } +} + + +// Alternate styles +// +// Generate contextual modifier classes for colorizing the alert. + +@each $color, $value in $theme-colors { + .alert-#{$color} { + @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); + } +} Index: lams_central/conf/scss/material-kit/bootstrap/scss/_badge.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/bootstrap/scss/_badge.scss (revision 0) +++ lams_central/conf/scss/material-kit/bootstrap/scss/_badge.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,47 @@ +// Base class +// +// Requires one of the contextual, color modifier classes for `color` and +// `background-color`. + +.badge { + display: inline-block; + padding: $badge-padding-y $badge-padding-x; + font-size: $badge-font-size; + font-weight: $badge-font-weight; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + @include border-radius($badge-border-radius); + + // Empty badges collapse automatically + &:empty { + display: none; + } +} + +// Quick fix for badges in buttons +.btn .badge { + position: relative; + top: -1px; +} + +// Pill badges +// +// Make them extra rounded with a modifier to replace v3's badges. + +.badge-pill { + padding-right: $badge-pill-padding-x; + padding-left: $badge-pill-padding-x; + @include border-radius($badge-pill-border-radius); +} + +// Colors +// +// Contextual variations (linked badges get darker on :hover). + +@each $color, $value in $theme-colors { + .badge-#{$color} { + @include badge-variant($value); + } +} Index: lams_central/conf/scss/material-kit/bootstrap/scss/_breadcrumb.scss =================================================================== diff -u --- lams_central/conf/scss/material-kit/bootstrap/scss/_breadcrumb.scss (revision 0) +++ lams_central/conf/scss/material-kit/bootstrap/scss/_breadcrumb.scss (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,38 @@ +.breadcrumb { + display: flex; + flex-wrap: wrap; + padding: $breadcrumb-padding-y $breadcrumb-padding-x; + margin-bottom: $breadcrumb-margin-bottom; + list-style: none; + background-color: $breadcrumb-bg; + @include border-radius($border-radius); +} + +.breadcrumb-item { + // The separator between breadcrumbs (by default, a forward-slash: "/") + + .breadcrumb-item::before { + display: inline-block; // Suppress underlining of the separator in modern browsers + padding-right: $breadcrumb-item-padding; + padding-left: $breadcrumb-item-padding; + color: $breadcrumb-divider-color; + content: "#{$breadcrumb-divider}"; + } + + // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built + // without `

+ + +

+ +

Menu with Icons

+ + +

+ +

Navigation

+ +

+ + +

+ + + +

+ + Discover + +
+ + Wishlist + +
+ + + +
+ +
+ +
+ +
+
Dropdown header
+ Me + Settings and other stuff + Sign out +
+

+ +

+ + +

+ + + + + +

+ +

+ + +

+ +

Navigation Tabs

+ Tabs with Icons on Card +

+ +

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.

I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.

I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.

+ +

+ Tabs on Plain Card +

+ +

+ + +

+ +

Navigation Pills

+ With Icons +

+ + Dashboard + +
+ + Schedule + +
+ + Tasks + +

+ Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. +
+
Dramatically visualize customer directed convergence without revolutionary ROI. +

+ Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. +
+
Dramatically maintain clicks-and-mortar solutions without functional solutions. +

+ Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. +
+
Dynamically innovate resource-leveling customer service for state of the art customer service. +

+ + Dashboard + +
+ + Schedule + +

+ +

Notifications

+ +

+ + Info alert: You've got some friends nearby, stop looking at your phone and find them... +

+ +

+ + Success Alert: Yuhuuu! You've got your $11.99 album from The Weeknd +

+ +

+ + Error Alert: Damn man! You screwed up the server this time. You should find a good excuse for your Boss... +

+ +

Typography

+ Header 1The Life of Material Kit

+ Header 2The Life of Material Kit

+ Header 3The Life of Material Kit

+ Header 4The Life of Material Kit

+ Header 5The Life of Material Kit

+ Header 6The Life of Material Kit

+ Header 1 TitleThe Life of Material Kit

+ Header 2 TitleThe Life of Material Kit

+ Header 3 TitleThe Life of Material Kit

+ Header 4 TitleThe Life of Material Kit

+ Paragraph + I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.

+ Quote +

+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. +

+ + Kanye West, Musician + +

+ Muted Text +

+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... +

+ Primary Text +

+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

+ Info Text +

+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

+ Success Text +

+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

+ Warning Text +

+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... +

+ Danger Text +

+ I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

+ Small Tag + Header with small subtitle +
+ Use "small" tag for the headers +

+ +

Images

+
+

Rounded Image

Circle Image

Rounded Raised

Circle Raised

+ +

Javascript components

+ +

Modal

+ +

Datetime Picker

+ Datetime Picker + +

Popovers

+ + + + +
+
+

Tooltips

+ + + + +

+ +

Carousel

+ +

+ Yellowstone National Park, United States +

+ Somewhere Beyond, United States +

+ Yellowstone National Park, United States +

+ + + + + + + + +

+ +

Completed with examples

The kit comes with three pre-built pages to help you get started faster. You can change the text and images and you're good to go. More importantly, looking at them will give you a picture of what you can built with this powerful kit.

Login

+ +

Or Be Classical

+ + + +

+ +

+ + + +

+ +

+ + + +

+ +

+ Get Started +

+ View Login Page +

+ + Rounded Image

+ + +

+ +

+ + +

Do you love this UI Kit?

Cause if you do, it can be yours for FREE. Hit the buttons below to navigate to our website where you can find the kit. Our friends from + ThemeIsle created a Wordpress Theme which can be also downloaded for free. Start a new project or give an old Bootstrap project a new look!

+ + Free HTML Download + + + Wordpress Theme + +

+
+
+

Want more?

We've just launched + Material Kit PRO. It has a huge number of components, sections and example pages. Start Your Development With A Badass Bootstrap UI Kit inspired by Material Design.

+ + Upgrade to PRO + +

+ +

+ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file Index: lams_central/web/forgotPassword.jsp =================================================================== diff -u -r139e91caa1fc95af99802e31cb3a4b57ef7ebc5e -r32670937f259e2c8a712e1dd2cd6bb5731f466c9 --- lams_central/web/forgotPassword.jsp (.../forgotPassword.jsp) (revision 139e91caa1fc95af99802e31cb3a4b57ef7ebc5e) +++ lams_central/web/forgotPassword.jsp (.../forgotPassword.jsp) (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -100,7 +100,7 @@

Index: lams_central/web/includes/javascript/bootstrap-datetimepicker.js =================================================================== diff -u --- lams_central/web/includes/javascript/bootstrap-datetimepicker.js (revision 0) +++ lams_central/web/includes/javascript/bootstrap-datetimepicker.js (revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9) @@ -0,0 +1,1011 @@ +/*! version : 4.17.47 + ========================================================= + bootstrap-datetimejs + https://github.com/Eonasdan/bootstrap-datetimepicker + Copyright (c) 2015 Jonathan Peterson + ========================================================= + */ +/* + The MIT License (MIT) + + Copyright (c) 2015 Jonathan Peterson + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in + all copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + THE SOFTWARE. + */ +/*global define:false */ +/*global exports:false */ +/*global require:false */ +/*global jQuery:false */ +/*global moment:false */ + +/* + + + Creative Tim Modifications + + We added class btn-primary for custom styling button. + + +*/ + +! function(e) { + "use strict"; + if ("function" == typeof define && define.amd) define(["jquery", "moment"], e); + else if ("object" == typeof exports) module.exports = e(require("jquery"), require("moment")); + else { + if ("undefined" == typeof jQuery) throw "bootstrap-datetimepicker requires jQuery to be loaded first"; + if ("undefined" == typeof moment) throw "bootstrap-datetimepicker requires Moment.js to be loaded first"; + e(jQuery, moment) + } +}(function(e, t) { + "use strict"; + if (!t) throw new Error("bootstrap-datetimepicker requires Moment.js to be loaded first"); + var n = function(n, a) { + var r, i, o, s, d, l, p, c = {}, + u = !0, + f = !1, + h = !1, + m = 0, + y = [{ + clsName: "days", + navFnc: "M", + navStep: 1 + }, { + clsName: "months", + navFnc: "y", + navStep: 1 + }, { + clsName: "years", + navFnc: "y", + navStep: 10 + }, { + clsName: "decades", + navFnc: "y", + navStep: 100 + }], + b = ["days", "months", "years", "decades"], + g = ["top", "bottom", "auto"], + w = ["left", "right", "auto"], + v = ["default", "top", "bottom"], + k = { + up: 38, + 38: "up", + down: 40, + 40: "down", + left: 37, + 37: "left", + right: 39, + 39: "right", + tab: 9, + 9: "tab", + escape: 27, + 27: "escape", + enter: 13, + 13: "enter", + pageUp: 33, + 33: "pageUp", + pageDown: 34, + 34: "pageDown", + shift: 16, + 16: "shift", + control: 17, + 17: "control", + space: 32, + 32: "space", + t: 84, + 84: "t", + delete: 46, + 46: "delete" + }, + D = {}, + C = function() { + return void 0 !== t.tz && void 0 !== a.timeZone && null !== a.timeZone && "" !== a.timeZone + }, + x = function(e) { + var n; + return n = void 0 === e || null === e ? t() : t.isDate(e) || t.isMoment(e) ? t(e) : C() ? t.tz(e, l, a.useStrict, a.timeZone) : t(e, l, a.useStrict), C() && n.tz(a.timeZone), n + }, + T = function(e) { + if ("string" != typeof e || e.length > 1) throw new TypeError("isEnabled expects a single character string parameter"); + switch (e) { + case "y": + return -1 !== d.indexOf("Y"); + case "M": + return -1 !== d.indexOf("M"); + case "d": + return -1 !== d.toLowerCase().indexOf("d"); + case "h": + case "H": + return -1 !== d.toLowerCase().indexOf("h"); + case "m": + return -1 !== d.indexOf("m"); + case "s": + return -1 !== d.indexOf("s"); + default: + return !1 + } + }, + M = function() { + return T("h") || T("m") || T("s") + }, + S = function() { + return T("y") || T("M") || T("d") + }, + O = function() { + var t = e("").append(e("").append(e("").addClass("prev").attr("data-action", "previous").append(e("").addClass(a.icons.previous))).append(e("").addClass("picker-switch").attr("data-action", "pickerSwitch").attr("colspan", a.calendarWeeks ? "6" : "5")).append(e("").addClass("next").attr("data-action", "next").append(e("").addClass(a.icons.next)))), + n = e("").append(e("").append(e("").attr("colspan", a.calendarWeeks ? "8" : "7"))); + return [e("

").addClass("datepicker-days").append(e("").addClass("table-condensed").append(t).append(e(""))), e("

").addClass("datepicker-months").append(e("

").addClass("table-condensed").append(t.clone()).append(n.clone())), e("

").addClass("datepicker-years").append(e("

").addClass("table-condensed").append(t.clone()).append(n.clone())), e("

").addClass("datepicker-decades").append(e("

").addClass("table-condensed").append(t.clone()).append(n.clone()))] + }, + P = function() { + var t = e(""), + n = e(""), + r = e(""); + return T("h") && (t.append(e("

").append(e("").attr({ + href: "#", + tabindex: "-1", + title: a.tooltips.incrementHour + }).addClass("btn").attr("data-action", "incrementHours").append(e("").addClass(a.icons.up)))), n.append(e("

").append(e("").addClass("timepicker-hour").attr({ + "data-time-component": "hours", + title: a.tooltips.pickHour + }).attr("data-action", "showHours"))), r.append(e("

").append(e("").attr({ + href: "#", + tabindex: "-1", + title: a.tooltips.decrementHour + }).addClass("btn").attr("data-action", "decrementHours").append(e("").addClass(a.icons.down))))), T("m") && (T("h") && (t.append(e("

").addClass("separator")), n.append(e("

").addClass("separator").html(":")), r.append(e("

").addClass("separator"))), t.append(e("

").append(e("").attr({ + href: "#", + tabindex: "-1", + title: a.tooltips.incrementMinute + }).addClass("btn").attr("data-action", "incrementMinutes").append(e("").addClass(a.icons.up)))), n.append(e("

").append(e("").addClass("timepicker-minute").attr({ + "data-time-component": "minutes", + title: a.tooltips.pickMinute + }).attr("data-action", "showMinutes"))), r.append(e("

").append(e("").attr({ + href: "#", + tabindex: "-1", + title: a.tooltips.decrementMinute + }).addClass("btn").attr("data-action", "decrementMinutes").append(e("").addClass(a.icons.down))))), T("s") && (T("m") && (t.append(e("

").addClass("separator")), n.append(e("

").addClass("separator").html(":")), r.append(e("

").addClass("separator"))), t.append(e("

").append(e("").attr({ + href: "#", + tabindex: "-1", + title: a.tooltips.incrementSecond + }).addClass("btn btn-link").attr("data-action", "incrementSeconds").append(e("").addClass(a.icons.up)))), n.append(e("

").append(e("").addClass("timepicker-second").attr({ + "data-time-component": "seconds", + title: a.tooltips.pickSecond + }).attr("data-action", "showSeconds"))), r.append(e("

").append(e("").attr({ + href: "#", + tabindex: "-1", + title: a.tooltips.decrementSecond + }).addClass("btn btn-link").attr("data-action", "decrementSeconds").append(e("").addClass(a.icons.down))))), s || (t.append(e("

").addClass("separator")), n.append(e("

").append(e("

").addClass("separator"))), e("

").addClass("timepicker-picker").append(e("").addClass("table-condensed").append([t, n, r])) + }, + E = function() { + var t = e("

").addClass("timepicker-hours").append(e("

").addClass("table-condensed")), + n = e("

").addClass("timepicker-minutes").append(e("

").addClass("table-condensed")), + a = e("

").addClass("timepicker-seconds").append(e("

").addClass("table-condensed")), + r = [P()]; + return T("h") && r.push(t), T("m") && r.push(n), T("s") && r.push(a), r + }, + H = function() { + var t = []; + return a.showTodayButton && t.push(e("

").append(e("").attr({ + "data-action": "today", + title: a.tooltips.today + }).append(e("").addClass(a.icons.today)))), !a.sideBySide && S() && M() && t.push(e("

").append(e("").attr({ + "data-action": "togglePicker", + title: a.tooltips.selectTime + }).append(e("").addClass(a.icons.time)))), a.showClear && t.push(e("

").append(e("").attr({ + "data-action": "clear", + title: a.tooltips.clear + }).append(e("").addClass(a.icons.clear)))), a.showClose && t.push(e("

").append(e("").attr({ + "data-action": "close", + title: a.tooltips.close + }).append(e("").addClass(a.icons.close)))), e("").addClass("table-condensed").append(e("").append(e("").append(t))) + }, + I = function() { + var t = e("

").addClass("bootstrap-datetimepicker-widget dropdown-menu"), + n = e("

").addClass("datepicker").append(O()), + r = e("

").addClass("timepicker").append(E()), + i = e("

").addClass("picker-switch" + (a.collapse ? " accordion-toggle" : "")).append(H()); + return a.inline && t.removeClass("dropdown-menu"), s && t.addClass("usetwentyfour"), T("s") && !s && t.addClass("wider"), a.sideBySide && S() && M() ? (t.addClass("timepicker-sbs"), "top" === a.toolbarPlacement && t.append(o), t.append(e("
").addClass("row").append(n.addClass("col-md-6")).append(r.addClass("col-md-6"))), "bottom" === a.toolbarPlacement && t.append(o), t) : ("top" === a.toolbarPlacement && i.append(o), S() && i.append(e("
").addClass(a.collapse && M() ? "collapse show" : "").append(n)), "default" === a.toolbarPlacement && i.append(o), M() && i.append(e("
").addClass(a.collapse && S() ? "collapse" : "").append(r)), "bottom" === a.toolbarPlacement && i.append(o), t.append(i)) + }, + Y = function() { + var t, r = (f || n).position(), + i = (f || n).offset(), + o = a.widgetPositioning.vertical, + s = a.widgetPositioning.horizontal; + if (a.widgetParent) t = a.widgetParent.append(h); + else if (n.is("input")) t = n.after(h).parent(); + else { + if (a.inline) return void(t = n.append(h)); + t = n, n.children().first().after(h) + } + if ("auto" === o && (o = i.top + 1.5 * h.height() >= e(window).height() + e(window).scrollTop() && h.height() + n.outerHeight() < i.top ? "top" : "bottom"), "auto" === s && (s = t.width() < i.left + h.outerWidth() / 2 && i.left + h.outerWidth() > e(window).width() ? "right" : "left"), "top" === o ? h.addClass("top").removeClass("bottom") : h.addClass("bottom").removeClass("top"), "right" === s ? h.addClass("pull-right") : h.removeClass("pull-right"), "static" === t.css("position") && (t = t.parents().filter(function() { + return "static" !== e(this).css("position") + }).first()), 0 === t.length) throw new Error("datetimepicker component should be placed within a non-static positioned container"); + h.css({ + top: "top" === o ? "auto" : r.top + n.outerHeight(), + bottom: "top" === o ? t.outerHeight() - (t === n ? 0 : r.top) : "auto", + left: "left" === s ? t === n ? 0 : r.left : "auto", + right: "left" === s ? "auto" : t.outerWidth() - n.outerWidth() - (t === n ? 0 : r.left) + }), setTimeout(function() { + h.addClass("open") + }, 180) + }, + q = function(e) { + "dp.change" === e.type && (e.date && e.date.isSame(e.oldDate) || !e.date && !e.oldDate) || n.trigger(e) + }, + B = function(e) { + "y" === e && (e = "YYYY"), q({ + type: "dp.update", + change: e, + viewDate: i.clone() + }) + }, + j = function(e) { + h && (e && (p = Math.max(m, Math.min(3, p + e))), h.find(".datepicker > div").hide().filter(".datepicker-" + y[p].clsName).show()) + }, + A = function() { + var t = e("

").addClass("cw").text("#")); n.isBefore(i.clone().endOf("w"));) t.append(e("	").addClass("dow").text(n.format("dd"))), n.add(1, "d"); + h.find(".datepicker-days thead").append(t) + }, + F = function(e) { + return !0 === a.disabledDates[e.format("YYYY-MM-DD")] + }, + L = function(e) { + return !0 === a.enabledDates[e.format("YYYY-MM-DD")] + }, + W = function(e) { + return !0 === a.disabledHours[e.format("H")] + }, + z = function(e) { + return !0 === a.enabledHours[e.format("H")] + }, + N = function(t, n) { + if (!t.isValid()) return !1; + if (a.disabledDates && "d" === n && F(t)) return !1; + if (a.enabledDates && "d" === n && !L(t)) return !1; + if (a.minDate && t.isBefore(a.minDate, n)) return !1; + if (a.maxDate && t.isAfter(a.maxDate, n)) return !1; + if (a.daysOfWeekDisabled && "d" === n && -1 !== a.daysOfWeekDisabled.indexOf(t.day())) return !1; + if (a.disabledHours && ("h" === n \|\| "m" === n \|\| "s" === n) && W(t)) return !1; + if (a.enabledHours && ("h" === n \|\| "m" === n \|\| "s" === n) && !z(t)) return !1; + if (a.disabledTimeIntervals && ("h" === n \|\| "m" === n \|\| "s" === n)) { + var r = !1; + if (e.each(a.disabledTimeIntervals, function() { + if (t.isBetween(this[0], this[1])) return r = !0, !1 + }), r) return !1 + } + return !0 + }, + V = function() { + for (var t = [], n = i.clone().startOf("y").startOf("d"); n.isSame(i, "y");) t.push(e("").attr("data-action", "selectMonth").addClass("month").text(n.format("MMM"))), n.add(1, "M"); + h.find(".datepicker-months td").empty().append(t) + }, + Z = function() { + var t = h.find(".datepicker-months"), + n = t.find("th"), + o = t.find("tbody").find("span"); + n.eq(0).find("span").attr("title", a.tooltips.prevYear), n.eq(1).attr("title", a.tooltips.selectYear), n.eq(2).find("span").attr("title", a.tooltips.nextYear), t.find(".disabled").removeClass("disabled"), N(i.clone().subtract(1, "y"), "y") \|\| n.eq(0).addClass("disabled"), n.eq(1).text(i.year()), N(i.clone().add(1, "y"), "y") \|\| n.eq(2).addClass("disabled"), o.removeClass("active"), r.isSame(i, "y") && !u && o.eq(r.month()).addClass("active"), o.each(function(t) { + N(i.clone().month(t), "M") \|\| e(this).addClass("disabled") + }) + }, + R = function() { + var e = h.find(".datepicker-years"), + t = e.find("th"), + n = i.clone().subtract(5, "y"), + o = i.clone().add(6, "y"), + s = ""; + for (t.eq(0).find("span").attr("title", a.tooltips.prevDecade), t.eq(1).attr("title", a.tooltips.selectDecade), t.eq(2).find("span").attr("title", a.tooltips.nextDecade), e.find(".disabled").removeClass("disabled"), a.minDate && a.minDate.isAfter(n, "y") && t.eq(0).addClass("disabled"), t.eq(1).text(n.year() + "-" + o.year()), a.maxDate && a.maxDate.isBefore(o, "y") && t.eq(2).addClass("disabled"); !n.isAfter(o, "y");) s += '' + n.year() + "", n.add(1, "y"); + e.find("td").html(s) + }, + Q = function() { + var e, n = h.find(".datepicker-decades"), + o = n.find("th"), + s = t({ + y: i.year() - i.year() % 100 - 1 + }), + d = s.clone().add(100, "y"), + l = s.clone(), + p = !1, + c = !1, + u = ""; + for (o.eq(0).find("span").attr("title", a.tooltips.prevCentury), o.eq(2).find("span").attr("title", a.tooltips.nextCentury), n.find(".disabled").removeClass("disabled"), (s.isSame(t({ + y: 1900 + })) \|\| a.minDate && a.minDate.isAfter(s, "y")) && o.eq(0).addClass("disabled"), o.eq(1).text(s.year() + "-" + d.year()), (s.isSame(t({ + y: 2e3 + })) \|\| a.maxDate && a.maxDate.isBefore(d, "y")) && o.eq(2).addClass("disabled"); !s.isAfter(d, "y");) e = s.year() + 12, p = a.minDate && a.minDate.isAfter(s, "y") && a.minDate.year() <= e, c = a.maxDate && a.maxDate.isAfter(s, "y") && a.maxDate.year() <= e, u += '' + (s.year() + 1) + " - " + (s.year() + 12) + "", s.add(12, "y"); + u += "", n.find("td").html(u), o.eq(1).text(l.year() + 1 + "-" + s.year()) + }, + U = function() { + var t, n, o, s = h.find(".datepicker-days"), + d = s.find("th"), + l = [], + p = []; + if (S()) { + for (d.eq(0).find("span").attr("title", a.tooltips.prevMonth), d.eq(1).attr("title", a.tooltips.selectMonth), d.eq(2).find("span").attr("title", a.tooltips.nextMonth), s.find(".disabled").removeClass("disabled"), d.eq(1).text(i.format(a.dayViewHeaderFormat)), N(i.clone().subtract(1, "M"), "M") \|\| d.eq(0).addClass("disabled"), N(i.clone().add(1, "M"), "M") \|\| d.eq(2).addClass("disabled"), t = i.clone().startOf("M").startOf("w").startOf("d"), o = 0; o < 42; o++) 0 === t.weekday() && (n = e("
' + t.week() + "	' + t.date() + "
' + n.format(s ? "HH" : "hh") + "
' + n.format("mm") + "
' + n.format("ss") + "

${title}

Material Kit.

A Badass Bootstrap 4 UI Kit based on Material Design.

Basic Elements

Buttons + + Pick your style +

+ Pick your size +

+ Pick your color +

Inputs

Checkboxes

Radio Buttons

Toggle Buttons

Progress Bars

Pagination

Sliders

Badges

Menu

Menu with Icons

Navigation

Navigation Tabs

+ Tabs with Icons on Card +

+ Tabs on Plain Card +

Navigation Pills

+ With Icons +

Notifications

Typography

+ Header 1The Life of Material Kit

+ Header 2The Life of Material Kit

+ Header 3The Life of Material Kit

+ Header 4The Life of Material Kit

+ Header 5The Life of Material Kit

+ Header 6The Life of Material Kit

+ Header 1 TitleThe Life of Material Kit

+ Header 2 TitleThe Life of Material Kit

+ Header 3 TitleThe Life of Material Kit

+ Header 4 TitleThe Life of Material Kit

+ Small Tag + Header with small subtitle + + Use "small" tag for the headers +

Images

Rounded Image

Circle Image

Rounded Raised

Circle Raised

Javascript components

Modal

Datetime Picker

Popovers

Tooltips

Carousel

+ location_on Yellowstone National Park, United States +

+ location_on Somewhere Beyond, United States +

+ location_on Yellowstone National Park, United States +

Completed with examples

The kit comes with three pre-built pages to help you get started faster. You can change the text and images and you're good to go. More importantly, looking at them will give you a picture of what you can built with this powerful kit.

Login

Do you love this UI Kit?

Cause if you do, it can be yours for FREE. Hit the buttons below to navigate to our website where you can find the kit. Our friends from + ThemeIsle created a Wordpress Theme which can be also downloaded for free. Start a new project or give an old Bootstrap project a new look!

Want more?

We've just launched + Material Kit PRO. It has a huge number of components, sections and example pages. Start Your Development With A Badass Bootstrap UI Kit inspired by Material Design.

Thank you for supporting us!

Buttons +
+ Pick your style +

+ Small Tag + Header with small subtitle +
+ Use "small" tag for the headers +

+ Yellowstone National Park, United States +

+ Somewhere Beyond, United States +

+ Yellowstone National Park, United States +