external/ShinobiCE
1
0
Fork 0
mirror of https://gitlab.com/Shinobi-Systems/ShinobiCE.git synced 2025-03-09 15:40:15 +00:00
Code Issues Releases Wiki Activity

Tickly Tiger

Browse source
This commit is contained in:
Moe 2018-08-04 12:48:05 -07:00
parent 301337c140
commit a80c1e4e97
78 changed files with 28107 additions and 1402 deletions
Download patch file Download diff file Expand all files Collapse all files

54
web/libs/sass/now-ui-kit/_alerts.scss Normal file
View file

@ -0,0 +1,54 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.alert{
border: 0;
border-radius: 0;
color: $white-color;
padding-top: .9rem;
padding-bottom: .9rem;
position: relative;
&.alert-success{
background-color: $success-color-alert;
}
&.alert-danger{
background-color: $danger-color-alert;
}
&.alert-warning{
background-color: $warning-color-alert;
}
&.alert-info{
background-color: $info-color-alert;
}
&.alert-primary{
background-color: $primary-color-alert;
}
.alert-icon{
display: block;
float: left;
margin-right: 15px;
margin-top: -1px;
}
strong{
text-transform: uppercase;
font-size: 12px;
}
i.fa,
i.now-ui-icons{
font-size: 20px;
}
.close{
color: $white-color;
opacity: .9;
text-shadow: none;
line-height: 0;
outline: 0;
}
}

39
web/libs/sass/now-ui-kit/_badges.scss Normal file
View file

@ -0,0 +1,39 @@
/* badges */
.badge{
border-radius: 8px;
padding: 4px 8px;
text-transform: uppercase;
font-size: $font-size-mini;
line-height: 12px;
background-color: $transparent-bg;
border: $border;
margin-bottom: 5px;
border-radius: $border-radius-extreme;
}
.badge-icon{
padding: 0.4em 0.55em;
i{
font-size: 0.8em;
}
}
.badge-default{
@include badge-color($default-color);
}
.badge-primary{
@include badge-color($primary-color);
}
.badge-info{
@include badge-color($info-color);
}
.badge-success{
@include badge-color($success-color);
}
.badge-warning{
@include badge-color($warning-color);
}
.badge-danger{
@include badge-color($danger-color);
}
.badge-neutral{
@include badge-color($white-color);
}

158
web/libs/sass/now-ui-kit/_buttons.scss Normal file
View file

@ -0,0 +1,158 @@
.btn,
.navbar .navbar-nav > a.btn{
border-width: $border-thick;
font-weight: $font-weight-normal;
font-size: $font-size-small;
line-height: $line-height;
margin: 5px 1px;
border: none;
border-radius: $border-radius-small;
padding: $padding-btn-vertical $padding-btn-horizontal;
cursor: pointer;
@include btn-styles($default-color, $default-states-color);
&:hover,
&:focus{
@include opacity(1);
outline: 0 !important;
}
&:active,
&.active,
.open > &.dropdown-toggle {
@include box-shadow(none);
outline: 0 !important;
}
&.btn-icon {
// see above for color variations
height: $btn-icon-size-regular;
min-width: $btn-icon-size-regular;
width: $btn-icon-size-regular;
padding: 0;
font-size: $btn-icon-font-size-regular;
overflow: hidden;
position: relative;
line-height: normal;
&.btn-simple{
padding: 0;
}
&.btn-sm{
height: $btn-icon-size-small;
min-width: $btn-icon-size-small;
width: $btn-icon-size-small;
i.fa,
i.now-ui-icons{
font-size: $btn-icon-font-size-small;
}
}
&.btn-lg{
height: $btn-icon-size-lg;
min-width: $btn-icon-size-lg;
width: $btn-icon-size-lg;
i.now-ui-icons,
i.fa{
font-size: $btn-icon-font-size-lg;
}
}
&:not(.btn-footer) i.now-ui-icons,
&:not(.btn-footer) i.fa{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-12px, -12px);
line-height: 1.5626rem;
width: 25px;
}
}
&:not(.btn-icon) .now-ui-icons{
position: relative;
top: 1px;
}
}
// Apply the mixin to the buttons
// .btn-default { @include btn-styles($default-color, $default-states-color); }
.btn-primary { @include btn-styles($primary-color, $primary-states-color); }
.btn-success { @include btn-styles($success-color, $success-states-color); }
.btn-info { @include btn-styles($info-color, $info-states-color); }
.btn-warning { @include btn-styles($warning-color, $warning-states-color); }
.btn-danger { @include btn-styles($danger-color, $danger-states-color); }
.btn-neutral { @include btn-styles($white-color, $white-color); }
.btn{
&:disabled,
&[disabled],
&.disabled{
@include opacity(.5);
}
}
.btn-round{
border-width: $border-thin;
border-radius: $btn-round-radius !important;
padding: $padding-btn-vertical $padding-round-horizontal;
&.btn-simple{
padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
}
}
.btn-simple{
border: $border;
border-color: $default-color;
padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
background-color: $transparent-bg;
}
.btn-simple,
.btn-link{
&.disabled,
&:disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
background-color: $transparent-bg;
}
}
}
.btn-lg{
@include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large);
}
.btn-sm{
@include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-base, $border-radius-small);
}
.btn-link{
border: $none;
padding: $padding-base-vertical $padding-base-horizontal;
background-color: $transparent-bg;
}
.btn-wd {
min-width: 140px;
}
.btn-group.select{
width: 100%;
}
.btn-group.select .btn{
text-align: left;
}
.btn-group.select .caret{
position: absolute;
top: 50%;
margin-top: -1px;
right: 8px;
}

98
web/libs/sass/now-ui-kit/_cards.scss Normal file
View file

@ -0,0 +1,98 @@
.card{
border: 0;
border-radius: $border-radius-small;
display: inline-block;
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 20px;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
.card-body{
min-height: 190px;
}
&[data-background-color="orange"]{
background-color: $primary-color;
}
&[data-background-color="red"]{
background-color: $danger-color;
}
&[data-background-color="yellow"]{
background-color: $warning-color;
}
&[data-background-color="blue"]{
background-color: $info-color;
}
&[data-background-color="green"]{
background-color: $success-color;
}
}
.card-signup{
max-width: 350px;
margin: 0 auto;
.header{
margin-left: 20px;
margin-right: 20px;
padding: 30px 0;
}
.text-divider{
margin-top: 30px;
margin-bottom: 0px;
text-align: center;
}
.card-body{
padding-top: 0px;
padding-bottom: 0px;
min-height: auto;
}
.checkbox{
margin-top: 20px;
label{
margin-left: 17px;
}
.checkbox-material{
padding-right: 12px;
}
}
.social-line{
margin-top: 20px;
text-align: center;
.btn.btn-icon ,
.btn.btn-icon .btn-icon -mini{
margin-left: 5px;
margin-right: 5px;
box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.2);
}
}
.footer{
margin-bottom: 10px;
margin-top: 24px;
}
}
.card-plain{
background: transparent;
box-shadow: none;
.header{
margin-left: 0;
margin-right: 0;
}
.content{
padding-left: 0;
padding-right: 0;
}
}

15
web/libs/sass/now-ui-kit/_carousel.scss Normal file
View file

@ -0,0 +1,15 @@
// display flex was causing errors
.carousel-item-next,
.carousel-item-prev,
.carousel-item.active{
display: block;
}
.carousel{
.carousel-inner{
box-shadow: $box-shadow-raised;
}
.now-ui-icons{
font-size: 2em;
}
}

178
web/libs/sass/now-ui-kit/_checkboxes-radio.scss Normal file
View file

@ -0,0 +1,178 @@
.checkbox,
.radio {
margin-bottom: 12px;
}
.checkbox label,
.radio label {
display: inline-block;
position: relative;
cursor: pointer;
padding-left: 35px;
line-height: 26px;
margin-bottom: 0;
}
.radio label{
padding-left: 28px;
}
.checkbox label::before,
.checkbox label::after{
content: " ";
display: inline-block;
position: absolute;
width: 26px;
height: 26px;
left: 0;
cursor: pointer;
border-radius: 3px;
top: 0;
background-color: transparent;
border: 1px solid $light-gray;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.checkbox label::after{
font-family: 'Nucleo Outline';
content: "\ea22";
top: 0px;
text-align: center;
font-size: 14px;
opacity: 0;
color: $dark-background;
border: 0;
background-color: inherit;
}
.checkbox input[type="checkbox"],
.radio input[type="radio"]{
opacity: 0;
position: absolute;
visibility: hidden;
}
.checkbox input[type="checkbox"]:checked + label::after{
opacity: 1;
}
.checkbox input[type="checkbox"]:disabled + label,
.radio input[type="radio"]:disabled + label {
color: $dark-gray;
opacity: .5;
}
.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="checkbox"]:disabled + label::after{
cursor: not-allowed;
}
.checkbox input[type="checkbox"]:disabled + label,
.radio input[type="radio"]:disabled + label{
cursor: not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius: 50%;
}
.checkbox.checkbox-inline {
margin-top: 0;
}
.checkbox-primary input[type="checkbox"]:checked + label::before {
background-color: #428bca;
border-color: #428bca;
}
.checkbox-primary input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-danger input[type="checkbox"]:checked + label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-info input[type="checkbox"]:checked + label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-warning input[type="checkbox"]:checked + label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-success input[type="checkbox"]:checked + label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:checked + label::after {
color: #fff;
}
.radio label::before,
.radio label::after{
content: " ";
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid $light-gray;
display: inline-block;
position: absolute;
left: 3px;
top: 3px;
padding: 1px;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.radio input[type="radio"] + label:after,
.radio input[type="radio"] {
opacity: 0;
}
.radio input[type="radio"]:checked + label::after {
width: 4px;
height: 4px;
background-color: $dark-background;
border-color: $dark-background;
top: 11px;
left: 11px;
opacity: 1;
}
.radio input[type="radio"]:checked + label::after{
opacity: 1;
}
.radio input[type="radio"]:disabled + label {
color: $dark-gray;
}
.radio input[type="radio"]:disabled + label::before,
.radio input[type="radio"]:disabled + label::after {
color: $dark-gray;
}
.radio.radio-inline {
margin-top: 0;
}

106
web/libs/sass/now-ui-kit/_dropdown.scss Normal file
View file

@ -0,0 +1,106 @@
.dropdown-menu{
border: 0;
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
border-radius: $border-radius-extra-small;
@include transition($fast-transition-time, $transition-linear);
font-size: $font-size-base;
&.dropdown-menu-right{
&:before{
left:auto;
right: 10px;
}
}
&:before{
display: inline-block;
position: absolute;
width: 0;
height: 0;
vertical-align: middle;
content: "";
top: -5px;
left: 10px;
right: auto;
color: $white-color;
border-bottom: .4em solid;
border-right: .4em solid transparent;
border-left: .4em solid transparent;
}
.dropdown-item{
font-size: $font-size-small;
padding-top: $padding-base-vertical;
padding-bottom: $padding-base-vertical;
@include transition($fast-transition-time, $transition-linear);
&:hover,
&:focus{
background-color: $opacity-gray-3;
}
}
.dropdown-divider{
background-color: $opacity-gray-5;
}
.dropdown-header:not([href]):not([tabindex]){
color: $default-color-opacity;
font-size: $font-size-mini;
text-transform: uppercase;
font-weight: $font-weight-bold;
}
&.dropdown-primary{
@include dropdown-colors(darken($primary-color, 3%),$opacity-8,$white-color, $opacity-2);
}
&.dropdown-info{
@include dropdown-colors(darken($info-color, 3%),$opacity-8,$white-color, $opacity-2);
}
&.dropdown-danger{
@include dropdown-colors(darken($danger-color, 3%),$opacity-8,$white-color, $opacity-2);
}
&.dropdown-success{
@include dropdown-colors(darken($success-color, 3%),$opacity-8,$white-color, $opacity-2);
}
&.dropdown-warning{
@include dropdown-colors(darken($warning-color, 3%),$opacity-8,$white-color, $opacity-2);
}
.dropdown &{
@include transform-translate-y(-25px);
visibility: hidden;
display: block;
@include opacity(0);
}
.dropdown.show &,
&.open{
@include opacity(1);
visibility: visible;
@include transform-translate-y(0px);
}
.navbar .dropdown.show &{
@include transform-translate-y(7px);
}
}
.button-dropdown{
padding-right: $padding-base-horizontal;
cursor: pointer;
& .dropdown-toggle{
padding-top: $padding-base-vertical;
padding-bottom: $padding-base-vertical;
display: block;
&:after{
display: none;
}
}
}

256
web/libs/sass/now-ui-kit/_example-pages.scss Normal file
View file

@ -0,0 +1,256 @@
// style for the landing page
.index-page{
.page-header{
height: 125vh;
.container{
> .content-center{
top: 37%;
}
}
.category-absolute{
position: absolute;
top: 100vh;
margin-top: -60px;
padding: 0 15px;
width: 100%;
color: rgba(255,255,255,.5);
}
}
}
.landing-page{
.header{
height: 100vh;
position: relative;
.container{
padding-top: 26vh;
color: #FFFFFF;
z-index: 2;
position: relative;
}
.share{
margin-top: 150px;
}
h1{
font-weight: 600;
}
.title{
color: $white-color;
}
}
.section-team{
.team .team-player img{
max-width: 100px;
}
.team-player{
margin-bottom: 15px;
}
}
.section-contact-us{
.title{
margin-bottom: 15px;
}
.description{
margin-bottom: 30px;
}
.input-group,
.send-button,
.textarea-container{
padding: 0 40px;
}
.textarea-container{
margin: 40px 0;
}
a.btn{
margin-top: 35px;
}
}
}
// style for the profile page
.profile-page{
.page-header{
min-height: 550px;
}
.profile-container{
color: #FFFFFF;
}
.photo-container{
width: 123px;
height: 123px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
}
.title{
text-align: center;
margin-top: 30px;
}
.description,
.category{
text-align: center;
}
h5.description{
max-width: 700px;
margin: 20px auto 75px;
}
.nav-align-center{
margin-top: 30px;
}
.content{
max-width: 450px;
margin: 0 auto;
.social-description{
display: inline-block;
max-width: 150px;
width: 145px;
text-align: center;
margin: 15px 0 0px;
h2{
margin-bottom: 15px;
}
}
}
.button-container{
text-align: center;
margin-top: -106px;
}
.collections{
img{
margin-bottom: 30px;
}
}
.gallery{
margin-top: 45px;
padding-bottom: 50px;
}
}
.section-full-page{
&:after,
&:before{
display: block;
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
&:before{
background-color: rgba(0,0,0,.5);
}
&[filter-color="purple"],
&[filter-color="primary"]{
&:after{
@include linear-gradient(rgba($light-gray,.26), rgba($primary-color,.95));
}
}
&[data-image]:after{
opacity: .5;
}
> .content,
> .footer{
position: relative;
z-index: 4;
}
> .content{
min-height: calc(100vh - 80px);
}
.full-page-background{
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
display: block;
top: 0;
left: 0;
background-size: cover;
background-position: center center;
}
.footer nav > ul a:not(.btn),
.footer,
.footer .copyright a{
color: $white-color;
}
}
.login-page{
.card-login{
border-radius: $border-radius-large;
padding-bottom: $padding-base-horizontal;
max-width: 320px;
.btn-wd{
min-width: 180px;
}
.logo-container{
width: 65px;
margin: 0 auto;
margin-bottom: 55px;
img{
width: 100%;
}
}
.input-group:last-child{
margin-bottom: 40px;
}
&.card-plain{
@include input-coloured-bg($opacity-5, $white-color, $white-color, $transparent-bg, $opacity-1, $opacity-2);
.input-group-addon,
.form-group.form-group-no-border .input-group-addon,
.input-group.form-group-no-border .input-group-addon{
color: $opacity-8;
}
}
}
.link{
font-size: 10px;
color: $white-color;
text-decoration: none;
}
}

44
web/libs/sass/now-ui-kit/_footers.scss Normal file
View file

@ -0,0 +1,44 @@
.footer{
padding: 24px 0;
&.footer-default{
background-color: #f2f2f2;
}
nav{
display: inline-block;
float: left;
}
ul{
margin-bottom: 0;
padding: 0;
list-style: none;
li{
display: inline-block;
a{
color: inherit;
padding: $padding-base-vertical;
font-size: $font-size-small;
text-transform: uppercase;
text-decoration: none;
&:hover{
text-decoration: none;
}
}
}
}
.copyright{
font-size: $font-size-small;
}
&:after{
display: table;
clear: both;
content: " ";
}
}

7
web/libs/sass/now-ui-kit/_images.scss Normal file
View file

@ -0,0 +1,7 @@
img{
max-width: 100%;
border-radius: 1px;
}
.img-raised{
box-shadow: $box-shadow-raised;
}

264
web/libs/sass/now-ui-kit/_inputs.scss Normal file
View file

@ -0,0 +1,264 @@
@include form-control-placeholder($medium-gray, 1);
.form-control {
background-color: $transparent-bg;
border: 1px solid $light-gray;
border-radius: $btn-round-radius;
color: $black-color;
line-height: normal;
font-size: $font-size-small;
@include transition-input-focus-color();
@include box-shadow(none);
.has-success &{
border-color: $light-gray;
}
&:focus{
border: 1px solid $primary-color;
@include box-shadow(none);
outline: 0 !important;
color: $black-color;
& + .input-group-addon,
& ~ .input-group-addon{
border: 1px solid $primary-color;
border-left: none;
background-color: $transparent-bg;
}
}
.has-success &,
.has-error &,
.has-success &:focus,
.has-error &:focus{
@include box-shadow(none);
}
.has-success &:focus{
border-color: lighten($success-color, 5%);
}
.has-danger &,
.has-success &{
&.form-control-success,
&.form-control-danger{
background-image: none;
}
}
.has-danger &{
border-color: lighten($danger-color, 30%);
color: $danger-color;
background-color: rgba(222,222,222, .1);
&:focus{
background-color: $white-color;
}
}
& + .form-control-feedback{
border-radius: $border-radius-large;
font-size: $font-size-base;
margin-top: 0;
position: absolute;
left: 18px;
bottom: -20px;
vertical-align: middle;
}
.open &{
border-radius: $border-radius-large $border-radius-large 0 0;
border-bottom-color: transparent;
}
& + .input-group-addon{
background-color: $white-bg;
}
}
.has-success,
.has-danger{
&:after{
font-family: 'Nucleo Outline';
content: "\ea22";
display: inline-block;
position: absolute;
right: 15px;
bottom: 10px;
color: $success-color;
font-size: 11px;
}
&.input-lg{
&:after{
font-size: 13px;
top: 13px;
}
}
}
.has-danger{
&:after{
content: "\ea53";
color: $danger-color;
}
}
@include input-lg-padding($padding-large-vertical, $padding-input-horizontal);
@include input-base-padding($padding-input-vertical, $padding-input-horizontal);
.form-group.form-group-no-border,
.input-group.form-group-no-border{
.form-control,
.form-control + .input-group-addon{
background-color: $opacity-gray-3;
border: medium none;
&:focus,
&:active,
&:active{
border: medium none;
background-color: $opacity-gray-5;
}
}
.form-control{
&:focus{
& + .input-group-addon{
background-color: $opacity-gray-5;
}
}
}
.input-group-addon{
background-color: $opacity-gray-3;
border: none;
}
}
.has-error{
.form-control-feedback, .control-label{
color: $danger-color;
}
}
.has-success{
.form-control-feedback, .control-label{
color: $success-color;
}
}
.input-group-addon {
background-color: $white-bg;
border: 1px solid $light-gray;
border-radius: $btn-round-radius;
color: $dark-background;
padding: $padding-base-vertical - 1 0 $padding-base-vertical - 1 $padding-base-horizontal - 1;
@include transition-input-focus-color();
.has-success &,
.has-danger &{
background-color: $white-color;
}
.has-danger .form-control:focus + &{
color: $danger-color;
}
.has-success .form-control:focus + &{
color: $success-color;
}
& + .form-control,
& ~ .form-control{
@include input-size($padding-base-vertical - 1, $padding-base-horizontal);
padding-left: 18px;
}
i{
width: 17px;
}
}
.input-group-focus{
.input-group-addon{
background-color: $white-bg;
border-color: $primary-color;
}
&.form-group-no-border{
.input-group-addon{
background-color: $opacity-gray-5;
}
}
}
.input-group,
.form-group{
margin-bottom: 10px;
}
.input-group[disabled]{
.input-group-addon{
background-color: $light-gray;
}
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
border-right: 0 none;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
border-left: 0 none;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
background-color: $light-gray;
color: $default-color;
cursor: not-allowed;
}
.input-group-btn .btn{
border-width: $border-thin;
padding: $padding-btn-vertical $padding-base-horizontal;
}
.input-group-btn .btn-default:not(.btn-fill){
border-color: $medium-gray;
}
.input-group-btn:last-child > .btn{
margin-left: 0;
}
textarea.form-control{
max-width: 100%;
padding: 10px 10px 0 0;
resize: none;
border: none;
border-bottom: 1px solid $light-gray;
border-radius: 0;
line-height: 2;
&:focus,
&:active{
border-left: none;
border-top: none;
border-right: none;
}
}
.has-success,
.has-danger{
&.form-group .form-control,
&.form-group.form-group-no-border .form-control{
padding-right: $padding-input-horizontal + 21;
}
}
.form-group{
position:relative;
}
.form-group.has-error, .form-group.has-danger{
margin-bottom: 20px;
}

63
web/libs/sass/now-ui-kit/_misc.scss Normal file
View file

@ -0,0 +1,63 @@
body{
color: $black-color;
font-size: $font-size-base;
font-family: $sans-serif-family;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.main{
position: relative;
background: $white-color;
}
/* Animations */
.nav-pills .nav-link,
.nav-item .nav-link,
.navbar,
.nav-tabs .nav-link{
@include transition($general-transition-time, $transition-ease);
}
//transition for dropdown caret
.dropdown-toggle:after,
.bootstrap-switch-label:before{
@include transition($fast-transition-time, $transition-ease);
}
.dropdown-toggle[aria-expanded="true"]:after{
@include rotate-180();
}
.button-bar{
display: block;
position: relative;
width: 22px;
height: 1px;
border-radius: 1px;
background: $white-bg;
& + .button-bar{
margin-top: 7px;
}
&:nth-child(2){
width: 17px;
}
}
.open{
@include transform-translate-y(0);
@include opacity(1);
visibility: visible;
}
.separator{
height: 2px;
width: 44px;
background-color: $default-color;
margin: 20px auto;
&.separator-primary{
background-color: $primary-color;
}
}

14
web/libs/sass/now-ui-kit/_mixins.scss Normal file
View file

@ -0,0 +1,14 @@
//Utilities
@import "mixins/transparency";
//Components
@import "mixins/buttons";
@import "mixins/vendor-prefixes";
@import "mixins/inputs";
@import "mixins/dropdown";
@import "mixins/badges";
@import "mixins/navbar";
@import "mixins/popovers";
@import "mixins/modals";
@import "mixins/pages";
@import "mixins/datepicker";

173
web/libs/sass/now-ui-kit/_modals.scss Normal file
View file

@ -0,0 +1,173 @@
//
// Modals
// Now Ui Kit Design element Dialogs
// --------------------------------------------------
.modal-content {
border-radius: $border-radius-small;
border: none;
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.5);
// 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;
& button{
position: absolute;
right: 27px;
top: 30px;
outline: 0;
}
.title{
margin-top: 5px;
margin-bottom: 0;
}
}
// 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;
line-height: 1.9;
}
// Footer (for actions)
.modal-footer {
border-top: none;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
-webkit-justify-content: space-between; /* Safari 6.1+ */
justify-content: space-between;
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.3);
}
.modal{
&.modal-mini{
p{
text-align: center;
}
.modal-dialog{
max-width: 255px;
margin: 0 auto;
}
.modal-profile{
width: 70px;
height: 70px;
background-color: $white-color;
border-radius: 50%;
text-align: center;
line-height: 5.9;
box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
i{
color: $primary-color;
font-size: 21px;
}
&[class*="modal-profile-"]{
i{
color: $white-color;
}
}
&.modal-profile-primary{
background-color: $primary-color;
}
&.modal-profile-danger{
background-color: $danger-color;
}
&.modal-profile-warning{
background-color: $warning-color;
}
&.modal-profile-success{
background-color: $success-color;
}
&.modal-profile-info{
background-color: $info-color;
}
}
.modal-footer{
button{
text-transform: uppercase;
&:first-child{
opacity: .5;
}
}
}
}
&.modal-default{
@include modal-colors($white-color, $black-color);
}
&.modal-primary{
@include modal-colors($primary-color, $white-color);
}
&.modal-danger{
@include modal-colors($danger-color, $white-color);
}
&.modal-warning{
@include modal-colors($warning-color, $white-color);
}
&.modal-success{
@include modal-colors($success-color, $white-color);
}
&.modal-info{
@include modal-colors($info-color, $white-color);
}
&.show.modal-mini .modal-dialog{
-webkit-transform: translate(0,30%);
-o-transform: translate(0,30%);
transform: translate(0,30%);
}
.modal-header .close{
color: $danger-color;
text-shadow: none;
&:hover,
&:focus{
opacity: 1;
}
}
}

193
web/libs/sass/now-ui-kit/_navbar.scss Normal file
View file

@ -0,0 +1,193 @@
.navbar{
padding-top: $navbar-padding-base;
padding-bottom: $navbar-padding-base;
min-height: 53px;
margin-bottom: 20px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
a{
vertical-align: middle;
&:not(.btn):not(.dropdown-item){
color: $white-color;
}
}
p{
display: inline-block;
margin: 0;
line-height: 21px;
}
.navbar-nav{
&.navbar-logo{
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 49px;
top: -4px;
}
.nav-link.btn{
padding: $padding-btn-vertical $padding-btn-horizontal;
&.btn-lg{
padding: $padding-large-vertical $padding-large-horizontal;
}
&.btn-sm{
padding: $padding-small-vertical $padding-small-horizontal;
}
}
.nav-link:not(.btn){
text-transform: uppercase;
font-size: $font-size-mini;
padding: $padding-base-vertical $padding-base-horizontal;
line-height: $line-height-nav-link;
i.fa + p,
i.now-ui-icons + p{
margin-left: 5px;
}
i.fa,
i.now-ui-icons{
font-size: 18px;
position: relative;
top: 2px;
text-align: center;
width: 21px;
}
i.now-ui-icons{
top: 4px;
font-size: 16px;
}
&.profile-photo{
.profile-photo-small{
width: 27px;
height: 27px;
}
}
&.disabled{
opacity: .5;
color: $white-color;
}
}
.nav-item.active .nav-link:not(.btn),
.nav-item .nav-link:not(.btn):focus,
.nav-item .nav-link:not(.btn):hover,
.nav-item .nav-link:not(.btn):active{
background-color: $opacity-2;
border-radius: $border-radius-small;
}
}
.logo-container{
width: 27px;
height: 27px;
overflow: hidden;
margin: 0 auto;
border-radius: 50%;
border: 1px solid transparent;
}
.navbar-brand{
text-transform: uppercase;
font-size: $font-size-small;
padding-top: $padding-base-vertical;
padding-bottom: $padding-base-vertical;
line-height: $line-height-nav-link;
}
.navbar-toggler{
width: 37px;
height: 27px;
outline: 0;
cursor: pointer;
&.navbar-toggler-left{
position: relative;
left: 0;
padding-left: 0;
}
&:hover{
& .navbar-toggler-bar.bar2{
width: 22px;
}
}
}
.button-dropdown{
.navbar-toggler-bar:nth-child(2){
width: 17px;
}
}
&.navbar-transparent{
background-color: $transparent-bg !important;
box-shadow: none;
color: $white-color;
padding-top: 20px;
}
&.bg-white:not(.navbar-transparent){
a:not(.dropdown-item){
color: $default-color;
&.disabled{
opacity: .5;
color: $default-color;
}
}
.button-bar{
background: $default-color;
}
.nav-item.active .nav-link:not(.btn),
.nav-item .nav-link:not(.btn):focus,
.nav-item .nav-link:not(.btn):hover,
.nav-item .nav-link:not(.btn):active{
background-color: $opacity-gray-3;
}
.logo-container{
border: 1px solid $default-color;
}
}
}
.bg-default{
background-color: $default-color !important;
}
.bg-primary{
background-color: $primary-color !important;
}
.bg-info{
background-color: $info-color !important;
}
.bg-success{
background-color: $success-color !important;
}
.bg-danger{
background-color: $danger-color !important;
}
.bg-warning{
background-color: $warning-color !important;
}
.bg-white{
background-color: $white-color !important;
}

533
web/libs/sass/now-ui-kit/_nucleo-outline.scss Normal file
View file

@ -0,0 +1,533 @@
/* --------------------------------
Nucleo Outline Web Font - nucleoapp.com/
License - nucleoapp.com/license/
Created using IcoMoon - icomoon.io
-------------------------------- */
@font-face {
font-family: 'Nucleo Outline';
src: url('../fonts/nucleo-outline.eot');
src: url('../fonts/nucleo-outline.eot') format('embedded-opentype'),
url('../fonts/nucleo-outline.woff2') format('woff2'),
url('../fonts/nucleo-outline.woff') format('woff'),
url('../fonts/nucleo-outline.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/*------------------------
base class definition
-------------------------*/
.now-ui-icons {
display: inline-block;
font: normal normal normal 14px/1 'Nucleo Outline';
font-size: inherit;
speak: none;
text-transform: none;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*------------------------
change icon size
-------------------------*/
/*----------------------------------
add a square/circle background
-----------------------------------*/
.now-ui-icons.circle {
padding: 0.33333333em;
vertical-align: -16%;
background-color: #eee;
}
.now-ui-icons.circle {
border-radius: 50%;
}
/*------------------------
list icons
-------------------------*/
.nc-icon-ul {
padding-left: 0;
margin-left: 2.14285714em;
list-style-type: none;
}
.nc-icon-ul > li {
position: relative;
}
.nc-icon-ul > li > .now-ui-icons {
position: absolute;
left: -1.57142857em;
top: 0.14285714em;
text-align: center;
}
.nc-icon-ul > li > .now-ui-icons.circle {
top: -0.19047619em;
left: -1.9047619em;
}
/*------------------------
spinning icons
-------------------------*/
.now-ui-icons.spin {
-webkit-animation: nc-icon-spin 2s infinite linear;
-moz-animation: nc-icon-spin 2s infinite linear;
animation: nc-icon-spin 2s infinite linear;
}
@-webkit-keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes nc-icon-spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*------------------------
rotated/flipped icons
-------------------------*/
/*------------------------
font icons
-------------------------*/
.now-ui-icons.ui-1_check:before{
content: "\ea22";
}
.now-ui-icons.ui-1_email-85:before {
content: "\ea2a";
}
.now-ui-icons.arrows-1_cloud-download-93:before {
content: "\ea21";
}
.now-ui-icons.arrows-1_cloud-upload-94:before {
content: "\ea24";
}
.now-ui-icons.arrows-1_minimal-down:before {
content: "\ea39";
}
.now-ui-icons.arrows-1_minimal-left:before {
content: "\ea3a";
}
.now-ui-icons.arrows-1_minimal-right:before {
content: "\ea3b";
}
.now-ui-icons.arrows-1_minimal-up:before {
content: "\ea3c";
}
.now-ui-icons.arrows-1_refresh-69:before {
content: "\ea44";
}
.now-ui-icons.arrows-1_share-66:before {
content: "\ea4c";
}
.now-ui-icons.business_badge:before {
content: "\ea09";
}
.now-ui-icons.business_bank:before {
content: "\ea0a";
}
.now-ui-icons.business_briefcase-24:before {
content: "\ea13";
}
.now-ui-icons.business_bulb-63:before {
content: "\ea15";
}
.now-ui-icons.business_chart-bar-32:before {
content: "\ea1e";
}
.now-ui-icons.business_chart-pie-36:before {
content: "\ea1f";
}
.now-ui-icons.business_globe:before {
content: "\ea2f";
}
.now-ui-icons.business_money-coins:before {
content: "\ea40";
}
.now-ui-icons.clothes_tie-bow:before {
content: "\ea5b";
}
.now-ui-icons.design_vector:before {
content: "\ea61";
}
.now-ui-icons.design_app:before {
content: "\ea08";
}
.now-ui-icons.design_bullet-list-67:before {
content: "\ea14";
}
.now-ui-icons.design_image:before {
content: "\ea33";
}
.now-ui-icons.design_palette:before {
content: "\ea41";
}
.now-ui-icons.design_scissors:before {
content: "\ea4a";
}
.now-ui-icons.design-2_html5:before {
content: "\ea32";
}
.now-ui-icons.design-2_ruler-pencil:before {
content: "\ea48";
}
.now-ui-icons.emoticons_satisfied:before {
content: "\ea49";
}
.now-ui-icons.files_box:before {
content: "\ea12";
}
.now-ui-icons.files_paper:before {
content: "\ea43";
}
.now-ui-icons.files_single-copy-04:before {
content: "\ea52";
}
.now-ui-icons.health_ambulance:before {
content: "\ea07";
}
.now-ui-icons.loader_gear:before {
content: "\ea4e";
}
.now-ui-icons.loader_refresh:before {
content: "\ea44";
}
.now-ui-icons.location_bookmark:before {
content: "\ea10";
}
.now-ui-icons.location_compass-05:before {
content: "\ea25";
}
.now-ui-icons.location_map-big:before {
content: "\ea3d";
}
.now-ui-icons.location_pin:before {
content: "\ea47";
}
.now-ui-icons.location_world:before {
content: "\ea63";
}
.now-ui-icons.media-1_album:before {
content: "\ea02";
}
.now-ui-icons.media-1_button-pause:before {
content: "\ea16";
}
.now-ui-icons.media-1_button-play:before {
content: "\ea18";
}
.now-ui-icons.media-1_button-power:before {
content: "\ea19";
}
.now-ui-icons.media-1_camera-compact:before {
content: "\ea1c";
}
.now-ui-icons.media-2_note-03:before {
content: "\ea3f";
}
.now-ui-icons.media-2_sound-wave:before {
content: "\ea57";
}
.now-ui-icons.objects_diamond:before {
content: "\ea29";
}
.now-ui-icons.objects_globe:before {
content: "\ea2f";
}
.now-ui-icons.objects_key-25:before {
content: "\ea38";
}
.now-ui-icons.objects_planet:before {
content: "\ea46";
}
.now-ui-icons.objects_spaceship:before {
content: "\ea55";
}
.now-ui-icons.objects_support-17:before {
content: "\ea56";
}
.now-ui-icons.objects_umbrella-13:before {
content: "\ea5f";
}
.now-ui-icons.education_agenda-bookmark:before {
content: "\ea01";
}
.now-ui-icons.education_atom:before {
content: "\ea0c";
}
.now-ui-icons.education_glasses:before {
content: "\ea2d";
}
.now-ui-icons.education_hat:before {
content: "\ea30";
}
.now-ui-icons.education_paper:before {
content: "\ea42";
}
.now-ui-icons.shopping_bag-16:before {
content: "\ea0d";
}
.now-ui-icons.shopping_basket:before {
content: "\ea0b";
}
.now-ui-icons.shopping_box:before {
content: "\ea11";
}
.now-ui-icons.shopping_cart-simple:before {
content: "\ea1d";
}
.now-ui-icons.shopping_credit-card:before {
content: "\ea28";
}
.now-ui-icons.shopping_delivery-fast:before {
content: "\ea27";
}
.now-ui-icons.shopping_shop:before {
content: "\ea50";
}
.now-ui-icons.shopping_tag-content:before {
content: "\ea59";
}
.now-ui-icons.sport_trophy:before {
content: "\ea5d";
}
.now-ui-icons.sport_user-run:before {
content: "\ea60";
}
.now-ui-icons.tech_controller-modern:before {
content: "\ea26";
}
.now-ui-icons.tech_headphones:before {
content: "\ea31";
}
.now-ui-icons.tech_laptop:before {
content: "\ea36";
}
.now-ui-icons.tech_mobile:before {
content: "\ea3e";
}
.now-ui-icons.tech_tablet:before {
content: "\ea58";
}
.now-ui-icons.tech_tv:before {
content: "\ea5e";
}
.now-ui-icons.tech_watch-time:before {
content: "\ea62";
}
.now-ui-icons.text_align-center:before {
content: "\ea05";
}
.now-ui-icons.text_align-left:before {
content: "\ea06";
}
.now-ui-icons.text_bold:before {
content: "\ea0e";
}
.now-ui-icons.text_caps-small:before {
content: "\ea1b";
}
.now-ui-icons.gestures_tap-01:before {
content: "\ea5a";
}
.now-ui-icons.transportation_air-baloon:before {
content: "\ea03";
}
.now-ui-icons.transportation_bus-front-12:before {
content: "\ea17";
}
.now-ui-icons.travel_info:before {
content: "\ea04";
}
.now-ui-icons.travel_istanbul:before {
content: "\ea34";
}
.now-ui-icons.ui-1_bell-53:before {
content: "\ea0f";
}
.now-ui-icons.ui-1_calendar-60:before {
content: "\ea1a";
}
.now-ui-icons.ui-1_lock-circle-open:before {
content: "\ea35";
}
.now-ui-icons.ui-1_send:before {
content: "\ea4d";
}
.now-ui-icons.ui-1_settings-gear-63:before {
content: "\ea4e";
}
.now-ui-icons.ui-1_simple-add:before {
content: "\ea4f";
}
.now-ui-icons.ui-1_simple-delete:before {
content: "\ea54";
}
.now-ui-icons.ui-1_simple-remove:before {
content: "\ea53";
}
.now-ui-icons.ui-1_zoom-bold:before {
content: "\ea64";
}
.now-ui-icons.ui-2_chat-round:before {
content: "\ea20";
}
.now-ui-icons.ui-2_favourite-28:before {
content: "\ea2b";
}
.now-ui-icons.ui-2_like:before {
content: "\ea37";
}
.now-ui-icons.ui-2_settings-90:before {
content: "\ea4b";
}
.now-ui-icons.ui-2_time-alarm:before {
content: "\ea5c";
}
.now-ui-icons.users_circle-08:before {
content: "\ea23";
}
.now-ui-icons.users_single-02:before {
content: "\ea51";
}

136
web/libs/sass/now-ui-kit/_pagination.scss Normal file
View file

@ -0,0 +1,136 @@
.pagination{
.page-item .page-link{
border: 0;
border-radius: 30px !important;
transition: all .3s;
padding: 0px 11px;
margin: 0 3px;
min-width: 30px;
text-align: center;
height: 30px;
line-height: 30px;
color: $black-color;
cursor: pointer;
font-size: $font-size-base;
text-transform: uppercase;
background: transparent;
&:hover,
&:focus{
color: $black-color;
background-color: $opacity-gray-3;
border: none;
}
}
.arrow-margin-left,
.arrow-margin-right{
position: absolute;
}
.arrow-margin-right{
right: 0;
}
.arrow-margin-left{
left: 0;
}
.page-item.active > .page-link{
color: $light-gray;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
&,
&:focus,
&:hover{
background-color: $default-color;
border-color: $default-color;
color: $white-color;
}
}
.page-item.disabled > .page-link{
opacity: .5;
background-color: rgba(255,255,255, .2);
color: $white-color;
}
// Colors
&.pagination-info{
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $brand-info;
border-color: $brand-info;
}
}
}
&.pagination-success{
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $brand-success;
border-color: $brand-success;
}
}
}
&.pagination-primary{
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $brand-primary;
border-color: $brand-primary;
}
}
}
&.pagination-warning{
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $brand-warning;
border-color: $brand-warning;
}
}
}
&.pagination-danger{
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $brand-danger;
border-color: $brand-danger;
}
}
}
&.pagination-neutral{
.page-item > .page-link{
color: $white-color;
&:focus,
&:hover{
background-color: $opacity-2;
color: $white-color;
}
}
.page-item.active > .page-link{
&,
&:focus,
&:hover{
background-color: $white-bg;
border-color: $white-bg;
color: $brand-primary;
}
}
}
}

131
web/libs/sass/now-ui-kit/_pills.scss Normal file
View file

@ -0,0 +1,131 @@
.nav-pills{
.nav-item {
.nav-link{
padding: 0 15.5px;
text-align: center;
height: 60px;
width: 60px;
font-weight: $font-weight-normal;
color: $dark-gray;
margin-right: 19px;
background-color: $opacity-gray-3;
border-radius: $btn-round-radius;
&:hover{
background-color: $opacity-gray-3;
}
&.active{
&,
&:focus,
&:hover{
background-color: $dark-gray;
color: $white-color;
box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3);
}
}
&.disabled,
&:disabled,
&[disabled]{
opacity: .5;
}
}
i{
display: block;
font-size: 20px;
line-height: 60px;
}
}
&.nav-pills-neutral{
.nav-item {
.nav-link{
background-color: $opacity-2;
color: $white-color;
&.active{
&,
&:focus,
&:hover{
background-color: $white-color;
color: $primary-color;
}
}
}
}
}
&.nav-pills-primary{
.nav-item {
.nav-link.active{
&,
&:focus,
&:hover{
background-color: $brand-primary;
}
}
}
}
&.nav-pills-info{
.nav-item {
.nav-link.active{
&,
&:focus,
&:hover{
background-color: $brand-info;
}
}
}
}
&.nav-pills-success{
.nav-item {
.nav-link.active{
&,
&:focus,
&:hover{
background-color: $brand-success;
}
}
}
}
&.nav-pills-warning{
.nav-item {
.nav-link.active{
&,
&:focus,
&:hover{
background-color: $brand-warning;
}
}
}
}
&.nav-pills-danger{
.nav-item {
.nav-link.active{
&,
&:focus,
&:hover{
background-color: $brand-danger;
}
}
}
}
}
.tab-space{
padding: 20px 0 50px 0px;
}
.nav-align-center{
text-align: center;
.nav-pills{
display: inline-flex;
}
}

85
web/libs/sass/now-ui-kit/_popups.scss Normal file
View file

@ -0,0 +1,85 @@
.popover{
font-size: $font-size-base;
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
border: none;
line-height: 1.7;
max-width: 240px;
&.bs-popover-top .arrow:before,
&.bs-popover-left .arrow:before,
&.bs-popover-right .arrow:before,
&.bs-popover-bottom .arrow:before,{
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
.popover-header{
color: $default-color-opacity;
font-size: $font-size-base;
text-transform: capitalize;
font-weight: $font-weight-semi;
margin: 0;
margin-top: 5px;
border: none;
background-color: transparent;
}
&:before{
display: none;
}
&.bs-tether-element-attached-top:after{
border-bottom-color:$white-color;
top: -9px;
}
&.popover-primary{
@include popover-color($primary-color, $white-color);
}
&.popover-info{
@include popover-color($info-color, $white-color);
}
&.popover-warning{
@include popover-color($warning-color, $white-color);
}
&.popover-danger{
@include popover-color($danger-color, $white-color);
}
&.popover-success{
@include popover-color($success-color, $white-color);
}
}
.tooltip{
&.bs-tooltip-right .arrow:before{
border-right-color:$white-color;
}
&.bs-tooltip-top .arrow:before{
border-top-color:$white-color;
}
&.bs-tooltip-bottom .arrow:before{
border-bottom-color:$white-color;
}
&.bs-tooltip-left .arrow:before{
border-left-color:$white-color;
}
}
.tooltip-inner{
padding: $padding-base-vertical $padding-base-horizontal;
min-width: 130px;
background-color: $white-color;
font-size: $font-size-base;
color: inherit;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
}

126
web/libs/sass/now-ui-kit/_progress.scss Normal file
View file

@ -0,0 +1,126 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.progress-container{
position: relative;
& + .progress-container,
& ~ .progress-container{
margin-top: $margin-base-vertical;
}
.progress-badge{
color: $default-color;
font-size: $font-size-small;
text-transform: uppercase;
}
.progress {
height: 1px;
border-radius: 0;
box-shadow: none;
background: $opacity-gray-8;
margin-top: 14px;
.progress-bar {
box-shadow: none;
background-color: $default-color;
}
.progress-value{
position: absolute;
top: 2px;
right: 0;
color: $default-color;
font-size: $font-size-small;
}
}
&.progress-neutral{
.progress{
background: rgba(255, 255, 255, .3);
}
.progress-bar{
background: $white-bg;
}
.progress-value,
.progress-badge{
color: $white-color;
}
}
&.progress-primary{
.progress{
background: $primary-color-opacity;
}
.progress-bar{
background: $brand-primary;
}
.progress-value,
.progress-badge{
color: $brand-primary;
}
}
&.progress-info{
.progress{
background: $info-color-opacity;
}
.progress-bar{
background: $brand-info;
}
.progress-value,
.progress-badge{
color: $brand-info;
}
}
&.progress-success{
.progress{
background: $success-color-opacity;
}
.progress-bar{
background: $brand-success;
}
.progress-value,
.progress-badge{
color: $brand-success;
}
}
&.progress-warning{
.progress{
background: $warning-color-opacity;
}
.progress-bar{
background: $brand-warning;
}
.progress-value,
.progress-badge{
color: $brand-warning;
}
}
&.progress-danger{
.progress{
background: $danger-color-opacity;
}
.progress-bar{
background: $brand-danger;
}
.progress-value,
.progress-badge{
color: $brand-danger;
}
}
}

392
web/libs/sass/now-ui-kit/_responsive.scss Normal file
View file

@ -0,0 +1,392 @@
@media screen and (max-width: 991px){
.sidebar-collapse{
@include navbar-collapse();
&.menu-on-left{
.navbar-collapse{
right: auto;
left: 0;
@include transform-translate-x(-300px);
}
}
.nav-open &{
.navbar-collapse{
@include transform-translate-x(0px);
}
.wrapper{
@include transform-translate-x(-150px);
}
.navbar-translate{
@include transform-translate-x(-300px);
}
&.menu-on-left{
.navbar-collapse{
@include transform-translate-x(0px);
}
.navbar-translate{
@include transform-translate-x(300px);
}
.wrapper{
@include transform-translate-x(150px);
}
#bodyClick{
right: auto;
left: 300px;
}
}
}
}
.bootstrap-collapse{
.navbar .navbar-collapse{
background: none !important;
}
@include navbar-responsive();
}
.profile-photo .profile-photo-small{
margin-left: -2px;
}
.button-dropdown{
display: none;
}
.section-nucleo-icons .container .row > [class*="col-"]:first-child{
text-align: center;
}
.footer{
.copyright{
text-align: right;
}
}
.section-nucleo-icons .icons-container{
margin-top: 65px;
}
.navbar-nav{
.nav-link{
i.fa,
i.now-ui-icons{
opacity: .5;
}
}
}
.section-images{
height: 500px;
max-height: 500px;
.hero-images-container{
max-width: 500px;
}
.hero-images-container-1{
right: 10%;
top: 68%;
max-width: 269px;
}
.hero-images-container-2{
right: 5%;
max-width: 135px;
top: 93%;
}
}
}
@media screen and (min-width: 992px){
.burger-menu{
@include navbar-collapse();
.nav-open & .navbar-collapse{
@include transform-translate-x(0px);
}
.navbar-collapse {
display: block !important;
.navbar-nav {
margin-top: 53px;
height: 100%;
z-index: 2;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
.nav-item{
margin: 0;
}
}
}
&.menu-on-left .navbar-collapse{
right: auto;
left: 0;
@include transform-translate-x(-300px);
}
[class*="navbar-expand-"]{
.navbar-nav .dropdown-menu{
position: static;
float: none;
}
.navbar-toggler{
display: inline-block;
}
}
.section-navbars .navbar-collapse{
display: none !important;
}
.nav-open &{
&.menu-on-left .navbar .navbar-translate{
@include transform-translate-x(300px);
}
.navbar .navbar-translate{
@include transform-translate-x(-300px);
}
&.menu-on-left .navbar-collapse{
@include transform-translate-x(0px);
}
&.menu-on-left #bodyClick{
right: auto;
left: 300px;
}
}
&.menu-on-left .navbar-brand{
float: right;
margin-right: 0;
margin-left: 1rem;
}
}
.navbar-nav{
.nav-link{
&.profile-photo{
padding: 0;
margin: 7px $padding-base-horizontal;
}
&.btn:not(.btn-sm){
margin: 0;
}
}
.nav-item:not(:last-child){
margin-right: 5px;
}
}
.section-nucleo-icons .icons-container{
margin: 0 0 0 auto;
}
.dropdown-menu .dropdown-item{
color: inherit;
}
.footer{
.copyright{
float: right;
}
}
}
@media screen and (min-width: 768px){
.image-container{
&.image-right{
top: 80px;
margin-left: - 100px;
margin-bottom: 130px;
}
&.image-left{
margin-right: -100px;
}
}
}
@media screen and (max-width: 768px){
.image-container{
&.image-left{
margin-bottom: 220px;
p.blockquote{
margin: 0 auto;
position: relative;
right: 0;
}
}
}
.nav-tabs{
display: inline-block;
width: 100%;
padding-left: 100px;
padding-right: 100px;
text-align: center;
.nav-item > .nav-link{
margin-bottom: 5px;
}
}
.landing-page .section-story-overview .image-container:nth-child(2){
margin-left: 0;
margin-bottom: 30px;
}
}
@media screen and (max-width: 576px){
.navbar[class*='navbar-expand-'] .container{
margin-left: 0;
margin-right: 0;
}
.footer{
.copyright{
text-align: center;
}
}
.section-nucleo-icons{
.icons-container{
i{
font-size: 30px;
&:nth-child(6){
font-size: 48px;
}
}
}
}
.page-header{
.container h6.category-absolute{
width: 90%;
}
}
}
@media screen and (min-width: 991px) and (max-width: 1200px){
.section-images{
.hero-images-container-1{
right: 9%;
max-width: 370px;
}
.hero-images-container-2{
right: 2%;
max-width: 216px;
}
}
}
@media screen and (max-width: 768px){
.section-images{
height: 300px;
max-height: 300px;
.hero-images-container{
max-width: 380px;
}
.hero-images-container-1{
right: 7%;
top: 87%;
max-width: 210px;
}
.hero-images-container-2{
right: 1%;
max-width: 133px;
top: 99%;
}
}
}
@media screen and (max-width: 517px) {
.alert .alert-icon{
margin-top: 10px;
}
}
@media screen and (min-width: 1200px) {
.section-images{
.hero-images-container-1{
top: 51%;
right: 21%;
}
.hero-images-container-2{
top: 66%;
right: 14%;
}
}
}
// Ipad responsive portrait mode
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and ( orientation : portrait){
.section-images .hero-images-container,
.section-images .hero-images-container-1,
.section-images .hero-images-container-2{
margin-top: -15vh;
margin-left: 80px;
}
.section-images .hero-images-container{
max-width: 300px;
}
.section-images .hero-images-container-1{
right: 28%;
top: 40%;
}
.section-images .hero-images-container-2{
right: 21%;
top: 55%;
}
.index-page .category-absolute{
top: 90vh;
}
}
@media screen and (max-width: 580px) {
.alert{
button.close{
position: absolute;
right: 11px;
top: 50%;
transform: translateY(-50%);
}
}
}

396
web/libs/sass/now-ui-kit/_sections.scss Normal file
View file

@ -0,0 +1,396 @@
.section{
padding: 70px 0;
position: relative;
background: $white-color;
.row + .category{
margin-top: $margin-base-vertical;
}
}
.section-navbars{
padding-bottom: 0;
}
.section-full-screen{
height: 100vh;
}
.section-signup{
padding-top: 20vh;
}
.page-header{
height: 100vh;
max-height: 1050px;
padding: 0;
color: $white-color;
position: relative;
background-position: center center;
background-size: cover;
.page-header-image{
position: absolute;
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
z-index: -1;
}
footer{
position: absolute;
bottom: 0;
width: 100%;
}
.container{
height: 100%;
z-index: 1;
text-align: center;
position: relative;
> .content-center{
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align: center;
padding: 0 15px;
color: #FFFFFF;
width: 100%;
max-width: 880px;
}
}
.category,
.description{
color: $opacity-5;
}
&.page-header-small{
height: 60vh;
max-height: 440px;
}
&:after,
&:before{
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
display: block;
left: 0;
top: 0;
content: "";
}
&:before{
background-color: rgba(0,0,0,.5);
}
&[filter-color="orange"]{
@include linear-gradient(rgba($black-color,.20), rgba(224, 23, 3, 0.6));
}
.container{
z-index: 2;
}
}
.clear-filter{
&:after,
&:before{
display: none;
}
}
.section-story-overview{
padding: 50px 0;
.image-container{
height: 335px;
position: relative;
background-position: center center;
background-size: cover;
box-shadow: $box-shadow-raised;
border-radius: .25rem;
& + .category{
padding-top: 15px;
}
&.image-right{
z-index: 2;
+ h3.title{
margin-top: 120px;
}
}
&.image-left{
z-index: 1;
}
&:nth-child(2){
margin-top: 420px;
margin-left: -105px;
}
}
p.blockquote{
width: 220px;
min-height: 180px;
text-align: left;
position: absolute;
top: 376px;
right: 155px;
z-index: 0;
}
}
.section-nucleo-icons{
.nucleo-container img{
width: auto;
left: 0;
top: 0;
height: 100%;
position: absolute;
}
.nucleo-container{
height: 335px;
position: relative;
}
h5{
margin-bottom: 35px;
}
.icons-container{
position: relative;
max-width: 450px;
height: 300px;
max-height: 300px;
margin: 0 auto;
}
.icons-container i{
font-size: 34px;
position: absolute;
left: 0;
top: 0;
}
.icons-container i:nth-child(1){
top: 5%;
left: 7%;
}
.icons-container i:nth-child(2){
top: 28%;
left: 24%;
}
.icons-container i:nth-child(3){
top: 40%;
}
.icons-container i:nth-child(4){
top: 18%;
left: 62%;
}
.icons-container i:nth-child(5){
top: 74%;
left: 3%;
}
.icons-container i:nth-child(6){
top: 36%;
left: 44%;
font-size: 65px;
color: #f96332;
padding: 1px;
}
.icons-container i:nth-child(7){
top: 59%;
left: 26%;
}
.icons-container i:nth-child(8){
top: 60%;
left: 69%;
}
.icons-container i:nth-child(9){
top: 72%;
left: 47%;
}
.icons-container i:nth-child(10){
top: 88%;
left: 27%;
}
.icons-container i:nth-child(11){
top: 31%;
left: 80%;
}
.icons-container i:nth-child(12){
top: 88%;
left: 68%;
}
.icons-container i:nth-child(13){
top: 5%;
left: 81%;
}
.icons-container i:nth-child(14){
top: 58%;
left: 90%;
}
.icons-container i:nth-child(15){
top: 6%;
left: 40%;
}
}
.section-images{
max-height: 670px;
height: 670px;
.hero-images-container,
.hero-images-container-1,
.hero-images-container-2{
margin-top: -38vh;
}
.hero-images-container{
max-width: 670px;
}
.hero-images-container-1{
max-width: 390px;
position: absolute;
top: 55%;
right: 18%;
}
.hero-images-container-2{
max-width: 225px;
position: absolute;
top: 68%;
right: 12%;
}
}
[data-background-color="orange"]{
background-color: $orange-bg;
}
[data-background-color="black"]{
background-color: $black-color;
}
[data-background-color]{
color: $white-color;
.title,
.social-description h2,
p,
p.blockquote,
p.blockquote small,
h1,h2,h3,h4,h5,h6,a:not(.btn):not(.dropdown-item),
.icons-container i{
color: $white-color;
}
.separator{
background-color: $white-color;
}
.navbar.bg-white p{
color: $default-color;
}
.description,
.social-description p{
color: $opacity-8;
}
p.blockquote{
border-color: $opacity-2;
}
//radio and checkboxes
.checkbox label::before,
.checkbox label::after,
.radio label::before,
.radio label::after{
border-color: $opacity-2;
}
.checkbox label::after,
.checkbox label,
.radio label{
color: $white-color;
}
.checkbox input[type="checkbox"]:disabled + label,
.radio input[type="radio"]:disabled + label {
color: $white-color;
}
.radio input[type="radio"]:not(:disabled):hover + label::after,
.radio input[type="radio"]:checked + label::after {
background-color: $white-color;
border-color: $white-color;
}
//inputs
@include input-coloured-bg($opacity-5, $white-color, $white-color, $transparent-bg, $opacity-1, $opacity-2);
.input-group-addon,
.form-group.form-group-no-border .input-group-addon,
.input-group.form-group-no-border .input-group-addon{
color: $opacity-8;
}
//buttons
.btn.btn-simple{
background-color: $transparent-bg;
border-color: $opacity-5;
color: $white-color;
&:hover,
&:hover,
&:focus,
&:active{
background-color: $transparent-bg;
border-color: $white-color;
}
}
//tabs
.nav-tabs{
> .nav-item{
>.nav-link{
i.now-ui-icons{
color: $white-color;
}
}
}
}
&.section-nucleo-icons .icons-container i:nth-child(6){
color: $white-color;
}
}

39
web/libs/sass/now-ui-kit/_social-buttons.scss Normal file
View file

@ -0,0 +1,39 @@
.btn-twitter{
color: $social-twitter;
&:hover,
&:focus,
&:active{
color: $social-twitter-state-color;
}
}
.btn-facebook{
color: $social-facebook;
&:hover,
&:focus,
&:active{
color: $social-facebook-state-color;
}
}
.btn-google{
color: $social-google;
&:hover,
&:focus,
&:active{
color: $social-google-state-color;
}
}
.btn-linkedin{
color: $social-linkedin;
&:hover,
&:focus,
&:active{
color: $social-linkedin-state-color;
}
}

110
web/libs/sass/now-ui-kit/_tabs.scss Normal file
View file

@ -0,0 +1,110 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.nav-tabs {
border: 0;
padding: $padding-large-vertical $padding-base-horizontal;
> .nav-item{
> .nav-link{
color: $default-color;
margin: 0;
margin-right: 5px;
background-color: $transparent-bg;
border: 1px solid $transparent-bg;
border-radius: 30px;
font-size: $font-size-base;
padding: $padding-btn-vertical $padding-round-horizontal;
line-height: $line-height-general;
&:hover {
background-color: $transparent-bg;
}
&.active{
border: 1px solid $default-color;
border-radius: 30px;
}
i.now-ui-icons{
font-size: 14px;
position: relative;
top: 1px;
margin-right: 3px;
}
}
&.disabled > .nav-link,
&.disabled > .nav-link:hover {
color: rgba(255,255,255,0.5);
}
}
&.nav-tabs-neutral{
> .nav-item{
> .nav-link{
color: $white-color;
&.active{
border-color: $opacity-5;
color: $white-color;
}
}
}
}
&.nav-tabs-primary{
> .nav-item{
> .nav-link{
&.active{
border-color: $primary-color;
color: $primary-color;
}
}
}
}
&.nav-tabs-info{
> .nav-item{
> .nav-link{
&.active{
border-color: $info-color;
color: $info-color;
}
}
}
}
&.nav-tabs-danger{
> .nav-item{
> .nav-link{
&.active{
border-color: $danger-color;
color: $danger-color;
}
}
}
}
&.nav-tabs-warning{
> .nav-item{
> .nav-link{
&.active{
border-color: $warning-color;
color: $warning-color;
}
}
}
}
&.nav-tabs-success{
> .nav-item{
> .nav-link{
&.active{
border-color: $success-color;
color: $success-color;
}
}
}
}
}

158
web/libs/sass/now-ui-kit/_typography.scss Normal file
View file

@ -0,0 +1,158 @@
button,
input,
optgroup,
select,
textarea{
font-family: $sans-serif-family;
}
h1,h2,h3,h4,h5,h6{
font-weight: $font-weight-normal;
}
small{
font-size: 60%;
}
a{
color: $primary-color;
&:hover,
&:focus{
color: $primary-color;
}
}
h1, .h1 {
font-size: $font-size-h1;
line-height: 1.15;
margin-bottom: $margin-base-vertical * 2;
small{
font-weight: $font-weight-bold;
text-transform: uppercase;
opacity: .8;
}
}
h2, .h2{
font-size: $font-size-h2;
margin-bottom: $margin-base-vertical * 2;
}
h3, .h3{
font-size: $font-size-h3;
margin-bottom: $margin-base-vertical * 2;
line-height: 1.4em;
}
h4, .h4{
font-size: $font-size-h4;
line-height: 1.45em;
margin-top: $margin-base-vertical * 2;
margin-bottom: $margin-base-vertical;
& + .category,
&.title + .category{
margin-top: -10px;
}
}
h5, .h5 {
font-size: $font-size-h5;
line-height: 1.4em;
margin-bottom: 15px;
}
h6, .h6{
font-size: $font-size-h6;
font-weight: $font-weight-bold;
text-transform: uppercase;
}
p{
line-height: 1.61em;
.description &,
&.description{
font-size: 1.14em;
}
}
.title{
font-weight: $font-weight-bold;
&.title-up{
text-transform: uppercase;
a{
color: $black-color;
text-decoration: none;
}
}
& + .category{
margin-top: -25px;
}
}
.description,
.card-description,
.footer-big p{
color: $dark-gray;
font-weight: $font-weight-light;
}
.category{
text-transform: uppercase;
font-weight: $font-weight-bold;
color: $dark-gray;
}
.text-primary {
color: $brand-primary !important;
}
.text-info {
color: $brand-info !important;
}
.text-success {
color: $brand-success !important;
}
.text-warning {
color: $brand-warning !important;
}
.text-danger {
color: $brand-danger !important;
}
.text-black{
color: $light-black;
}
.blockquote{
border-left: none;
border: 1px solid $default-color;
padding: 20px;
font-size: $font-size-blockquote;
line-height: 1.8;
small{
color: $default-color;
font-size: $font-size-small;
text-transform: uppercase;
}
&.blockquote-primary{
border-color: $primary-color;
color: $primary-color;
small{
color: $primary-color;
}
}
&.blockquote-danger{
border-color: $danger-color;
color: $danger-color;
small{
color: $danger-color;
}
}
&.blockquote-white{
border-color: $opacity-8;
color: $white-color;
small{
color: $opacity-8;
}
}
}

254
web/libs/sass/now-ui-kit/_variables.scss Normal file
View file

@ -0,0 +1,254 @@
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
$sans-serif-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
$none: 0 !default;
$border-thin: 1px !default;
$border-thick: 2px !default;
$white-color: #FFFFFF !default;
$white-bg: #FFFFFF !default;
$orange-bg: #e95e38 !default;
$smoke-bg: #F5F5F5 !default;
$light-black: #444 !default;
$black-bg: rgba(30,30,30,.97) !default;
$black-color: #2c2c2c !default;
$black-hr: #444444 !default;
$light-gray: #E3E3E3 !default;
$medium-gray: #DDDDDD !default;
$dark-gray: #9A9A9A !default;
$opacity-gray-3: rgba(222,222,222, .3) !default;
$opacity-gray-5: rgba(222,222,222, .5) !default;
$opacity-gray-8: rgba(222,222,222, .8) !default;
$opacity-5: rgba(255,255,255, .5) !default;
$opacity-8: rgba(255,255,255, .8) !default;
$datepicker-color-days: rgba(255,255,255, .8) !default;
$datepicker-color-old-new-days: rgba(255,255,255, .4) !default;
$opacity-1: rgba(255,255,255, .1) !default;
$opacity-2: rgba(255,255,255, .2) !default;
$transparent-bg: transparent !default;
$dark-background: #555555 !default;
$default-color: #888 !default;
$default-states-color: lighten($default-color, 6%) !default;
$default-color-opacity: rgba(182, 182, 182, .6) !default;
$primary-color: #f96332 !default;
$primary-states-color: lighten($primary-color, 6%) !default;
$primary-color-opacity: rgba(249, 99, 50, .3) !default;
$primary-color-alert: rgba(249, 99, 50, .8) !default;
$success-color: #18ce0f !default;
$success-states-color: lighten($success-color, 6%) !default;
$success-color-opacity: rgba(24, 206, 15, .3) !default;
$success-color-alert: rgba(24, 206, 15, .8) !default;
$info-color: #2CA8FF !default;
$info-states-color: lighten($info-color, 6%) !default;
$info-color-opacity: rgba(44, 168, 255, .3) !default;
$info-color-alert: rgba(44, 168, 255, .8) !default;
$warning-color: #FFB236 !default;
$warning-states-color: lighten($warning-color, 6%) !default;
$warning-color-opacity: rgba(255, 178, 54, .3) !default;
$warning-color-alert: rgba(255, 178, 54, .8) !default;
$danger-color: #FF3636 !default;
$danger-states-color: lighten($danger-color, 6%) !default;
$danger-color-opacity: rgba(255, 54, 54, .3) !default;
$danger-color-alert: rgba(255, 54, 54, .8) !default;
/* brand Colors */
$brand-primary: $primary-color !default;
$brand-info: $info-color !default;
$brand-success: $success-color !default;
$brand-warning: $warning-color !default;
$brand-danger: $danger-color !default;
$brand-inverse: $black-color !default;
$link-disabled-color: #666666 !default;
/* light colors */
$light-blue: rgba($primary-color, .2);
$light-azure: rgba($info-color, .2);
$light-green: rgba($success-color, .2);
$light-orange: rgba($warning-color, .2);
$light-red: rgba($danger-color, .2);
//== Components
//
$padding-input-vertical: 11px !default;
$padding-input-horizontal: 19px !default;
$padding-btn-vertical: 11px !default;
$padding-btn-horizontal: 22px !default;
$padding-base-vertical: .5rem !default;
$padding-base-horizontal: .7rem !default;
$padding-round-horizontal: 23px !default;
$padding-simple-vertical: 10px !default;
$padding-simple-horizontal: 17px !default;
$padding-large-vertical: 15px !default;
$padding-large-horizontal: 48px !default;
$padding-small-vertical: 5px !default;
$padding-small-horizontal: 15px !default;
// $padding-xs-vertical: 1px !default;
// $padding-xs-horizontal: 5px !default;
$padding-label-vertical: 2px !default;
$padding-label-horizontal: 12px !default;
$margin-large-vertical: 30px !default;
$margin-base-vertical: 15px !default;
$margin-base-horizontal: 15px !default;
$margin-bottom: 10px !default;
$border: 1px solid !default;
$border-radius-extra-small: 0.125rem !default;
$border-radius-small: 0.1875rem !default;
$border-radius-large: 0.25rem !default;
$border-radius-extreme: 0.875rem !default;
$border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default;
$border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default;
$btn-round-radius: 30px !default;
$height-base: 55px !default;
$btn-icon-size: 3.5rem !default;
$btn-icon-size-regular: 2.375rem !default;
$btn-icon-font-size-regular: 0.9375rem !default;
$btn-icon-font-size-small: 0.6875rem !default;
$btn-icon-size-small: 1.875rem !default;
$btn-icon-font-size-lg: 1.325rem !default;
$btn-icon-size-lg: 3.6rem !default;
$font-size-h1: 3.5em !default; // ~ 49px
$font-size-h2: 2.5em !default; // ~ 35px
$font-size-h3: 2em !default; // ~ 28px
$font-size-h4: 1.714em !default; // ~ 24px
$font-size-h5: 1.57em !default; // ~ 22px
$font-size-h6: 1em !default; // ~ 14px
$font-paragraph: 1em !default;
$font-size-navbar: 1em !default;
$font-size-mini: 0.7142em !default;
$font-size-small: 0.8571em !default;
$font-size-base: 14px !default;
$font-size-large: 1em !default;
$font-size-large-navbar: 20px !default;
$font-size-blockquote: 1.1em !default; // ~ 15px
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-semi: 600 !default;
$font-weight-bold: 700 !default;
$line-height-general: 1.5 !default;
$line-height-nav-link: 1.625rem !default;
$btn-icon-line-height: 2.4em !default;
$line-height: 1.35em !default;
$line-height-lg: 54px !default;
$border-radius-top: 10px 10px 0 0 !default;
$border-radius-bottom: 0 0 10px 10px !default;
$dropdown-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
$box-shadow-raised: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
$general-transition-time: 300ms !default;
$slow-transition-time: 370ms !default;
$dropdown-coordinates: 29px -50px !default;
$fast-transition-time: 150ms !default;
$select-coordinates: 50% -40px !default;
$transition-linear: linear !default;
$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default;
$transition-ease: ease 0s;
//$navbar-padding-a: 9px 13px;
$navbar-margin-a: 15px 0px;
$padding-social-a: 10px 5px;
$navbar-margin-a-btn: 15px 0px;
$navbar-margin-a-btn-round: 16px 0px;
$navbar-padding-a-icons: 6px 15px;
$navbar-margin-a-icons: 6px 3px;
$navbar-padding-base: 0.625rem;
//$navbar-margin-brand: 5px 0px;
$navbar-margin-brand-icons: 12px auto;
$navbar-margin-btn: 15px 3px;
$height-icon-sm: 32px;
$width-icon-sm: 32px;
$padding-icon-sm: 4px;
$border-radius-icon-sm: 7px;
$height-icon-message: 40px;
$width-icon-message: 40px;
$height-icon-message-sm: 20px;
$width-icon-message-sm: 20px;
$white-navbar: rgba(#FFFFFF, .96);
$primary-navbar: rgba(#34ACDC, .98);
$info-navbar: rgba(#5BCAFF, .98);
$success-navbar: rgba(#4CD964, .98);
$warning-navbar: rgba(#FF9500, .98);
$danger-navbar: rgba(#FF4C40, .98);
$topbar-x: topbar-x !default;
$topbar-back: topbar-back !default;
$bottombar-x: bottombar-x !default;
$bottombar-back: bottombar-back !default;
//Nucleo Icons
$nc-font-path: '../fonts' !default;
$nc-font-size-base: 14px !default;
$nc-css-prefix: now-ui !default;
$nc-background-color: #eee !default;
$nc-li-width: (30em / 14) !default;
$nc-padding-width: (1em/3) !default;
// Social icons color
$social-twitter: #55acee !default;
$social-twitter-state-color: darken(#55acee, 5%) !default;
$social-facebook: #3b5998 !default;
$social-facebook-state-color: darken(#3b5998, 5%) !default;
$social-google: #dd4b39 !default;
$social-google-state-color: darken(#dd4b39, 5%) !default;
$social-linkedin: #0077B5 !default;
$social-linkedin-state-color: darken(#0077B5, 5%) !default;

4
web/libs/sass/now-ui-kit/mixins/_badges.scss Normal file
View file

@ -0,0 +1,4 @@
@mixin badge-color($color) {
border-color: $color;
color: $color;
}

160
web/libs/sass/now-ui-kit/mixins/_buttons.scss Normal file
View file

@ -0,0 +1,160 @@
// Mixin for generating new styles
@mixin btn-styles($btn-color, $btn-states-color) {
background-color: $btn-color;
&:hover,
&:focus,
&:active,
&.active,
&:active:focus,
&:active:hover,
&.active:focus,
&.active:hover,
.show > &.dropdown-toggle,
.show > &.dropdown-toggle:focus,
.show > &.dropdown-toggle:hover {
background-color: $btn-states-color;
color: $white-color;
box-shadow: none;
}
&:hover{
box-shadow: 0 3px 8px 0 rgba(0,0,0, 0.17);
}
&.disabled,
&:disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
background-color: $btn-color;
border-color: $btn-color;
}
}
// btn-neutral style
@if $btn-color == $white-color{
color: $primary-color;
&.btn-danger{
color: $danger-color;
&:hover,
&:focus,
&:active{
color: $danger-states-color;
}
}
&.btn-info{
color: $info-color;
&:hover,
&:focus,
&:active{
color: $info-states-color;
}
}
&.btn-warning{
color: $warning-color;
&:hover,
&:focus,
&:active{
color: $warning-states-color;
}
}
&.btn-success{
color: $success-color;
&:hover,
&:focus,
&:active{
color: $success-states-color;
}
}
&.btn-default{
color: $default-color;
&:hover,
&:focus,
&:active{
color: $default-states-color;
}
}
&.active,
&:active,
&:active:focus,
&:active:hover,
&.active:focus,
&.active:hover,
.show > &.dropdown-toggle,
.show > &.dropdown-toggle:focus,
.show > &.dropdown-toggle:hover {
background-color: $white-color;
color: $primary-states-color;
box-shadow: none;
}
&:hover,
&:focus{
color: $primary-states-color;
&:not(.nav-link){
box-shadow: none;
}
}
} @else {
color: $white-color;
}
&.btn-simple{
color: $btn-color;
border-color: $btn-color;
&:hover,
&:focus,
&:active{
background-color: $transparent-bg;
color: $btn-states-color;
border-color: $btn-states-color;
box-shadow: none;
}
}
&.btn-link{
color: $btn-color;
&:hover,
&:focus,
&:active{
background-color: $transparent-bg;
color: $btn-states-color;
text-decoration: none;
box-shadow: none;
}
}
}
@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){
font-size: $font-size;
border-radius: $border;
padding: $padding-vertical $padding-horizontal;
&.btn-simple{
padding: $padding-vertical - 1 $padding-horizontal - 1;
}
}

121
web/libs/sass/now-ui-kit/mixins/_datepicker.scss Normal file
View file

@ -0,0 +1,121 @@
@mixin datepicker-colors($color) {
background-color: $color;
th,
.day div,
table tr td span{
color: $white-color;
}
&:after{
border-bottom-color: $color;
}
&.datepicker-orient-top:after{
border-top-color: $color;
}
.dow{
color: $datepicker-color-days;
}
table tr td.old div,
table tr td.new div,
table tr td span.old,
table tr td span.new{
color: $datepicker-color-old-new-days;
}
table tr td span:hover,
table tr td span.focused{
background:$opacity-1;
}
.datepicker-switch:hover,
.prev:hover,
.next:hover,
tfoot tr th:hover {
background: $opacity-2;
}
table tr td.active div,
table tr td.active:hover div,
table tr td.active.disabled div,
table tr td.active.disabled:hover div {
background-color: $white-color;
color: $color;
}
table tr td.day:hover div,
table tr td.day.focused div {
background: $opacity-2;
}
table tr td.active:hover div,
table tr td.active:hover:hover div,
table tr td.active.disabled:hover div,
table tr td.active.disabled:hover:hover div,
table tr td.active:active div,
table tr td.active:hover:active div,
table tr td.active.disabled:active div,
table tr td.active.disabled:hover:active div,
table tr td.active.active div,
table tr td.active:hover.active div,
table tr td.active.disabled.active div,
table tr td.active.disabled:hover.active div,
table tr td.active.disabled div,
table tr td.active:hover.disabled div,
table tr td.active.disabled.disabled div,
table tr td.active.disabled:hover.disabled div,
table tr td.active[disabled] div,
table tr td.active:hover[disabled] div,
table tr td.active.disabled[disabled] div,
table tr td.active.disabled:hover[disabled] div,
table tr td span.active:hover,
table tr td span.active:hover:hover,
table tr td span.active.disabled:hover,
table tr td span.active.disabled:hover:hover,
table tr td span.active:active,
table tr td span.active:hover:active,
table tr td span.active.disabled:active,
table tr td span.active.disabled:hover:active,
table tr td span.active.active,
table tr td span.active:hover.active,
table tr td span.active.disabled.active,
table tr td span.active.disabled:hover.active,
table tr td span.active.disabled,
table tr td span.active:hover.disabled,
table tr td span.active.disabled.disabled,
table tr td span.active.disabled:hover.disabled,
table tr td span.active[disabled],
table tr td span.active:hover[disabled],
table tr td span.active.disabled[disabled],
table tr td span.active.disabled:hover[disabled]{
background-color: $white-color;
}
table tr td span.active:hover,
table tr td span.active:hover:hover,
table tr td span.active.disabled:hover,
table tr td span.active.disabled:hover:hover,
table tr td span.active:active,
table tr td span.active:hover:active,
table tr td span.active.disabled:active,
table tr td span.active.disabled:hover:active,
table tr td span.active.active,
table tr td span.active:hover.active,
table tr td span.active.disabled.active,
table tr td span.active.disabled:hover.active,
table tr td span.active.disabled,
table tr td span.active:hover.disabled,
table tr td span.active.disabled.disabled,
table tr td span.active.disabled:hover.disabled,
table tr td span.active[disabled],
table tr td span.active:hover[disabled],
table tr td span.active.disabled[disabled],
table tr td span.active.disabled:hover[disabled]{
color: $color;
}
}

24
web/libs/sass/now-ui-kit/mixins/_dropdown.scss Normal file
View file

@ -0,0 +1,24 @@
@mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) {
background-color: $brand-color;
&:before{
color: $brand-color;
}
.dropdown-header:not([href]):not([tabindex]){
color: $dropdown-header-color;
}
.dropdown-item{
color: $dropdown-color;
&:hover,
&:focus{
background-color: $background-color;
}
}
.dropdown-divider{
background-color: $background-color;
}
}

205
web/libs/sass/now-ui-kit/mixins/_inputs.scss Normal file
View file

@ -0,0 +1,205 @@
@mixin input-size($padding-vertical, $padding-horizontal){
padding: $padding-vertical $padding-horizontal;
}
@mixin form-control-placeholder($color, $opacity){
.form-control::-moz-placeholder{
color: $color;
@include opacity(1);
}
.form-control:-moz-placeholder{
color: $color;
@include opacity(1);
}
.form-control::-webkit-input-placeholder{
color: $color;
@include opacity(1);
}
.form-control:-ms-input-placeholder{
color: $color;
@include opacity(1);
}
}
@mixin light-form(){
border-radius: 0;
border:0;
padding: 0;
background-color: transparent;
}
@mixin input-lg-padding($padding-vertical, $padding-horizontal) {
.form-group.form-group-no-border.input-lg,
.input-group.form-group-no-border.input-lg{
.input-group-addon{
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
}
.form-control{
padding: $padding-vertical $padding-horizontal;
& + .input-group-addon{
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
}
}
}
.form-group.input-lg,
.input-group.input-lg{
.form-control{
padding: $padding-vertical - 1 $padding-horizontal - 1;
& + .input-group-addon{
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
}
}
.input-group-addon{
padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1;
& + .form-control{
padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3;
}
}
}
}
@mixin input-base-padding($padding-vertical, $padding-horizontal) {
.form-group.form-group-no-border,
.input-group.form-group-no-border{
.form-control{
padding: $padding-vertical $padding-horizontal;
& + .input-group-addon{
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
}
}
.input-group-addon{
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
}
}
.form-group,
.input-group{
.form-control{
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1;
& + .input-group-addon{
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
}
}
.input-group-addon{
padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1;
& + .form-control,
& ~ .form-control{
padding:$padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3;
}
}
}
}
//color1 = $opacity-5
//color2 = $opacity-8
//color3 = $white-color
//color4 = $transparent-bg
//color5 = $opacity-1
//color6 = $opacity-2
@mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) {
@include form-control-placeholder(darken($color2, 8%), 1);
.form-control{
border-color: $color1;
color: $color2;
&:focus{
border-color: $color3;
background-color: $color4;
color: $color3;
}
}
.has-success,
.has-danger{
&:after{
color: $color3;
}
}
.has-danger{
.form-control{
background-color: $color4;
}
}
.input-group-addon{
background-color: $color4;
border-color: $color1;
color: $color2;
}
.input-group-focus{
.input-group-addon{
background-color: $color4;
border-color: $color3;
color: $color3;
}
}
.form-group.form-group-no-border,
.input-group.form-group-no-border{
.form-control{
background-color: $color5;
color: $color2;
&:focus,
&:active,
&:active{
background-color: $color6;
color: $color3;
}
}
.form-control + .input-group-addon{
background-color: $color5;
&:focus,
&:active,
&:active{
background-color: $color6;
color: $color3;
}
}
.form-control{
&:focus{
& + .input-group-addon{
background-color: $color6;
color: $color3;
}
}
}
.input-group-addon{
background-color: $color5;
border: none;
color: $color2;
}
&.input-group-focus{
.input-group-addon{
background-color: $color6;
color: $color3;
}
}
}
}

12
web/libs/sass/now-ui-kit/mixins/_modals.scss Normal file
View file

@ -0,0 +1,12 @@
@mixin modal-colors($bg-color, $color) {
.modal-content{
background-color: $bg-color;
color: $color;
}
.modal-header .close{
color: $color;
}
}

226
web/libs/sass/now-ui-kit/mixins/_navbar.scss Normal file
View file

@ -0,0 +1,226 @@
@mixin navbar-responsive() {
.navbar{
.navbar-nav{
margin-top: 53px;
.nav-link{
padding-top: 0.75rem;
padding-bottom: .75rem;
}
&.navbar-logo{
top: 0;
height: 53px;
}
}
.dropdown.show .dropdown-menu,
.dropdown .dropdown-menu{
background-color: transparent;
border: 0;
transition: none;
-webkit-box-shadow: none;
box-shadow: none;
width: auto;
margin: 0 1rem;
margin-bottom: 15px;
padding-top: 0;
height: 150px;
overflow-y: scroll;
&:before{
display: none;
}
}
.dropdown{
.dropdown-item{
padding-left: 2.5rem;
}
.dropdown-menu{
display: none;
}
&.show .dropdown-menu{
display: block;
}
}
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover{
color: $white-color;
}
.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 transform-translate-x(0px);
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
}
.navbar-toggler-bar{
display: block;
position: relative;
width: 22px;
height: 1px;
border-radius: 1px;
background: $white-bg;
& + .navbar-toggler-bar{
margin-top: 7px;
}
&.bar2{
width: 17px;
transition: width .2s linear;
}
}
&.bg-white:not(.navbar-transparent) .navbar-toggler-bar{
background: $default-color;
}
& .toggled .navbar-toggler-bar{
width: 24px;
& + .navbar-toggler-bar{
margin-top: 5px;
}
}
}
.bar1,
.bar2,
.bar3 {
outline: 1px solid transparent;
}
.bar1 {
top: 0px;
@include bar-animation($topbar-back);
}
.bar2 {
opacity: 1;
}
.bar3 {
bottom: 0px;
@include bar-animation($bottombar-back);
}
.toggled .bar1 {
top: 6px;
@include bar-animation($topbar-x);
}
.toggled .bar2 {
opacity: 0;
}
.toggled .bar3 {
bottom: 6px;
@include bar-animation($bottombar-x);
}
@include topbar-x-rotation();
@include topbar-back-rotation();
@include bottombar-x-rotation();
@include bottombar-back-rotation();
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
}
@mixin navbar-collapse() {
.navbar-collapse{
position: fixed;
display: block;
top: 0;
height: 100% !important;
width: 300px;
right: 0;
z-index: 1032;
visibility: visible;
background-color: #999;
overflow-y: visible;
border-top: none;
text-align: left;
max-height: none !important;
@include transform-translate-x(300px);
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
&:before{
background: $brand-primary; /* For browsers that do not support gradients */
background: -webkit-linear-gradient($brand-primary 0%, #000 80%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient($brand-primary 0%, #000 80%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient($brand-primary 0%, #000 80%); /* For Firefox 3.6 to 15 */
background: linear-gradient($brand-primary 0%, #000 80%); /* Standard syntax (must be last) */
@include opacity(.76);
display: block;
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.navbar-nav:not(.navbar-logo){
.nav-link {
margin: 0 1rem;
margin-top: 0.3125rem;
&:not(.btn){
color: $white-color;
}
}
}
.dropdown-menu .dropdown-item{
color: $white-color;
}
}
@include navbar-responsive();
[class*="navbar-expand-"] .navbar-collapse{
width: 300px;
}
.wrapper{
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
}
#bodyClick{
height: 100%;
width: 100%;
position: fixed;
opacity: 1;
top: 0;
left: auto;
right: 300px;
content: "";
z-index: 9999;
overflow-x: hidden;
background-color: transparent;
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
}
}

7
web/libs/sass/now-ui-kit/mixins/_pages.scss Normal file
View file

@ -0,0 +1,7 @@
@mixin linear-gradient($color1, $color2){
background: $color1; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */
background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */
}

29
web/libs/sass/now-ui-kit/mixins/_popovers.scss Normal file
View file

@ -0,0 +1,29 @@
@mixin popover-color($color, $text-color) {
background-color: $color;
.popover-body{
color: $text-color;
}
&.bs-popover-right .arrow:after{
border-right-color:$color;
}
&.bs-popover-top .arrow:after{
border-top-color:$color;
}
&.bs-popover-bottom .arrow:after{
border-bottom-color:$color;
}
&.bs-popover-left .arrow:after{
border-left-color:$color;
}
.popover-header{
color: $text-color;
opacity: .6;
}
}

8
web/libs/sass/now-ui-kit/mixins/_transparency.scss Normal file
View file

@ -0,0 +1,8 @@
// Opacity
@mixin opacity($opacity) {
opacity: $opacity;
// IE8 filter
$opacity-ie: ($opacity * 100);
filter: #{alpha(opacity=$opacity-ie)};
}

160
web/libs/sass/now-ui-kit/mixins/_vendor-prefixes.scss Normal file
View file

@ -0,0 +1,160 @@
@mixin box-shadow($shadow...) {
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
box-shadow: $shadow;
}
@mixin transition-input-focus-color() {
-webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
@mixin transition($time, $type){
-webkit-transition: all $time $type;
-moz-transition: all $time $type;
-o-transition: all $time $type;
-ms-transition: all $time $type;
transition: all $time $type;
}
@mixin rotate-180(){
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
@mixin transform-translate-x($value){
-webkit-transform: translate3d($value, 0, 0);
-moz-transform: translate3d($value, 0, 0);
-o-transform: translate3d($value, 0, 0);
-ms-transform: translate3d($value, 0, 0);
transform: translate3d($value, 0, 0);
}
@mixin transform-translate-y($value){
-webkit-transform: translate3d(0,$value,0);
-moz-transform: translate3d(0,$value,0);
-o-transform: translate3d(0,$value,0);
-ms-transform: translate3d(0,$value,0);
transform: translate3d(0,$value,0);
}
@mixin bar-animation($type){
-webkit-animation: $type 500ms linear 0s;
-moz-animation: $type 500ms linear 0s;
animation: $type 500ms 0s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@mixin topbar-x-rotation(){
@keyframes topbar-x {
0% {top: 0px; transform: rotate(0deg); }
45% {top: 6px; transform: rotate(145deg); }
75% {transform: rotate(130deg); }
100% {transform: rotate(135deg); }
}
@-webkit-keyframes topbar-x {
0% {top: 0px; -webkit-transform: rotate(0deg); }
45% {top: 6px; -webkit-transform: rotate(145deg); }
75% {-webkit-transform: rotate(130deg); }
100% { -webkit-transform: rotate(135deg); }
}
@-moz-keyframes topbar-x {
0% {top: 0px; -moz-transform: rotate(0deg); }
45% {top: 6px; -moz-transform: rotate(145deg); }
75% {-moz-transform: rotate(130deg); }
100% { -moz-transform: rotate(135deg); }
}
}
@mixin topbar-back-rotation(){
@keyframes topbar-back {
0% { top: 6px; transform: rotate(135deg); }
45% { transform: rotate(-10deg); }
75% { transform: rotate(5deg); }
100% { top: 0px; transform: rotate(0); }
}
@-webkit-keyframes topbar-back {
0% { top: 6px; -webkit-transform: rotate(135deg); }
45% { -webkit-transform: rotate(-10deg); }
75% { -webkit-transform: rotate(5deg); }
100% { top: 0px; -webkit-transform: rotate(0); }
}
@-moz-keyframes topbar-back {
0% { top: 6px; -moz-transform: rotate(135deg); }
45% { -moz-transform: rotate(-10deg); }
75% { -moz-transform: rotate(5deg); }
100% { top: 0px; -moz-transform: rotate(0); }
}
}
@mixin bottombar-x-rotation(){
@keyframes bottombar-x {
0% {bottom: 0px; transform: rotate(0deg);}
45% {bottom: 6px; transform: rotate(-145deg);}
75% {transform: rotate(-130deg);}
100% {transform: rotate(-135deg);}
}
@-webkit-keyframes bottombar-x {
0% {bottom: 0px; -webkit-transform: rotate(0deg);}
45% {bottom: 6px; -webkit-transform: rotate(-145deg);}
75% {-webkit-transform: rotate(-130deg);}
100% {-webkit-transform: rotate(-135deg);}
}
@-moz-keyframes bottombar-x {
0% {bottom: 0px; -moz-transform: rotate(0deg);}
45% {bottom: 6px; -moz-transform: rotate(-145deg);}
75% {-moz-transform: rotate(-130deg);}
100% {-moz-transform: rotate(-135deg);}
}
}
@mixin bottombar-back-rotation{
@keyframes bottombar-back {
0% { bottom: 6px;transform: rotate(-135deg);}
45% { transform: rotate(10deg);}
75% { transform: rotate(-5deg);}
100% { bottom: 0px;transform: rotate(0);}
}
@-webkit-keyframes bottombar-back {
0% {bottom: 6px;-webkit-transform: rotate(-135deg);}
45% {-webkit-transform: rotate(10deg);}
75% {-webkit-transform: rotate(-5deg);}
100% {bottom: 0px;-webkit-transform: rotate(0);}
}
@-moz-keyframes bottombar-back {
0% {bottom: 6px;-moz-transform: rotate(-135deg);}
45% {-moz-transform: rotate(10deg);}
75% {-moz-transform: rotate(-5deg);}
100% {bottom: 0px;-moz-transform: rotate(0);}
}
}
@mixin nc-rotate($degrees, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
-webkit-transform: rotate($degrees);
-moz-transform: rotate($degrees);
-ms-transform: rotate($degrees);
-o-transform: rotate($degrees);
transform: rotate($degrees);
}
@mixin nc-flip($horiz, $vert, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
-webkit-transform: scale($horiz, $vert);
-moz-transform: scale($horiz, $vert);
-ms-transform: scale($horiz, $vert);
-o-transform: scale($horiz, $vert);
transform: scale($horiz, $vert);
}

304
web/libs/sass/now-ui-kit/plugins/_plugin-bootstrap-switch.scss Normal file
View file

@ -0,0 +1,304 @@
/* ========================================================================
* bootstrap-switch - v3.3.2
* http://www.bootstrap-switch.org
* ========================================================================
* Copyright 2012-2013 Mattia Larentis
* http://www.apache.org/licenses/LICENSE-2.0
*/
//* IMPORTANT! Creative Tim Notice: this file has major changes to fit the NOW UI Kit's design. If you want to use the plugin as it was before our changes, please get the old files from http://www.bootstrap-switch.org
.bootstrap-switch {
display: inline-block;
direction: ltr;
cursor: pointer;
border-radius: 30px;
border: 0;
position: relative;
text-align: left;
margin-bottom: 10px;
line-height: 8px;
width: 59px !important;
height: 22px;
outline: none;
z-index: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
margin-right: 20px;
background: rgba($black-color, .2);
}
.bootstrap-switch .bootstrap-switch-container {
display: inline-flex;
top: 0;
height: 22px;
border-radius: 4px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 100px !important;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
display: inline-block !important;
height: 100%;
color: #fff;
padding: 6px 12px;
font-size: 11px;
text-indent: -5px;
line-height: 15px;
-webkit-transition: 0.25s ease-out;
transition: 0.25s ease-out;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
text-align: center;
z-index: 1;
float: left;
line-height: 11px;
width: 50% !important;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-brown,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-brown {
color: #fff;
background: $brand-primary;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-blue,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-blue {
color: #fff;
background: $brand-info;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-green,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-green {
color: #fff;
background: $brand-success;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-orange,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-orange {
background: $brand-warning;
color: #fff;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-red,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-red {
color: #fff;
background: $brand-danger;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
color: #fff;
}
.bootstrap-switch .bootstrap-switch-label {
text-align: center;
z-index: 100;
color: #333333;
background: #ffffff;
width: 22px !important;
height: 22px !important;
margin: 0px -11px;
border-radius: 20px;
position: absolute;
float: left;
top: 0;
left: 50%;
padding: 0;
box-shadow: 0 1px 11px rgba(0, 0, 0, 0.25);
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label{
background-color: rgba(23, 23, 23, .4);
}
.bootstrap-switch.bootstrap-switch-on:hover .bootstrap-switch-label{
width: 27px !important;
margin-left: -16px;
}
.bootstrap-switch.bootstrap-switch-off:hover .bootstrap-switch-label{
width: 27px !important;
margin-left: -11px;
}
.bootstrap-switch .bootstrap-switch-handle-on {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.bootstrap-switch .bootstrap-switch-handle-off {
text-indent: 6px;
}
.bootstrap-switch input[type='radio'],
.bootstrap-switch input[type='checkbox'] {
position: absolute !important;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
z-index: -1;
}
.bootstrap-switch input[type='radio'].form-control,
.bootstrap-switch input[type='checkbox'].form-control {
height: auto;
}
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
}
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
padding: 6px 16px;
font-size: 18px;
line-height: 1.33;
}
.bootstrap-switch.bootstrap-switch-disabled,
.bootstrap-switch.bootstrap-switch-readonly,
.bootstrap-switch.bootstrap-switch-indeterminate {
cursor: default !important;
}
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default !important;
}
.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
-webkit-transition: margin-left 0.5s;
transition: margin-left 0.5s;
}
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.bootstrap-switch.bootstrap-switch-focused {
// border-color: #66afe9;
// outline: 0;
// -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
// box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
// .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
// .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
// border-bottom-right-radius: 3px;
// border-top-right-radius: 3px;
// }
// .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
// .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
// border-bottom-left-radius: 3px;
// border-top-left-radius: 3px;
// }
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container{
margin-left: -2px !important;
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container{
margin-left: -39px !important;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label{
&:before{
background-color: #FFFFFF;
}
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-red ~ .bootstrap-switch-default{
background-color: $brand-danger;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-orange ~ .bootstrap-switch-default{
background-color: $brand-warning;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-green ~ .bootstrap-switch-default{
background-color: $brand-success;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-brown ~ .bootstrap-switch-default{
background-color: $brand-primary;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-blue ~ .bootstrap-switch-default{
background-color: $brand-info;
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-red,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-brown,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-blue,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-orange,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-green{
background-color: $light-gray;
}
.bootstrap-switch-off .bootstrap-switch-handle-on{
opacity: 0;
}
.bootstrap-switch-on .bootstrap-switch-handle-off{
opacity: 0;
}

520
web/libs/sass/now-ui-kit/plugins/_plugin-datepicker.scss Normal file
View file

@ -0,0 +1,520 @@
/*!
* Datepicker for Bootstrap v1.7.0-dev (https://github.com/uxsolutions/bootstrap-datepicker)
*
* Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
*/
.datepicker {
padding: 8px 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
direction: ltr;
@include transform-translate-y(-40px);
transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
@include opacity(0);
visibility: hidden;
display: block;
width: 254px;
max-width: 254px;
&.dropdown-menu:before{
display: none;
}
&.datepicker-primary{
@include datepicker-colors($primary-color);
}
}
.datepicker-inline {
width: 220px;
}
.datepicker.datepicker-rtl {
direction: rtl;
}
.datepicker.datepicker-rtl.dropdown-menu {
left: auto;
}
.datepicker.datepicker-rtl table tr td span {
float: right;
}
.datepicker-dropdown {
top: 0;
left: 0;
}
.datepicker-dropdown:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid transparent;
border-top: 0;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
}
.datepicker-dropdown:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-top: 0;
position: absolute;
}
.datepicker-dropdown.datepicker-orient-left:before {
left: 6px;
}
.datepicker-dropdown.datepicker-orient-left:after {
left: 7px;
}
.datepicker-dropdown.datepicker-orient-right:before {
right: 6px;
}
.datepicker-dropdown.datepicker-orient-right:after {
right: 7px;
}
.datepicker-dropdown.datepicker-orient-bottom:before {
top: -7px;
}
.datepicker-dropdown.datepicker-orient-bottom:after {
top: -6px;
}
.datepicker-dropdown.datepicker-orient-top:before {
bottom: -7px;
border-bottom: 0;
border-top: 7px solid transparent;
}
.datepicker-dropdown.datepicker-orient-top:after {
bottom: -6px;
border-bottom: 0;
border-top: 6px solid #fff;
}
.datepicker table {
margin: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 241px;
max-width: 241px;
}
.datepicker .day div,
.datepicker th {
@include transition($general-transition-time, $transition-ease);
text-align: center;
width: 30px;
height: 30px;
line-height: 2.2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 50%;
font-weight: $font-weight-light;
font-size: $font-size-base;
border: none;
position: relative;
cursor: pointer;
}
.datepicker th{
color: $primary-color;
}
.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > thead > tr > th{
padding: 2px;
text-align: center;
cursor: pointer;
}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
background-color: transparent;
}
.datepicker table tr td.day:hover div,
.datepicker table tr td.day.focused div {
background: #eee;
cursor: pointer;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
color: $default-color;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
background: none;
color: $default-color ;
cursor: default;
}
.datepicker table tr td.highlighted {
background: #d9edf7;
border-radius: 0;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
background-color: #fde19a;
background-image: -moz-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: -ms-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
background-image: -webkit-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: -o-linear-gradient(to bottom, #fdd49a, #fdf59a);
background-image: linear-gradient(to bottom, #fdd49a, #fdf59a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
border-color: #fdf59a #fdf59a #fbed50;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #000;
}
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
background-color: #fdf59a;
}
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active {
background-color: #fbf069 \9;
}
.datepicker table tr td.today:hover:hover {
color: #000;
}
.datepicker table tr td.today.active:hover {
color: #fff;
}
.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
background: #eee;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover {
background-color: #f3d17a;
background-image: -moz-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: -ms-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
background-image: -webkit-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: -o-linear-gradient(to bottom, #f3c17a, #f3e97a);
background-image: linear-gradient(to bottom, #f3c17a, #f3e97a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
border-color: #f3e97a #f3e97a #edde34;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today:hover:hover,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today.disabled:hover:hover,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today:hover.disabled,
.datepicker table tr td.range.today.disabled.disabled,
.datepicker table tr td.range.today.disabled:hover.disabled,
.datepicker table tr td.range.today[disabled],
.datepicker table tr td.range.today:hover[disabled],
.datepicker table tr td.range.today.disabled[disabled],
.datepicker table tr td.range.today.disabled:hover[disabled] {
background-color: #f3e97a;
}
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active {
background-color: #efe24b \9;
}
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
background-color: #9e9e9e;
background-image: -moz-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: -ms-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
background-image: -webkit-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: -o-linear-gradient(to bottom, #b3b3b3, #808080);
background-image: linear-gradient(to bottom, #b3b3b3, #808080);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
border-color: #808080 #808080 #595959;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:hover:hover,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected:hover.disabled,
.datepicker table tr td.selected.disabled.disabled,
.datepicker table tr td.selected.disabled:hover.disabled,
.datepicker table tr td.selected[disabled],
.datepicker table tr td.selected:hover[disabled],
.datepicker table tr td.selected.disabled[disabled],
.datepicker table tr td.selected.disabled:hover[disabled] {
background-color: #808080;
}
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active {
background-color: #666666 \9;
}
.datepicker table tr td.active div,
.datepicker table tr td.active:hover div,
.datepicker table tr td.active.disabled div,
.datepicker table tr td.active.disabled:hover div {
background-color: $primary-color;
color: $white-color;
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
}
.datepicker table tr td.active:hover div,
.datepicker table tr td.active:hover:hover div,
.datepicker table tr td.active.disabled:hover div,
.datepicker table tr td.active.disabled:hover:hover div,
.datepicker table tr td.active:active div,
.datepicker table tr td.active:hover:active div,
.datepicker table tr td.active.disabled:active div,
.datepicker table tr td.active.disabled:hover:active div,
.datepicker table tr td.active.active div,
.datepicker table tr td.active:hover.active div,
.datepicker table tr td.active.disabled.active div,
.datepicker table tr td.active.disabled:hover.active div,
.datepicker table tr td.active.disabled div,
.datepicker table tr td.active:hover.disabled div,
.datepicker table tr td.active.disabled.disabled div,
.datepicker table tr td.active.disabled:hover.disabled div,
.datepicker table tr td.active[disabled] div,
.datepicker table tr td.active:hover[disabled] div,
.datepicker table tr td.active.disabled[disabled] div,
.datepicker table tr td.active.disabled:hover[disabled] div{
background-color: $primary-color;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker table tr td span {
display: block;
width: 41px;
height: 41px;
line-height: 41px;
float: left;
margin: 1%;
font-size: $font-size-base;
cursor: pointer;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
background: #eee;
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
background: none;
color: $default-color;
cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
color: #fff;
background-color: $primary-color;
}
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled] {
background-color: $primary-color;
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
}
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
color: $default-color;
}
.datepicker .datepicker-switch {
width: auto;
border-radius: $border-radius-small;
}
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
cursor: pointer;
}
.datepicker{
.prev,
.next{
width: 35px;
height: 35px;
}
i{
position: relative;
top: 2px;
}
.prev i{
left: -1px;
}
.next i{
right: -1px;
}
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
background: #eee;
}
.datepicker .prev.disabled,
.datepicker .next.disabled {
visibility: hidden;
}
.datepicker .cw {
font-size: 10px;
width: 12px;
padding: 0 2px 0 5px;
vertical-align: middle;
}
.input-append.date .add-on,
.input-prepend.date .add-on {
cursor: pointer;
}
.input-append.date .add-on i,
.input-prepend.date .add-on i {
margin-top: 3px;
}
.input-daterange input {
text-align: center;
}
.input-daterange input:first-child {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.input-daterange input:last-child {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.input-daterange .add-on {
display: inline-block;
width: auto;
min-width: 16px;
height: 18px;
padding: 4px 5px;
font-weight: normal;
line-height: 18px;
text-align: center;
text-shadow: 0 1px 0 #fff;
vertical-align: middle;
background-color: #eee;
border: 1px solid #ccc;
margin-left: -5px;
margin-right: -5px;
}

351
web/libs/sass/now-ui-kit/plugins/_plugin-nouislider.scss Normal file
View file

@ -0,0 +1,351 @@
/*! nouislider - 9.1.0 - 2016-12-10 16:00:32 */
/* Functional styling;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
*/
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-target {
position: relative;
direction: ltr;
}
.noUi-base {
width: 100%;
height: 100%;
position: relative;
z-index: 1; /* Fix 401 */
}
.noUi-connect {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
}
.noUi-origin {
position: absolute;
height: 0;
width: 0;
}
.noUi-handle {
position: relative;
z-index: 1;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
-webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
.noUi-state-drag * {
cursor: inherit !important;
}
/* Painting and performance;
* Browsers can paint handles in their own layer.
*/
.noUi-base,
.noUi-handle {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* Slider size and handle placement;
*/
.noUi-horizontal {
height: 1px;
}
.noUi-horizontal .noUi-handle {
border-radius: 50%;
background-color: $white-color;
box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2);
height:15px;
width:15px;
cursor:pointer;
margin-left: -10px;
margin-top: -7px;
}
.noUi-vertical {
width: 18px;
}
.noUi-vertical .noUi-handle {
width: 28px;
height: 34px;
left: -6px;
top: -17px;
}
/* Styling;
*/
.noUi-target {
background-color: rgba(182, 182, 182, .3);
border-radius: 3px;
}
.noUi-connect {
background: $default-color;
border-radius: 3px;
-webkit-transition: background 450ms;
transition: background 450ms;
}
/* Handles and cursors;
*/
.noUi-draggable {
cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
cursor: ns-resize;
}
.noUi-handle {
// border: 1px solid #D9D9D9;
border-radius: 3px;
background: #FFF;
cursor: default;
box-shadow: inset 0 0 1px #FFF,
inset 0 1px 7px #EBEBEB,
0 3px 6px -3px #BBB;
-webkit-transition: $general-transition-time $transition-ease;
-moz-transition: $general-transition-time $transition-ease;
-ms-transition: $general-transition-time $transition-ease;
-o-transform: $general-transition-time $transition-ease;
transition: $general-transition-time $transition-ease;
}
.noUi-active {
-webkit-transform: scale3d(1.5,1.5,1);
-moz-transform: scale3d(1.5,1.5,1);
-ms-transform: scale3d(1.5,1.5,1);
-o-transform: scale3d(1.5,1.5,1);
transform: scale3d(1.5,1.5,1);
}
/* Disabled state;
*/
[disabled] .noUi-connect {
background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
cursor: not-allowed;
}
/* Base;
*
*/
.noUi-pips,
.noUi-pips * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-pips {
position: absolute;
color: #999;
}
/* Values;
*
*/
.noUi-value {
position: absolute;
text-align: center;
}
.noUi-value-sub {
color: #ccc;
font-size: 10px;
}
/* Markings;
*
*/
.noUi-marker {
position: absolute;
background: #CCC;
}
.noUi-marker-sub {
background: #AAA;
}
.noUi-marker-large {
background: #AAA;
}
/* Horizontal layout;
*
*/
.noUi-pips-horizontal {
padding: 10px 0;
height: 80px;
top: 100%;
left: 0;
width: 100%;
}
.noUi-value-horizontal {
-webkit-transform: translate3d(-50%,50%,0);
transform: translate3d(-50%,50%,0);
}
.noUi-marker-horizontal.noUi-marker {
margin-left: -1px;
width: 2px;
height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
height: 15px;
}
/* Vertical layout;
*
*/
.noUi-pips-vertical {
padding: 0 10px;
height: 100%;
top: 0;
left: 100%;
}
.noUi-value-vertical {
-webkit-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
padding-left: 25px;
}
.noUi-marker-vertical.noUi-marker {
width: 5px;
height: 2px;
margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
width: 15px;
}
.noUi-tooltip {
display: block;
position: absolute;
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #fff;
color: #000;
padding: 5px;
text-align: center;
}
.noUi-horizontal .noUi-tooltip {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
left: 50%;
bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
top: 50%;
right: 120%;
}
.slider {
&.slider-neutral{
& .noUi-connect,
&.noUi-connect{
background-color: $white-color;
}
&.noUi-target{
background-color: rgba(255,255,255, .3);
}
& .noUi-handle{
background-color: $white-color;
}
}
&.slider-primary{
& .noUi-connect,
&.noUi-connect{
background-color: $primary-color;
}
&.noUi-target{
background-color: $primary-color-opacity;
}
& .noUi-handle{
background-color: $brand-primary;
}
}
&.slider-info{
& .noUi-connect,
&.noUi-connect{
background-color: $brand-info;
}
&.noUi-target{
background-color: $info-color-opacity;
}
& .noUi-handle{
background-color: $brand-info;
}
}
&.slider-success{
& .noUi-connect,
&.noUi-connect{
background-color: $brand-success;
}
&.noUi-target{
background-color: $success-color-opacity;
}
& .noUi-handle{
background-color: $brand-success;
}
}
&.slider-warning{
& .noUi-connect,
&.noUi-connect{
background-color: $brand-warning;
}
&.noUi-target{
background-color: $warning-color-opacity;
}
& .noUi-handle{
background-color: $brand-warning;
}
}
&.slider-danger{
& .noUi-connect,
&.noUi-connect{
background-color: $brand-danger;
}
&.noUi-target{
background-color: $danger-color-opacity;
}
& .noUi-handle{
background-color: $brand-danger;
}
}
}