UNPKG

bia-framework

Version:

Bia Framework to work with angular 2

2,030 lines (1,648 loc) 58.2 kB
/*#endregion */ /*#region Forms */ /*#endregion */ /*#endregion*/ /* ########### core-switch ##############*/ /*core-card*/ /* core-containers */ /* core-bar-menu*/ /*########################### Side Bar Menu #####################*/ /* ###################### MIXINS ##########################*/ /*Core Visibility */ /* 0, 640px */ /* 641px, 1024px */ /* 1025px, 1440px */ /* 1441px, 1920px */ /* 1921px */ .z-depth-1 { -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } .z-depth-2 { -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } .z-depth-3 { -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } .z-depth-4 { -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } .z-depth-5 { -webkit-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); } /*#endregion */ .bg-white-opacity { background-color: rgba(255, 255, 255, 0.5); } .bg-black-opacity { background-color: rgba(32, 43, 54, 0.5); } /*simple background*/ .bg-color-primary { background-color: #8BC34A; } .bg-color-primary-50 { background-color: #F1F8E9; } .bg-color-primary-100 { background-color: #DCEDC8; } .bg-color-primary-200 { background-color: #C5E1A5; } .bg-color-primary-300 { background-color: #AED581; } .bg-color-primary-400 { background-color: #9CCC65; } .bg-color-primary-500 { background-color: #8BC34A; } .bg-color-primary-600 { background-color: #7CB342; } .bg-color-primary-700 { background-color: #689F38; } .bg-color-primary-800 { background-color: #558B2F; } .bg-color-primary-900 { background-color: #33691E; } .bg-color-info { background-color: #AA89E6; } .bg-color-warning { background-color: #FFC107; } .bg-color-danger { background-color: #ff5499; } .bg-color-success { background-color: #8BC34A; } .bg-color-light { background-color: white; } .bg-color-gradient-primary { background: linear-gradient(to bottom, #8BC34A 0, #558B2F 100%); } .bg-color-black { background-color: #000; } .bg-color-gray-900 { background-color: #212121; } .bg-color-gray-700 { background-color: #303030; } .bg-color-gray-800 { background-color: #424242; } .bg-color-white { background-color: white; } .bg-color-gray-300 { background-color: #e0e0e0; } .bg-color-gray-100 { background-color: #F5F5F5; } .bg-color-gray-50 { background-color: #FAFAFA; } /* Colors */ .bg-color-dark-card { background-color: #424242; } .bg-color-dark-card { background-color: #212121; } *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } img { -ms-interpolation-mode: bicubic; } #map_canvas img, #map_canvas embed, #map_canvas object, .map_canvas img, .map_canvas embed, .map_canvas object { max-width: none !important; } .left { float: left !important; } .right { float: right !important; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .hide { display: none; } .antialiased { -webkit-font-smoothing: antialiased; } textarea { height: auto; min-height: 50px; } /*Odisseia Grid*/ .grid-full { width: 100%; height: 100%; } .grid--position-relative { position: relative; } .grid-full-h { height: 100%; max-height: 100%; } .grid-full-w { width: 100%; } .cell-scroll-vertical, .grid-scroll-vertical { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; overflow-x: hidden; } .cell-relative { position: relative; } .cell-absolute { position: absolute; } .z-index-2 { z-index: 2; } .z-index-1 { z-index: 1; } .cell-shrink-1 { flex-shrink: 1 !important; } .cell-shrink-2 { flex-shrink: 2 !important; } .cell-shrink-3 { flex-shrink: 3 !important; } .cell-shrink-4 { flex-shrink: 4 !important; } .cell-shrink-5 { flex-shrink: 5 !important; } .cell-shrink-6 { flex-shrink: 6 !important; } .cell-shrink-7 { flex-shrink: 7 !important; } .cell-shrink-8 { flex-shrink: 8 !important; } .cell-shrink-9 { flex-shrink: 9 !important; } .cell-shrink-10 { flex-shrink: 10 !important; } .cell-shrink-11 { flex-shrink: 11 !important; } .cell-shrink-12 { flex-shrink: 12 !important; } .cell-grow-1 { flex-grow: 1 !important; } .cell-grow-2 { flex-grow: 2 !important; } .cell-grow-3 { flex-grow: 3 !important; } .cell-grow-4 { flex-grow: 4 !important; } .cell-grow-5 { flex-grow: 5 !important; } .cell-grow-6 { flex-grow: 6 !important; } .cell-grow-7 { flex-grow: 7 !important; } .cell-grow-8 { flex-grow: 8 !important; } .cell-grow-9 { flex-grow: 9 !important; } .cell-grow-10 { flex-grow: 10 !important; } .cell-grow-11 { flex-grow: 11 !important; } .cell-grow-12 { flex-grow: 12 !important; } .cell-no-scroll { -webkit-flex: none; -ms-flex: none; flex: none; } .cell-scroll-horizontal { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; overflow-y: hidden; } .cell--position-absolute { position: absolute; } .grid { width: 100%; display: -moz-box; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .grid.grid-wrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .grid.grid-wrap-reverse { -webkit-flex-wrap: wrap-reverse; -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .grid.grid-nowrap { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } [class*="grid-direction-rows"] { /* Container Align*/ } [class*="grid-direction-rows"] > .cell-horizontal-start-sm { align-self: flex-start; text-align: start; } [class*="grid-direction-rows"] > .cell-horizontal-end-sm { align-self: flex-end; text-align: end; } [class*="grid-direction-rows"] > .cell-horizontal-center-sm { align-self: center; text-align: center; } [class*="grid-direction-rows"] > .cell-horizontal-auto-sm { align-self: auto; } [class*="grid-direction-rows"] > .cell-horizontal-baseline-sm { align-self: baseline; } [class*="grid-direction-rows"] > .cell-horizontal-stretch-sm { align-self: stretch; } [class*="grid-direction-rows"] > .cell-vertical-start-sm { align-items: flex-start; justify-content: flex-start; } [class*="grid-direction-rows"] > .cell-vertical-end-sm { align-items: flex-end; justify-content: flex-end; } [class*="grid-direction-rows"] > .cell-vertical-center-sm { align-items: center; justify-content: center; } [class*="grid-direction-rows"] > .cell-vertical-baseline-sm { align-items: baseline; } [class*="grid-direction-rows"] > .cell-vertical-stretch-sm { align-items: stretch; } [class*="grid-direction-rows"].grid-vertical-start-sm { justify-content: flex-start; } [class*="grid-direction-rows"].grid-vertical-end-sm { justify-content: flex-end; } [class*="grid-direction-rows"].grid-vertical-center-sm { justify-content: center; } [class*="grid-direction-rows"].grid-vertical-space-between-sm { justify-content: space-between; } [class*="grid-direction-rows"].grid-vertical-space-around-sm { justify-content: space-around; } [class*="grid-direction-rows"].grid-horizontal-start-sm { align-items: flex-start; } [class*="grid-direction-rows"].grid-horizontal-end-sm { align-items: flex-end; } [class*="grid-direction-rows"].grid-horizontal-center-sm { align-items: center; } [class*="grid-direction-rows"].grid-horizontal-baseline-sm { align-items: baseline; } [class*="grid-direction-rows"].grid-horizontal-stretch-sm { align-items: stretch; } [class*="grid-direction-columns"] { /* Container Align*/ } [class*="grid-direction-columns"] > .cell-horizontal-start-sm { align-self: flex-start; text-align: start; } [class*="grid-direction-columns"] > .cell-horizontal-end-sm { align-self: flex-end; text-align: end; } [class*="grid-direction-columns"] > .cell-horizontal-center-sm { align-self: center; text-align: center; } [class*="grid-direction-columns"] > .cell-horizontal-auto-sm { align-self: auto; } [class*="grid-direction-columns"] > .cell-horizontal-baseline-sm { align-self: baseline; } [class*="grid-direction-columns"] > .cell-horizontal-stretch-sm { align-self: stretch; } [class*="grid-direction-columns"] > .cell-vertical-start-sm { align-items: flex-start; justify-content: flex-start; } [class*="grid-direction-columns"] > .cell-vertical-end-sm { align-items: flex-end; justify-content: flex-end; } [class*="grid-direction-columns"] > .cell-vertical-center-sm { align-items: center; justify-content: center; } [class*="grid-direction-columns"] > .cell-vertical-baseline-sm { align-items: baseline; } [class*="grid-direction-columns"] > .cell-vertical-stretch-sm { align-items: stretch; } [class*="grid-direction-columns"].grid-horizontal-start-sm { justify-content: flex-start; } [class*="grid-direction-columns"].grid-horizontal-end-sm { justify-content: flex-end; } [class*="grid-direction-columns"].grid-horizontal-center-sm { justify-content: center; } [class*="grid-direction-columns"].grid-horizontal-space-between-sm { justify-content: space-between; } [class*="grid-direction-columns"].grid-horizontal-space-around-sm { justify-content: space-around; } [class*="grid-direction-columns"].grid-vertical-start-sm { align-items: flex-start; } [class*="grid-direction-columns"].grid-vertical-end-sm { align-items: flex-end; } [class*="grid-direction-columns"].grid-vertical-center-sm { align-items: center; } [class*="grid-direction-columns"].grid-vertical-baseline-sm { align-items: baseline; } [class*="grid-direction-columns"].grid-vertical-stretch-sm { align-items: stretch; } /* Container Directions */ .grid-direction-rows-sm { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .grid-direction-rows-reverse-sm { -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .grid-direction-columns-sm { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .grid-direction-columns-reverse-sm { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } /* Container Align*/ .grid-sm-main-align-start { justify-content: flex-start; } .grid-sm-main-align-end { justify-content: flex-end; } .grid-sm-main-align-center { justify-content: center; } .grid-sm-main-align-space-between { justify-content: space-between; } .grid-sm-main-align-space-around { justify-content: space-around; } .grid-sm-cross-align-start { align-items: flex-start; } .grid-sm-cross-align-end { align-items: flex-end; } .grid-sm-cross-align-center { align-items: center; } .grid-sm-cross-align-baseline { align-items: baseline; } .grid-sm-cross-align-stretch { align-items: stretch; } @media only screen and (min-width: 40.063em) { [class*="grid-direction-rows"] { /* Container Align*/ } [class*="grid-direction-rows"] > .cell-horizontal-start-md { align-self: flex-start; text-align: start; } [class*="grid-direction-rows"] > .cell-horizontal-end-md { align-self: flex-end; text-align: end; } [class*="grid-direction-rows"] > .cell-horizontal-center-md { align-self: center; text-align: center; } [class*="grid-direction-rows"] > .cell-horizontal-auto-md { align-self: auto; } [class*="grid-direction-rows"] > .cell-horizontal-baseline-md { align-self: baseline; } [class*="grid-direction-rows"] > .cell-horizontal-stretch-md { align-self: stretch; } [class*="grid-direction-rows"] > .cell-vertical-start-md { align-items: flex-start; justify-content: flex-start; } [class*="grid-direction-rows"] > .cell-vertical-end-md { align-items: flex-end; justify-content: flex-end; } [class*="grid-direction-rows"] > .cell-vertical-center-md { align-items: center; justify-content: center; } [class*="grid-direction-rows"] > .cell-vertical-baseline-md { align-items: baseline; } [class*="grid-direction-rows"] > .cell-vertical-stretch-md { align-items: stretch; } [class*="grid-direction-rows"].grid-vertical-start-md { justify-content: flex-start; } [class*="grid-direction-rows"].grid-vertical-end-md { justify-content: flex-end; } [class*="grid-direction-rows"].grid-vertical-center-md { justify-content: center; } [class*="grid-direction-rows"].grid-vertical-space-between-md { justify-content: space-between; } [class*="grid-direction-rows"].grid-vertical-space-around-md { justify-content: space-around; } [class*="grid-direction-rows"].grid-horizontal-start-md { align-items: flex-start; } [class*="grid-direction-rows"].grid-horizontal-end-md { align-items: flex-end; } [class*="grid-direction-rows"].grid-horizontal-center-md { align-items: center; } [class*="grid-direction-rows"].grid-horizontal-baseline-md { align-items: baseline; } [class*="grid-direction-rows"].grid-horizontal-stretch-md { align-items: stretch; } [class*="grid-direction-columns"] { /* Container Align*/ } [class*="grid-direction-columns"] > .cell-horizontal-start-md { align-self: flex-start; text-align: start; } [class*="grid-direction-columns"] > .cell-horizontal-end-md { align-self: flex-end; text-align: end; } [class*="grid-direction-columns"] > .cell-horizontal-center-md { align-self: center; text-align: center; } [class*="grid-direction-columns"] > .cell-horizontal-auto-md { align-self: auto; } [class*="grid-direction-columns"] > .cell-horizontal-baseline-md { align-self: baseline; } [class*="grid-direction-columns"] > .cell-horizontal-stretch-md { align-self: stretch; } [class*="grid-direction-columns"] > .cell-vertical-start-md { align-items: flex-start; justify-content: flex-start; } [class*="grid-direction-columns"] > .cell-vertical-end-md { align-items: flex-end; justify-content: flex-end; } [class*="grid-direction-columns"] > .cell-vertical-center-md { align-items: center; justify-content: center; } [class*="grid-direction-columns"] > .cell-vertical-baseline-md { align-items: baseline; } [class*="grid-direction-columns"] > .cell-vertical-stretch-md { align-items: stretch; } [class*="grid-direction-columns"].grid-horizontal-start-md { justify-content: flex-start; } [class*="grid-direction-columns"].grid-horizontal-end-md { justify-content: flex-end; } [class*="grid-direction-columns"].grid-horizontal-center-md { justify-content: center; } [class*="grid-direction-columns"].grid-horizontal-space-between-md { justify-content: space-between; } [class*="grid-direction-columns"].grid-horizontal-space-around-md { justify-content: space-around; } [class*="grid-direction-columns"].grid-vertical-start-md { align-items: flex-start; } [class*="grid-direction-columns"].grid-vertical-end-md { align-items: flex-end; } [class*="grid-direction-columns"].grid-vertical-center-md { align-items: center; } [class*="grid-direction-columns"].grid-vertical-baseline-md { align-items: baseline; } [class*="grid-direction-columns"].grid-vertical-stretch-md { align-items: stretch; } /* Container Directions */ .grid-direction-rows-md { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .grid-direction-rows-reverse-md { -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .grid-direction-columns-md { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .grid-direction-columns-reverse-md { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } /* Container Align*/ .grid-md-main-align-start { justify-content: flex-start; } .grid-md-main-align-end { justify-content: flex-end; } .grid-md-main-align-center { justify-content: center; } .grid-md-main-align-space-between { justify-content: space-between; } .grid-md-main-align-space-around { justify-content: space-around; } .grid-md-cross-align-start { align-items: flex-start; } .grid-md-cross-align-end { align-items: flex-end; } .grid-md-cross-align-center { align-items: center; } .grid-md-cross-align-baseline { align-items: baseline; } .grid-md-cross-align-stretch { align-items: stretch; } } @media only screen and (min-width: 64.063em) { [class*="grid-direction-rows"] { /* Container Align*/ } [class*="grid-direction-rows"] > .cell-horizontal-start-lg { align-self: flex-start; text-align: start; } [class*="grid-direction-rows"] > .cell-horizontal-end-lg { align-self: flex-end; text-align: end; } [class*="grid-direction-rows"] > .cell-horizontal-center-lg { align-self: center; text-align: center; } [class*="grid-direction-rows"] > .cell-horizontal-auto-lg { align-self: auto; } [class*="grid-direction-rows"] > .cell-horizontal-baseline-lg { align-self: baseline; } [class*="grid-direction-rows"] > .cell-horizontal-stretch-lg { align-self: stretch; } [class*="grid-direction-rows"] > .cell-vertical-start-lg { align-items: flex-start; justify-content: flex-start; } [class*="grid-direction-rows"] > .cell-vertical-end-lg { align-items: flex-end; justify-content: flex-end; } [class*="grid-direction-rows"] > .cell-vertical-center-lg { align-items: center; justify-content: center; } [class*="grid-direction-rows"] > .cell-vertical-baseline-lg { align-items: baseline; } [class*="grid-direction-rows"] > .cell-vertical-stretch-lg { align-items: stretch; } [class*="grid-direction-rows"].grid-vertical-start-lg { justify-content: flex-start; } [class*="grid-direction-rows"].grid-vertical-end-lg { justify-content: flex-end; } [class*="grid-direction-rows"].grid-vertical-center-lg { justify-content: center; } [class*="grid-direction-rows"].grid-vertical-space-between-lg { justify-content: space-between; } [class*="grid-direction-rows"].grid-vertical-space-around-lg { justify-content: space-around; } [class*="grid-direction-rows"].grid-horizontal-start-lg { align-items: flex-start; } [class*="grid-direction-rows"].grid-horizontal-end-lg { align-items: flex-end; } [class*="grid-direction-rows"].grid-horizontal-center-lg { align-items: center; } [class*="grid-direction-rows"].grid-horizontal-baseline-lg { align-items: baseline; } [class*="grid-direction-rows"].grid-horizontal-stretch-lg { align-items: stretch; } [class*="grid-direction-columns"] { /* Container Align*/ } [class*="grid-direction-columns"] > .cell-horizontal-start-lg { align-self: flex-start; text-align: start; } [class*="grid-direction-columns"] > .cell-horizontal-end-lg { align-self: flex-end; text-align: end; } [class*="grid-direction-columns"] > .cell-horizontal-center-lg { align-self: center; text-align: center; } [class*="grid-direction-columns"] > .cell-horizontal-auto-lg { align-self: auto; } [class*="grid-direction-columns"] > .cell-horizontal-baseline-lg { align-self: baseline; } [class*="grid-direction-columns"] > .cell-horizontal-stretch-lg { align-self: stretch; } [class*="grid-direction-columns"] > .cell-vertical-start-lg { align-items: flex-start; justify-content: flex-start; } [class*="grid-direction-columns"] > .cell-vertical-end-lg { align-items: flex-end; justify-content: flex-end; } [class*="grid-direction-columns"] > .cell-vertical-center-lg { align-items: center; justify-content: center; } [class*="grid-direction-columns"] > .cell-vertical-baseline-lg { align-items: baseline; } [class*="grid-direction-columns"] > .cell-vertical-stretch-lg { align-items: stretch; } [class*="grid-direction-columns"].grid-horizontal-start-lg { justify-content: flex-start; } [class*="grid-direction-columns"].grid-horizontal-end-lg { justify-content: flex-end; } [class*="grid-direction-columns"].grid-horizontal-center-lg { justify-content: center; } [class*="grid-direction-columns"].grid-horizontal-space-between-lg { justify-content: space-between; } [class*="grid-direction-columns"].grid-horizontal-space-around-lg { justify-content: space-around; } [class*="grid-direction-columns"].grid-vertical-start-lg { align-items: flex-start; } [class*="grid-direction-columns"].grid-vertical-end-lg { align-items: flex-end; } [class*="grid-direction-columns"].grid-vertical-center-lg { align-items: center; } [class*="grid-direction-columns"].grid-vertical-baseline-lg { align-items: baseline; } [class*="grid-direction-columns"].grid-vertical-stretch-lg { align-items: stretch; } /* Container Directions */ .grid-direction-rows-lg { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .grid-direction-rows-reverse-lg { -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .grid-direction-columns-lg { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .grid-direction-columns-reverse-lg { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } /* Container Align*/ .grid-lg-main-align-start { justify-content: flex-start; } .grid-lg-main-align-end { justify-content: flex-end; } .grid-lg-main-align-center { justify-content: center; } .grid-lg-main-align-space-between { justify-content: space-between; } .grid-lg-main-align-space-around { justify-content: space-around; } .grid-lg-cross-align-start { align-items: flex-start; } .grid-lg-cross-align-end { align-items: flex-end; } .grid-lg-cross-align-center { align-items: center; } .grid-lg-cross-align-baseline { align-items: baseline; } .grid-lg-cross-align-stretch { align-items: stretch; } } .cell { -webkit-flex: 0 auto; -ms-flex: 0 auto; flex: 0 auto; text-align: start; display: -moz-box; display: flex; } /* Cell Align*/ .cell-sm-align-start { align-self: flex-start; text-align: start; } .cell-sm-align-end { align-self: flex-end; text-align: end; } .cell-sm-align-center { align-self: center; text-align: center; } .cell-sm-align-auto { align-self: auto; } .cell-sm-align-baseline { align-self: baseline; } .cell-sm-align-stretch { align-self: stretch; } .cell-sm-cross-align-start { align-items: flex-start; } .cell-sm-cross-align-end { align-items: flex-end; } .cell-sm-cross-align-center { align-items: center; justify-content: center; } .cell-sm-align-baseline { align-items: baseline; } .cell-sm-cross-align-stretch { align-items: stretch; } .cell-sm-1 { flex-basis: 8.333333333%; min-width: 8.333333333%; } .cell-sm-2 { flex-basis: 16.666666667%; min-width: 16.666666667%; } .cell-sm-3 { flex-basis: 25%; min-width: 25%; } .cell-sm-4 { flex-basis: 33.333333333%; min-width: 33.333333333%; } .cell-sm-5 { flex-basis: 41.666666667%; min-width: 41.666666667%; } .cell-sm-6 { flex-basis: 50%; min-width: 50%; } .cell-sm-7 { flex-basis: 58.333333333%; min-width: 58.333333333%; } .cell-sm-8 { flex-basis: 66.666666667%; min-width: 66.666666667%; } .cell-sm-9 { flex-basis: 75%; min-width: 75%; } .cell-sm-10 { flex-basis: 83.333333333%; min-width: 83.333333333%; } .cell-sm-11 { flex-basis: 91.666666667%; min-width: 91.666666667%; } .cell-sm-12 { flex-basis: 100%; min-width: 100%; } /* Cell Responsive */ @media only screen and (min-width: 40.063em) { .cell-md-align-start { align-self: flex-start; text-align: start; } .cell-md-align-end { align-self: flex-end; text-align: end; } .cell-md-align-center { align-self: center; text-align: center; } .cell-md-align-auto { align-self: auto; } .cell-md-align-baseline { align-self: baseline; } .cell-md-align-stretch { align-self: stretch; } .cell-md-cross-align-start { align-items: flex-start; } .cell-md-cross-align-end { align-items: flex-end; } .cell-md-cross-align-center { align-items: center; justify-content: center; } .cell-md-align-baseline { align-items: baseline; } .cell-md-cross-align-stretch { align-items: stretch; } .cell-md-1 { flex-basis: 8.333333333%; min-width: 8.333333333%; } .cell-md-2 { flex-basis: 16.666666667%; min-width: 16.666666667%; } .cell-md-3 { flex-basis: 25%; min-width: 25%; } .cell-md-4 { flex-basis: 33.333333333%; min-width: 33.333333333%; } .cell-md-5 { flex-basis: 41.666666667%; min-width: 41.666666667%; } .cell-md-6 { flex-basis: 50%; min-width: 50%; } .cell-md-7 { flex-basis: 58.333333333%; min-width: 58.333333333%; } .cell-md-8 { flex-basis: 66.666666667%; min-width: 66.666666667%; } .cell-md-9 { flex-basis: 75%; min-width: 75%; } .cell-md-10 { flex-basis: 83.333333333%; min-width: 83.333333333%; } .cell-md-11 { flex-basis: 91.666666667%; min-width: 91.666666667%; } .cell-md-12 { flex-basis: 100%; min-width: 100%; } } @media only screen and (min-width: 64.063em) { .cell-lg-align-start { align-self: flex-start; text-align: start; } .cell-lg-align-end { align-self: flex-end; text-align: end; } .cell-lg-align-center { align-self: center; text-align: center; } .cell-lg-align-auto { align-self: auto; } .cell-lg-align-baseline { align-self: baseline; } .cell-lg-align-stretch { align-self: stretch; } .cell-lg-cross-align-start { align-items: flex-start; } .cell-lg-cross-align-end { align-items: flex-end; } .cell-lg-cross-align-center { align-items: center; justify-content: center; } .cell-lg-align-baseline { align-items: baseline; } .cell-lg-cross-align-stretch { align-items: stretch; } .cell-lg-1 { flex-basis: 8.333333333%; min-width: 8.333333333%; } .cell-lg-2 { flex-basis: 16.666666667%; min-width: 16.666666667%; } .cell-lg-3 { flex-basis: 25%; min-width: 25%; } .cell-lg-4 { flex-basis: 33.333333333%; min-width: 33.333333333%; } .cell-lg-5 { flex-basis: 41.666666667%; min-width: 41.666666667%; } .cell-lg-6 { flex-basis: 50%; min-width: 50%; } .cell-lg-7 { flex-basis: 58.333333333%; min-width: 58.333333333%; } .cell-lg-8 { flex-basis: 66.666666667%; min-width: 66.666666667%; } .cell-lg-9 { flex-basis: 75%; min-width: 75%; } .cell-lg-10 { flex-basis: 83.333333333%; min-width: 83.333333333%; } .cell-lg-11 { flex-basis: 91.666666667%; min-width: 91.666666667%; } .cell-lg-12 { flex-basis: 100%; min-width: 100%; } } /* Cell Fixed With */ .cell.fix-width-8 { width: 8px; max-width: 8px; } .cell.fix-width-16 { width: 16px; max-width: 16px; } .cell.fix-width-32 { width: 32px; max-width: 32px; } .cell.fix-width-48 { width: 48px; max-width: 48px; } .cell.fix-width-56 { width: 56px; max-width: 56px; } .cell.fix-width-72 { width: 72px; max-width: 72px; } .cell-auto { -webkit-flex: auto; -ms-flex: auto; flex: auto; max-height: 100%; } .cell-1-auto { -webkit-flex: 1 auto; -ms-flex: 1 auto; flex: 1 auto; min-height: 0; } .cell-1-1-auto { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .cell-1 { -webkit-flex: 1; -ms-flex: 1; flex: 1; } .cell-full-w { min-width: 100%; } .cell-full-h { height: 100%; } .vertical-align { display: flex; align-items: center; } .cell-no-shrink { flex-shrink: 0; } .cell-no-grow { flex-grow: 0; } .cell-order-1 { -ms-flex-order: 1; order: 1; } .cell-order-2 { -ms-flex-order: 2; order: 2; } /*#region Metrics and Spaces */ .w-xxs { width: 60px; } .w-xs { width: 90px; } .w-sm { width: 150px; } .w { width: 200px; } .w-md { width: 240px; } .w-lg { width: 280px; } .w-xl { width: 320px; } .w-xxl { width: 360px; } .w-full { width: 100%; } .w-auto { width: auto; } .h-auto { height: auto; } .h-full { height: 100%; max-height: 100%; min-height: 100%; } .h-sm { min-height: 30px; max-height: 30px; } .h-md { min-height: 80px; max-height: 80px; } .wrapper-xsm { padding: 5px; } .wrapper-sm { padding: 10px; } .wrapper { padding: 16px; } .wrapper-md { padding: 20px; } .wrapper-lg { padding: 30px; } .wrapper-xl { padding: 50px; } .margin-offset-t-100 { margin-top: -100%; } .wrapper-sm-small { padding: 10px; } .wrapper-sm-medium { padding: 20px; } .wrapper-sm-large { padding: 30px; } @media only screen and (min-width: 40.063em) { .wrapper-md-small { padding: 10px; } .wrapper-md-medium { padding: 20px; } .wrapper-md-large { padding: 30px; } } @media only screen and (min-width: 64.063em) { .wrapper-lg-small { padding: 10px; } .wrapper-lg-medium { padding: 20px; } .wrapper-lg-large { padding: 30px; } } .b-a { border: 1px solid #dee5e7; } .b-t { border-top: 1px solid #dee5e7; } .b-r { border-right: 1px solid #dee5e7; } .b-b { border-bottom: 1px solid #dee5e7; } .b-l { border-left: 1px solid #dee5e7; } .b-light { border-color: #edf1f2; } .b-dark { border-color: #3a3f51; } .b-black { border-color: #3a3f51; } .b-primary { border-color: #8BC34A; } .b-success { border-color: #8BC34A; } .b-info { border-color: #AA89E6; } .b-warning { border-color: #FFC107; } .b-danger { border-color: #ff5499; } .b-white { border-color: #fff; } .b-dashed { border-style: dashed !important; } .b-l-light { border-left-color: #edf1f2; } .b-l-dark { border-left-color: #3a3f51; } .b-l-black { border-left-color: #3a3f51; } .b-l-primary { border-left-color: #8BC34A; } .b-l-success { border-left-color: #8BC34A; } .b-l-info { border-left-color: #AA89E6; } .b-l-warning { border-left-color: #FFC107; } .b-l-danger { border-left-color: #ff5499; } .b-l-white { border-left-color: #fff; } .b-l-2x { border-left-width: 2px; } .b-l-3x { border-left-width: 3px; } .b-l-4x { border-left-width: 4px; } .b-l-5x { border-left-width: 5px; } .b-2x { border-width: 2px; } .b-3x { border-width: 3px; } .b-4x { border-width: 4px; } .b-5x { border-width: 5px; } .no-border, .no-borders { border-color: transparent; border-width: 0; } /* Border Radius */ .r { border-radius: 2px 2px 2px 2px; } .r-2x { border-radius: 4px; } .r-3x { border-radius: 6px !important; } .r-l { border-radius: 2px 0 0 2px !important; } .r-r { border-radius: 0 2px 2px 0 !important; } .r-t { border-radius: 2px 2px 0 0 !important; } .r-b { border-radius: 0 0 2px 2px !important; } .no-radius { border-radius: 0; } /*Margins*/ .m-xxs { margin: 2px 4px !important; } .m-xs { margin: 5px !important; } .m-sm { margin: 10px !important; } .m { margin: 15px !important; } .m-md { margin: 20px !important; } .m-lg { margin: 30px !important; } .m-xl { margin: 50px !important; } .m-n { margin: 0 !important; } .m-l-none { margin-left: 0 !important; } .m-l-xs { margin-left: 5px !important; } .m-l-sm { margin-left: 10px !important; } .m-l { margin-left: 16px !important; } .m-l-md { margin-left: 24px !important; } .m-l-lg { margin-left: 30px !important; } .m-l-xl { margin-left: 40px !important; } .m-l-xxl { margin-left: 50px !important; } .m-t-none { margin-top: 0 !important; } .m-t-xxs { margin-top: 1px !important; } .m-t-xs { margin-top: 5px !important; } .m-t-sm { margin-top: 10px !important; } .m-t { margin-top: 15px !important; } .m-t-md { margin-top: 20px !important; } .m-t-lg { margin-top: 30px !important; } .m-t-xl { margin-top: 40px !important; } .m-t-xxl { margin-top: 50px; } .m-r-none { margin-right: 0 !important; } .m-r-xxs { margin-right: 1px; } .m-r-xs { margin-right: 5px; } .m-r-sm { margin-right: 10px; } .m-r { margin-right: 16px; } .m-r-md { margin-right: 24px; } .m-r-lg { margin-right: 30px; } .m-r-xl { margin-right: 40px; } .m-r-xxl { margin-right: 50px; } .m-r-n-xxs { margin-right: -1px; } .m-r-n-xs { margin-right: -5px; } .m-r-n-sm { margin-right: -10px; } .m-r-n { margin-right: -15px; } .m-r-n-md { margin-right: -20px; } .m-r-n-lg { margin-right: -30px; } .m-r-n-xl { margin-right: -40px; } .m-r-n-xxl { margin-right: -50px; } .m-b-none { margin-bottom: 0 !important; } .m-b-xxs { margin-bottom: 1px; } .m-b-xs { margin-bottom: 4px; } .m-b-sm { margin-bottom: 8px; } .m-b { margin-bottom: 16px; } .m-b-md { margin-bottom: 22px; } .m-b-lg { margin-bottom: 34px; } .m-b-xl { margin-bottom: 46px; } .m-b-xxl { margin-bottom: 58px; } /*#endregion */ /*#endregion */ html, body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height: 100%; margin: 0; overflow: hidden; padding: 0; -webkit-font-smoothing: antialiased; } body { width: 100%; height: 100%; min-height: 100%; min-width: 100%; overflow: hidden; background: #303030; } .app-wrapper { width: 100%; height: 100%; overflow: hidden; } .scrollable { overflow-y: auto; -webkit-overflow-scrolling: touch; } .scrollable-vertical { overflow-y: auto; -webkit-overflow-scrolling: touch; overflow-x: hidden; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { border: 0; } ::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #9CCC65; } @media only screen and (min-width: 40.063em) { ::-webkit-scrollbar-thumb:hover { background-color: #7CB342; } } .no-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; } .selectable { cursor: pointer; } .content { height: 100%; width: 100%; min-height: 100%; max-height: 100%; display: block; position: absolute; float: left; overflow: hidden; -webkit-transition: all 1s cubic-bezier(1, 0.01, 0.625, 1); -moz-transition: all 1s cubic-bezier(1, 0.01, 0.625, 1); -o-transition: all 1s cubic-bezier(1, 0.01, 0.625, 1); transition: all 1s cubic-bezier(1, 0.01, 0.625, 1); /* custom */ } .content.condensed { padding-top: 56px; } .content.condensed.extra-condensed { padding-top: 128px !important; } .content .view-container { height: 100%; width: 100%; } .no-overflow { overflow-y: hidden !important; } .view { display: flex; flex-shrink: 0; flex: 1 auto; z-index: 20; } .view-animation { -webkit-transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1); } .view-animation.ng-enter-prepare { opacity: 0; -webkit-transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1); } .view-animation.ng-enter { transform: translateX(-1000px); opacity: 1; } .view-animation.ng-enter-active { transform: translateX(0); } .ripple-container { position: relative; overflow: hidden; } .ripple { position: absolute; width: 24px; height: 24px; border-radius: 50%; } .ripple.size-i { animation: ripple-animation-infinity 1s; -webkit-animation: ripple-animation-infinity 1s; } .ripple.size-sm { animation: ripple-animation-sm .3s; -webkit-animation: ripple-animation-sm .3s; } @keyframes ripple-animation-infinity { from { transform: scale(1); opacity: 0.4; } to { transform: scale(100); opacity: 0; } } @-webkit-keyframes ripple-animation-infinity { from { transform: scale(1); opacity: 0.4; } to { transform: scale(100); opacity: 0; } } @keyframes ripple-animation-sm { from { transform: scale(1); opacity: 0.4; } to { transform: scale(2); opacity: 0; } } @-webkit-keyframes ripple-animation-sm { from { transform: scale(1); opacity: 0.4; } to { transform: scale(2); opacity: 0; } } .anim-up-down-short { will-change: transform; -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1); -o-transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transform-origin: top left; -ms-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } .anim-up-down-short.remove { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } .anim-up-down-short.show { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .anim-left-right-short { will-change: transform; -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1); -o-transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transform-origin: top left; -ms-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } .anim-left-right-short.left-out { -webkit-animation: 0.2s LeftOut; -moz-animation: 0.2s leftOut; -o-animation: 0.2s leftOut; animation: 0.2s leftOut; } @-moz-keyframes leftOut { 0% { opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-200px); -ms-transform: translateX(-200px); -o-transform: translateX(-200px); -webkit-transform: translateX(-200px); transform: translateX(-200px); } } @keyframes leftOut { 0% { opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-200px); -ms-transform: translateX(-200px); -o-transform: translateX(-200px); -webkit-transform: translateX(-200px); transform: translateX(-200px); } } @-webkit-keyframes leftOut { 0% { opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-200px); -ms-transform: translateX(-200px); -o-transform: translateX(-200px); -webkit-transform: translateX(-200px); transform: translateX(-200px); } } @keyframes rightIn { 0% { opacity: 0; -moz-transform: translateX(200px); -ms-transform: translateX(200px); -o-transform: translateX(200px); -webkit-transform: translateX(200px); transform: translateX(200px); } 100% { opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes rightIn { 0% { opacity: 0; -moz-transform: translateX(200px); -ms-transform: translateX(200px); -o-transform: translateX(200px); -webkit-transform: translateX(200px); transform: translateX(200px); } 100% { opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } .anim-left-right-short.right-in { -webkit-animation: 0.2s rightIn; -moz-animation: 0.2s rightIn; -o-animation: 0.2s rightIn; animation: 0.2s rightIn; } /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of isDisabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for isDisabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-o