CSS Libraries and style updates (#388)
* Update now-ui frontend lib to latest instead of the beta * Update to bootstrap 4 lib * Fix flights and profile pages
This commit is contained in:
Nabeel S
26
resources/sass/now-ui/now-ui-kit.scss
Normal file → Executable file
26
resources/sass/now-ui/now-ui-kit.scss
Normal file → Executable file
@@ -1,12 +1,11 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Now-ui-kit - v1.0.0
|
||||
* Now UI Kit - v1.3.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: http://www.creative-tim.com/product/now-ui-kit
|
||||
* Copyright 2017 Creative Tim (http://www.creative-tim.com)
|
||||
* Licensed under MIT (https://github.com/creativetimofficial/now-ui-kit/blob/master/LICENSE.md)
|
||||
* Product Page: https://www.creative-tim.com/product/now-ui-kit
|
||||
* Copyright 2019 Creative Tim (http://www.creative-tim.com)
|
||||
|
||||
* Designed by www.invisionapp.com Coded by www.creative-tim.com
|
||||
|
||||
@@ -31,29 +30,32 @@
|
||||
@import "now-ui-kit/progress";
|
||||
@import "now-ui-kit/badges";
|
||||
@import "now-ui-kit/pagination";
|
||||
@import "now-ui-kit/tables";
|
||||
@import "now-ui-kit/typography";
|
||||
@import "now-ui-kit/misc";
|
||||
@import "now-ui-kit/pills";
|
||||
|
||||
// components
|
||||
@import "now-ui-kit/social-buttons";
|
||||
@import "now-ui-kit/nucleo-outline";
|
||||
|
||||
@import "now-ui-kit/tabs";
|
||||
@import "now-ui-kit/navbar";
|
||||
@import "now-ui-kit/dropdown";
|
||||
@import "now-ui-kit/alerts";
|
||||
@import "now-ui-kit/images";
|
||||
@import "now-ui-kit/popups";
|
||||
@import "now-ui-kit/nucleo-outline";
|
||||
@import "now-ui-kit/modals";
|
||||
@import "now-ui-kit/carousel";
|
||||
@import "now-ui-kit/cards";
|
||||
@import "now-ui-kit/footers";
|
||||
@import "now-ui-kit/form-container";
|
||||
@import "now-ui-kit/phpvms";
|
||||
|
||||
// Cards
|
||||
@import "now-ui-kit/cards";
|
||||
@import "now-ui-kit/cards/card-plain";
|
||||
@import "now-ui-kit/cards/card-signup";
|
||||
|
||||
// example pages and sections
|
||||
@import "now-ui-kit/example-pages";
|
||||
@import "now-ui-kit/sections";
|
||||
@import "now-ui-kit/demo";
|
||||
//@import "now-ui-kit/example-pages";
|
||||
//@import "now-ui-kit/sections";
|
||||
|
||||
|
||||
@import "now-ui-kit/responsive";
|
||||
|
||||
@@ -6,6 +6,11 @@
|
||||
padding-top: .9rem;
|
||||
padding-bottom: .9rem;
|
||||
|
||||
.alert-link{
|
||||
color: $white-color;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
&.alert-success{
|
||||
background-color: $success-color-alert;
|
||||
}
|
||||
@@ -49,5 +54,8 @@
|
||||
text-shadow: none;
|
||||
line-height: 0;
|
||||
outline: 0;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,14 @@
|
||||
background-color: $transparent-bg;
|
||||
border: $border;
|
||||
margin-bottom: 5px;
|
||||
color: $white-color;
|
||||
border-radius: $border-radius-extreme;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
}
|
||||
.badge-icon{
|
||||
padding: 0.4em 0.55em;
|
||||
@@ -36,4 +43,5 @@
|
||||
}
|
||||
.badge-neutral{
|
||||
@include badge-color($white-color);
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
.btn{
|
||||
.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: 10px 1px;
|
||||
border: none;
|
||||
border-radius: $border-radius-small;
|
||||
padding: $padding-btn-vertical $padding-btn-horizontal;
|
||||
@@ -24,53 +26,51 @@
|
||||
|
||||
&.btn-icon {
|
||||
// see above for color variations
|
||||
border-radius: 50%;
|
||||
font-size: $btn-icon-font-size;
|
||||
height: $btn-icon-size;
|
||||
margin: auto;
|
||||
min-width: $btn-icon-size;
|
||||
width: $btn-icon-size;
|
||||
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{
|
||||
&[class*="btn-outline-"]{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
i.fa,
|
||||
&.btn-sm{
|
||||
height: $btn-icon-size-small;
|
||||
min-width: $btn-icon-size-small;
|
||||
width: $btn-icon-size-small;
|
||||
|
||||
i.fab,
|
||||
i.now-ui-icons{
|
||||
line-height: $btn-icon-line-height + 0.2;
|
||||
}
|
||||
|
||||
&.btn-icon-mini{
|
||||
i.fa,
|
||||
i.now-ui-icons{
|
||||
line-height: $btn-icon-line-height - 0.2;
|
||||
}
|
||||
font-size: $btn-icon-font-size-small;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-icon-mini{
|
||||
height: $btn-icon-size-mini;
|
||||
min-width: $btn-icon-size-mini;
|
||||
width: $btn-icon-size-mini;
|
||||
&.btn-lg{
|
||||
height: $btn-icon-size-lg;
|
||||
min-width: $btn-icon-size-lg;
|
||||
width: $btn-icon-size-lg;
|
||||
|
||||
.fa,
|
||||
.now-ui-icons{
|
||||
font-size: $btn-icon-font-size-mini;
|
||||
line-height: $btn-icon-line-height - 0.2;
|
||||
i.now-ui-icons,
|
||||
i.fab{
|
||||
font-size: $btn-icon-font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
i.fa,
|
||||
i.now-ui-icons{
|
||||
line-height: $btn-icon-line-height;
|
||||
&:not(.btn-footer) i.now-ui-icons,
|
||||
&:not(.btn-footer) i.fab{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-12px, -12px);
|
||||
line-height: 1.5626rem;
|
||||
width: 23px;
|
||||
}
|
||||
|
||||
i.now-ui-icons{
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.btn-icon) .now-ui-icons{
|
||||
@@ -80,7 +80,7 @@
|
||||
}
|
||||
|
||||
// Apply the mixin to the buttons
|
||||
//.btn-default { @include btn-styles($default-color, $default-states-color); }
|
||||
// .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); }
|
||||
@@ -88,30 +88,29 @@
|
||||
.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-outline-primary { @include outline-buttons($primary-color, $primary-states-color); }
|
||||
.btn-outline-success { @include outline-buttons($success-color, $success-states-color); }
|
||||
.btn-outline-info { @include outline-buttons($info-color, $info-states-color); }
|
||||
.btn-outline-warning { @include outline-buttons($warning-color, $warning-states-color); }
|
||||
.btn-outline-danger { @include outline-buttons($danger-color, $danger-states-color); }
|
||||
.btn-outline-default { @include outline-buttons($default-color, $default-states-color); }
|
||||
|
||||
.btn-round{
|
||||
border-width: $border-thin;
|
||||
border-radius: $btn-round-radius !important;
|
||||
padding: $padding-btn-vertical $padding-round-horizontal;
|
||||
|
||||
&.btn-simple{
|
||||
&[class*="btn-outline-"]{
|
||||
padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
|
||||
}
|
||||
}
|
||||
.btn-simple{
|
||||
[class*="btn-outline-"]{
|
||||
border: $border;
|
||||
border-color: $default-color;
|
||||
padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
|
||||
background-color: $transparent-bg;
|
||||
}
|
||||
|
||||
.btn-simple,
|
||||
[class*="btn-outline-"],
|
||||
.btn-link{
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
@@ -156,3 +155,54 @@
|
||||
margin-top: -1px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.btn-facebook {
|
||||
&,
|
||||
&:hover,
|
||||
&focus,
|
||||
&:active,
|
||||
&:active:focus {
|
||||
color: $social-facebook !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-twitter {
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&focus,
|
||||
&:active,
|
||||
&:active:focus {
|
||||
color: $social-twitter !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-google {
|
||||
&,
|
||||
&:hover,
|
||||
&focus,
|
||||
&:active,
|
||||
&:active:focus {
|
||||
color: $social-google !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-github {
|
||||
&,
|
||||
&:hover,
|
||||
&focus,
|
||||
&:active,
|
||||
&:active:focus {
|
||||
color: $social-github !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-linkedin {
|
||||
&,
|
||||
&:hover,
|
||||
&focus,
|
||||
&:active,
|
||||
&:active:focus {
|
||||
color: $social-linkedin !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,96 +1,44 @@
|
||||
.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);
|
||||
border: 0;
|
||||
border-radius: $border-radius-small;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.card-block{
|
||||
min-height: 130px;
|
||||
}
|
||||
.card-header{
|
||||
background-color: $transparent-bg;
|
||||
border-bottom: 0;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&[data-background-color="orange"]{
|
||||
background-color: $primary-color;
|
||||
}
|
||||
.card-footer{
|
||||
padding: 0;
|
||||
margin-top: 15px;
|
||||
background-color: $transparent-bg;
|
||||
border:0;
|
||||
}
|
||||
|
||||
&[data-background-color="red"]{
|
||||
background-color: $danger-color;
|
||||
}
|
||||
&[data-background-color="orange"]{
|
||||
background-color: $primary-color;
|
||||
}
|
||||
|
||||
&[data-background-color="yellow"]{
|
||||
background-color: $warning-color;
|
||||
}
|
||||
&[data-background-color="red"]{
|
||||
background-color: $danger-color;
|
||||
}
|
||||
|
||||
&[data-background-color="blue"]{
|
||||
background-color: $info-color;
|
||||
}
|
||||
&[data-background-color="yellow"]{
|
||||
background-color: $warning-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;
|
||||
}
|
||||
.content{
|
||||
padding: 0px 30px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
&[data-background-color="blue"]{
|
||||
background-color: $info-color;
|
||||
}
|
||||
|
||||
&[data-background-color="green"]{
|
||||
background-color: darken($success-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
8
resources/sass/now-ui/now-ui-kit/_carousel.scss
Normal file → Executable file
8
resources/sass/now-ui/now-ui-kit/_carousel.scss
Normal file → Executable file
@@ -8,8 +8,12 @@
|
||||
.carousel{
|
||||
.carousel-inner{
|
||||
box-shadow: $box-shadow-raised;
|
||||
border-radius: $border-radius-small;
|
||||
}
|
||||
.now-ui-icons{
|
||||
font-size: 2em;
|
||||
|
||||
.card {
|
||||
max-width: 650px;
|
||||
margin: 60px auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,23 +1,27 @@
|
||||
.checkbox,
|
||||
.radio {
|
||||
margin-bottom: 12px;
|
||||
.form-check{
|
||||
margin-top: .65rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.checkbox label,
|
||||
.radio label {
|
||||
.form-check .form-check-label{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding-left: 35px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 0;
|
||||
-webkit-transition: color 0.3s linear;
|
||||
-moz-transition: color 0.3s linear;
|
||||
-o-transition: color 0.3s linear;
|
||||
-ms-transition: color 0.3s linear;
|
||||
transition: color 0.3s linear;
|
||||
}
|
||||
.radio label{
|
||||
.radio .form-check-sign{
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.checkbox label::before,
|
||||
.checkbox label::after{
|
||||
.form-check .form-check-sign::before,
|
||||
.form-check .form-check-sign::after{
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
@@ -36,7 +40,7 @@
|
||||
transition: opacity 0.3s linear;
|
||||
}
|
||||
|
||||
.checkbox label::after{
|
||||
.form-check .form-check-sign::after{
|
||||
font-family: 'Nucleo Outline';
|
||||
content: "\ea22";
|
||||
top: 0px;
|
||||
@@ -48,87 +52,35 @@
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.checkbox input[type="checkbox"],
|
||||
.form-check.disabled .form-check-label,
|
||||
.form-check.disabled .form-check-label {
|
||||
color: $dark-gray;
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-check input[type="checkbox"],
|
||||
.radio input[type="radio"]{
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
.checkbox input[type="checkbox"]:checked + label::after{
|
||||
.form-check input[type="checkbox"]:checked + .form-check-sign::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{
|
||||
.form-control input[type="checkbox"]:disabled + .form-check-sign::before,
|
||||
.checkbox input[type="checkbox"]:disabled + .form-check-sign::after{
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.checkbox input[type="checkbox"]:disabled + label,
|
||||
.radio input[type="radio"]:disabled + label{
|
||||
cursor: not-allowed;
|
||||
.form-check input[type="checkbox"]:disabled + .form-check-sign,
|
||||
.form-check input[type="radio"]:disabled + .form-check-sign{
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.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{
|
||||
.form-check-radio .form-check-sign::before,
|
||||
.form-check-radio .form-check-sign::after{
|
||||
content: " ";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@@ -146,11 +98,11 @@
|
||||
transition: opacity 0.3s linear;
|
||||
}
|
||||
|
||||
.radio input[type="radio"] + label:after,
|
||||
.radio input[type="radio"] {
|
||||
.form-check-radio input[type="radio"] + .form-check-sign:after,
|
||||
.form-check-radio input[type="radio"] {
|
||||
opacity: 0;
|
||||
}
|
||||
.radio input[type="radio"]:checked + label::after {
|
||||
.form-check-radio input[type="radio"]:checked + .form-check-sign::after {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: $dark-background;
|
||||
@@ -160,19 +112,15 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.radio input[type="radio"]:checked + label::after{
|
||||
.form-check-radio input[type="radio"]:checked + .form-check-sign::after{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.radio input[type="radio"]:disabled + label {
|
||||
.form-check-radio input[type="radio"]:disabled + .form-check-sign {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.radio input[type="radio"]:disabled + label::before,
|
||||
.radio input[type="radio"]:disabled + label::after {
|
||||
.form-check-radio input[type="radio"]:disabled + .form-check-sign::before,
|
||||
.form-check-radio input[type="radio"]:disabled + .form-check-sign::after {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.radio.radio-inline {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@@ -1,483 +0,0 @@
|
||||
.tim-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tim-white-buttons {
|
||||
background-color: #777777;
|
||||
}
|
||||
|
||||
.typography-line {
|
||||
padding-left: 25%;
|
||||
margin-bottom: 35px;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.typography-line span {
|
||||
bottom: 10px;
|
||||
color: #c0c1c2;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
left: 0;
|
||||
margin-left: 20px;
|
||||
position: absolute;
|
||||
width: 260px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.tim-row {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.tim-row h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.switch {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#navbar-full .navbar {
|
||||
border-radius: 0 !important;
|
||||
margin-bottom: 15px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#menu-dropdown .navbar {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#pagination-row .pagination-container {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#icons-row i.now-ui-icons {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.space {
|
||||
height: 130px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.space-110 {
|
||||
height: 110px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.space-50 {
|
||||
height: 50px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.space-70 {
|
||||
height: 70px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navigation-example .img-src {
|
||||
background-attachment: scroll;
|
||||
}
|
||||
|
||||
.navigation-example {
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
margin-top: 0;
|
||||
min-height: 740px;
|
||||
}
|
||||
|
||||
#notifications {
|
||||
background-color: #FFFFFF;
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tim-note {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
#buttons .btn,
|
||||
#javascriptComponents .btn {
|
||||
margin: 0 0px 10px;
|
||||
}
|
||||
|
||||
.space-100 {
|
||||
height: 100px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.be-social {
|
||||
padding-bottom: 20px;
|
||||
/* border-bottom: 1px solid #aaa; */
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
|
||||
.txt-white {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.txt-gray {
|
||||
color: #ddd !important;
|
||||
}
|
||||
|
||||
.parallax {
|
||||
width: 100%;
|
||||
height: 570px;
|
||||
|
||||
display: block;
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
|
||||
}
|
||||
|
||||
.logo-container .logo {
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #333333;
|
||||
width: 50px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.logo-container .brand {
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 18px;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
margin-top: 7px;
|
||||
width: 70px;
|
||||
height: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.logo-container .brand-material {
|
||||
font-size: 18px;
|
||||
margin-top: 15px;
|
||||
height: 25px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.logo-container .logo img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-small .logo-container .brand {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixed-section {
|
||||
top: 90px;
|
||||
max-height: 80vh;
|
||||
overflow: scroll;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.fixed-section ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fixed-section ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.fixed-section li a {
|
||||
font-size: 14px;
|
||||
padding: 2px;
|
||||
display: block;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.fixed-section li a.active {
|
||||
color: #00bbff;
|
||||
}
|
||||
|
||||
.fixed-section.float {
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
width: 200px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.parallax .parallax-image {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.parallax .parallax-image img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.parallax .parallax-image {
|
||||
width: 100%;
|
||||
height: 640px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.parallax .parallax-image img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/*.separator{
|
||||
content: "Separator";
|
||||
color: #FFFFFF;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
.separator-line{
|
||||
background-color: #EEE;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.separator.separator-gray{
|
||||
background-color: #EEEEEE;
|
||||
}*/
|
||||
.social-buttons-demo .btn {
|
||||
margin-right: 5px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.img-container img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lightbox img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lightbox .modal-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lightbox .modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 991px) {
|
||||
.lightbox .modal-dialog {
|
||||
width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.fixed-section.affix {
|
||||
position: relative;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.btn, .btn-morphing {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.parallax .motto {
|
||||
top: 170px;
|
||||
margin-top: 0;
|
||||
font-size: 60px;
|
||||
width: 270px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
#images img {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading dots */
|
||||
|
||||
/* transitions */
|
||||
.presentation .front, .presentation .front:after, .presentation .front .btn, .logo-container .logo, .logo-container .brand {
|
||||
-webkit-transition: all .2s;
|
||||
-moz-transition: all .2s;
|
||||
-o-transition: all .2s;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
#images h4 {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#javascriptComponents {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* layer animation */
|
||||
|
||||
.layers-container {
|
||||
display: block;
|
||||
margin-top: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layers-container img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.animate {
|
||||
transition: 1.5s ease-in-out;
|
||||
-moz-transition: 1.5s ease-in-out;
|
||||
-webkit-transition: 1.5s ease-in-out;
|
||||
}
|
||||
|
||||
.navbar-default.navbar-small .logo-container .brand {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.navbar-transparent.navbar-small .logo-container .brand {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.navbar-default.navbar-small .logo-container .brand {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.sharing-area {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.sharing-area .btn {
|
||||
margin: 15px 4px 0;
|
||||
}
|
||||
|
||||
.section-thin,
|
||||
.section-notifications {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.section-navbars {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#navbar .navbar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#navbar .navbar-toggler,
|
||||
#menu-dropdown .navbar-toggler {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.section-tabs {
|
||||
background: #EEEEEE;
|
||||
}
|
||||
|
||||
.section-pagination {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.section-download {
|
||||
padding-top: 130px;
|
||||
}
|
||||
|
||||
.section-download .description {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-download h4 {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.section-examples a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.section-examples a + a {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.section-examples h5 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.components-page .wrapper > .header,
|
||||
.tutorial-page .wrapper > .header {
|
||||
height: 500px;
|
||||
padding-top: 128px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.components-page .title,
|
||||
.tutorial-page .title {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.brand .h1-seo {
|
||||
font-size: 2.8em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.brand .n-logo {
|
||||
max-width: 100px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.invision-logo {
|
||||
max-width: 70px;
|
||||
top: -2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.creative-tim-logo {
|
||||
max-width: 140px;
|
||||
top: -2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-javascript .title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.navbar .switch-background {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-transparent .switch-background {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section-signup .col .btn {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
#buttons-row .btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section-navbars .navbar-collapse {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section-basic {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.section-images {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
71
resources/sass/now-ui/now-ui-kit/_dropdown.scss
Normal file → Executable file
71
resources/sass/now-ui/now-ui-kit/_dropdown.scss
Normal file → Executable file
@@ -12,6 +12,46 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown &{
|
||||
@include transform-translate-y-dropdown(-25px);
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
@include opacity(0);
|
||||
top: 100% !important;
|
||||
}
|
||||
|
||||
.dropdown.show &,
|
||||
&.open{
|
||||
@include opacity(1);
|
||||
visibility: visible;
|
||||
@include transform-translate-y-dropdown(0px);
|
||||
}
|
||||
|
||||
.dropdown-item,
|
||||
.bootstrap-select &.inner li a{
|
||||
font-size: $font-size-small;
|
||||
padding-top: .6rem;
|
||||
padding-bottom: .6rem;
|
||||
margin-top: 5px;
|
||||
@include transition($fast-transition-time, $transition-linear);
|
||||
outline: none;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: $opacity-gray-3;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled{
|
||||
color: $default-color-opacity;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:before{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
@@ -28,18 +68,6 @@
|
||||
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;
|
||||
}
|
||||
@@ -70,26 +98,7 @@
|
||||
&.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;
|
||||
|
||||
27
resources/sass/now-ui/now-ui-kit/_example-pages.scss
Normal file → Executable file
27
resources/sass/now-ui/now-ui-kit/_example-pages.scss
Normal file → Executable file
@@ -117,7 +117,7 @@
|
||||
}
|
||||
|
||||
.content{
|
||||
//max-width: 450px;
|
||||
max-width: 450px;
|
||||
margin: 0 auto;
|
||||
|
||||
.social-description{
|
||||
@@ -135,7 +135,7 @@
|
||||
|
||||
.button-container{
|
||||
text-align: center;
|
||||
margin-top: -99px;
|
||||
margin-top: -106px;
|
||||
}
|
||||
|
||||
.collections{
|
||||
@@ -212,8 +212,25 @@
|
||||
|
||||
}
|
||||
|
||||
.login-page,
|
||||
.profile-page {
|
||||
.page-header:before {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
content: "";
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.login-page{
|
||||
|
||||
|
||||
|
||||
.card-login{
|
||||
border-radius: $border-radius-large;
|
||||
padding-bottom: $padding-base-horizontal;
|
||||
@@ -240,9 +257,9 @@
|
||||
&.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{
|
||||
.input-group-text,
|
||||
.form-group.no-border .input-group-text,
|
||||
.input-group.no-border .input-group-text{
|
||||
color: $opacity-8;
|
||||
}
|
||||
}
|
||||
|
||||
1
resources/sass/now-ui/now-ui-kit/_footers.scss
Normal file → Executable file
1
resources/sass/now-ui/now-ui-kit/_footers.scss
Normal file → Executable file
@@ -34,7 +34,6 @@
|
||||
|
||||
.copyright{
|
||||
font-size: $font-size-small;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
&:after{
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
.form-container {
|
||||
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);
|
||||
|
||||
h6 {
|
||||
padding: 7px;
|
||||
font-weight: 400;
|
||||
background-color: rgba(222, 222, 222, 0.3);
|
||||
}
|
||||
|
||||
.form-container-body {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
0
resources/sass/now-ui/now-ui-kit/_images.scss
Normal file → Executable file
0
resources/sass/now-ui/now-ui-kit/_images.scss
Normal file → Executable file
@@ -1,11 +1,12 @@
|
||||
@include form-control-placeholder($medium-gray, 1);
|
||||
@include form-control-placeholder($default-color, .8);
|
||||
|
||||
.form-control {
|
||||
//border-radius: $btn-round-radius;
|
||||
background-color: $transparent-bg;
|
||||
border: 1px solid $light-gray;
|
||||
border-radius: $btn-round-radius;
|
||||
color: $black-color;
|
||||
line-height: 1em;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
font-size: $font-size-small;
|
||||
@include transition-input-focus-color();
|
||||
@include box-shadow(none);
|
||||
@@ -15,14 +16,15 @@
|
||||
}
|
||||
|
||||
&:focus{
|
||||
border: 1px solid $brand-primary;
|
||||
border: 1px solid $primary-color;
|
||||
@include box-shadow(none);
|
||||
outline: 0 !important;
|
||||
color: $black-color;
|
||||
|
||||
& + .input-group-addon,
|
||||
& ~ .input-group-addon{
|
||||
border: 1px solid $brand-primary;
|
||||
& + .input-group-text,
|
||||
& ~ .input-group-text{
|
||||
border: 1px solid $primary-color;
|
||||
border-left: none;
|
||||
background-color: $transparent-bg;
|
||||
}
|
||||
}
|
||||
@@ -34,6 +36,11 @@
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
.has-success &:focus{
|
||||
border-color: lighten($success-color, 5%);
|
||||
}
|
||||
|
||||
|
||||
.has-danger &,
|
||||
.has-success &{
|
||||
&.form-control-success,
|
||||
@@ -43,12 +50,12 @@
|
||||
}
|
||||
|
||||
.has-danger &{
|
||||
background-color: lighten($danger-color, 30%);
|
||||
border-color: lighten($danger-color, 30%);
|
||||
color: $danger-color;
|
||||
background-color: rgba(222,222,222, .1);
|
||||
|
||||
&:focus{
|
||||
background-color: $opacity-gray-3;
|
||||
background-color: $white-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,9 +74,9 @@
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
& + .input-group-addon{
|
||||
background-color: $white-bg;
|
||||
}
|
||||
// & + .input-group-text{
|
||||
// background-color: $white-bg;
|
||||
// }
|
||||
}
|
||||
|
||||
.has-success,
|
||||
@@ -79,7 +86,7 @@
|
||||
content: "\ea22";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 35px;
|
||||
right: 20px;
|
||||
top: 12px;
|
||||
color: $success-color;
|
||||
font-size: 11px;
|
||||
@@ -100,14 +107,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include input-sm-padding($padding-small-vertical, $padding-small-horizontal);
|
||||
@include input-lg-padding($padding-large-vertical, $padding-input-horizontal);
|
||||
@include input-base-padding($padding-small-vertical, $padding-small-horizontal);
|
||||
@include input-base-padding($padding-input-vertical, $padding-input-horizontal);
|
||||
|
||||
.form-group.form-group-no-border,
|
||||
.input-group.form-group-no-border{
|
||||
.form-group.no-border,
|
||||
.input-group.no-border{
|
||||
.form-control,
|
||||
.form-control + .input-group-addon{
|
||||
.form-control + .input-group-text{
|
||||
background-color: $opacity-gray-3;
|
||||
border: medium none;
|
||||
&:focus,
|
||||
@@ -120,15 +126,25 @@
|
||||
|
||||
.form-control{
|
||||
&:focus{
|
||||
& + .input-group-addon{
|
||||
& + .input-group-text{
|
||||
background-color: $opacity-gray-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-group-prepend{
|
||||
.input-group-text{
|
||||
background-color: $opacity-gray-3;
|
||||
border: none;
|
||||
border-left: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon{
|
||||
background-color: $opacity-gray-3;
|
||||
border: none;
|
||||
&.input-group-focus{
|
||||
&.no-border{
|
||||
.input-group-text{
|
||||
background-color: $opacity-gray-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -143,15 +159,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
.input-group-text {
|
||||
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();
|
||||
|
||||
.input-group-focus &{
|
||||
background-color: $white-bg;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
.has-success &,
|
||||
.has-danger &{
|
||||
background-color: $white-color;
|
||||
@@ -168,42 +188,64 @@
|
||||
@include input-size($padding-base-vertical - 1, $padding-base-horizontal);
|
||||
padding-left: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
i{
|
||||
width: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group,
|
||||
.form-group{
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.input-group[disabled]{
|
||||
.input-group-addon{
|
||||
.input-group-text{
|
||||
background-color: $light-gray;
|
||||
}
|
||||
}
|
||||
/*.input-group .form-control:first-child,
|
||||
.input-group-addon:first-child,
|
||||
|
||||
.input-group,
|
||||
.form-group{
|
||||
.input-group-prepend{
|
||||
margin-right: 0;
|
||||
|
||||
.input-group-text {
|
||||
border-left: 1px solid #E3E3E3;
|
||||
}
|
||||
}
|
||||
.input-group-append .input-group-text {
|
||||
border-right: 1px solid #E3E3E3;
|
||||
padding: 10px 18px 10px 0;
|
||||
}
|
||||
|
||||
&.input-group-focus {
|
||||
.input-group-prepend .input-group-text {
|
||||
border-left: 1px solid #f96332;
|
||||
}
|
||||
.input-group-append .input-group-text {
|
||||
border-right: 1px solid #f96332;
|
||||
}
|
||||
&.no-border{
|
||||
.input-group-prepend .input-group-text{
|
||||
border-left: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group .form-control:first-child,
|
||||
.input-group-text: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-text: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;
|
||||
@@ -223,20 +265,19 @@
|
||||
}
|
||||
textarea.form-control{
|
||||
max-width: 100%;
|
||||
max-height: 80px;
|
||||
padding: 10px 10px 0 0;
|
||||
resize: none;
|
||||
background-color: $transparent-bg;
|
||||
border: 1px solid $light-gray;
|
||||
color: $black-color;
|
||||
line-height: 1em;
|
||||
font-size: $font-size-small;
|
||||
border: none;
|
||||
border-bottom: 1px solid $light-gray;
|
||||
border-radius: 0;
|
||||
line-height: 2;
|
||||
|
||||
&:focus,
|
||||
&:active{
|
||||
@include box-shadow(none);
|
||||
border: 1px solid $brand-primary;
|
||||
background-color: $transparent-bg;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -244,7 +285,31 @@ textarea.form-control{
|
||||
.has-danger{
|
||||
|
||||
&.form-group .form-control,
|
||||
&.form-group.form-group-no-border .form-control{
|
||||
&.form-group.no-border .form-control{
|
||||
padding-right: $padding-input-horizontal + 21;
|
||||
}
|
||||
}
|
||||
|
||||
.form.form-newsletter .form-group{
|
||||
float: left;
|
||||
width: 78%;
|
||||
margin-right: 2%;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.input-group .input-group-btn{
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
// Input files - hide actual input - requires specific markup in the sample.
|
||||
.form-group input[type=file] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
40
resources/sass/now-ui/now-ui-kit/_misc.scss
Normal file → Executable file
40
resources/sass/now-ui/now-ui-kit/_misc.scss
Normal file → Executable file
@@ -2,6 +2,7 @@ body{
|
||||
color: $black-color;
|
||||
font-size: $font-size-base;
|
||||
font-family: $sans-serif-family;
|
||||
overflow-x: hidden;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@@ -12,18 +13,27 @@ body{
|
||||
}
|
||||
/* Animations */
|
||||
.nav-pills .nav-link,
|
||||
.nav-item .nav-link,
|
||||
.navbar,
|
||||
.nav-tabs .nav-link{
|
||||
.nav-tabs .nav-link,
|
||||
.tag,
|
||||
.tag [data-role="remove"]{
|
||||
@include transition($general-transition-time, $transition-ease);
|
||||
}
|
||||
|
||||
//transition for dropdown caret
|
||||
.dropdown-toggle:after,
|
||||
.card a,
|
||||
.bootstrap-switch-label:before{
|
||||
@include transition($fast-transition-time, $transition-ease);
|
||||
}
|
||||
|
||||
.dropdown-toggle[aria-expanded="true"]:after{
|
||||
.dropdown-toggle:after,
|
||||
[data-toggle="collapse"][data-parent="#accordion"] i{
|
||||
@include transition-on-prop(transform, $fast-transition-time, $transition-ease);
|
||||
}
|
||||
|
||||
.dropdown-toggle[aria-expanded="true"]:after,
|
||||
[data-toggle="collapse"][data-parent="#accordion"][aria-expanded="true"] i{
|
||||
@include rotate-180();
|
||||
}
|
||||
|
||||
@@ -44,13 +54,7 @@ body{
|
||||
}
|
||||
}
|
||||
|
||||
.open{
|
||||
@include transform-translate-y(0);
|
||||
@include opacity(1);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.separator{
|
||||
.separator-line{
|
||||
height: 2px;
|
||||
width: 44px;
|
||||
background-color: $default-color;
|
||||
@@ -60,3 +64,19 @@ body{
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.section-space{
|
||||
height: 62px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pull-left{
|
||||
float: left;
|
||||
}
|
||||
.pull-right{
|
||||
float: right;
|
||||
}
|
||||
|
||||
.title-up{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@@ -7,7 +7,9 @@
|
||||
@import "mixins/inputs";
|
||||
@import "mixins/dropdown";
|
||||
@import "mixins/badges";
|
||||
@import "mixins/navbar";
|
||||
@import "mixins/popovers";
|
||||
@import "mixins/modals";
|
||||
@import "mixins/pages";
|
||||
@import "mixins/datepicker";
|
||||
@import "mixins/phpvms";
|
||||
|
||||
@@ -155,7 +155,7 @@
|
||||
@include modal-colors($info-color, $white-color);
|
||||
}
|
||||
|
||||
&.show .modal-dialog{
|
||||
&.show.modal-mini .modal-dialog{
|
||||
-webkit-transform: translate(0,30%);
|
||||
-o-transform: translate(0,30%);
|
||||
transform: translate(0,30%);
|
||||
|
||||
@@ -6,14 +6,19 @@
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
|
||||
|
||||
a{
|
||||
color: $white-color;
|
||||
vertical-align: middle;
|
||||
|
||||
&:not(.btn):not(.dropdown-item){
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
|
||||
p{
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
line-height: 21px;
|
||||
font-weight: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.navbar-nav{
|
||||
@@ -26,22 +31,34 @@
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.nav-link{
|
||||
.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.fab + p,
|
||||
i.now-ui-icons + p{
|
||||
margin-left: 5px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
i.fa,
|
||||
i.fab,
|
||||
i.now-ui-icons{
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
top: 3px;
|
||||
text-align: center;
|
||||
width: 21px;
|
||||
}
|
||||
@@ -64,17 +81,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item.active .nav-link{
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*='navbar-toggleable-'] .container{
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.logo-container{
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
@@ -95,7 +110,6 @@
|
||||
.navbar-toggler{
|
||||
width: 37px;
|
||||
height: 27px;
|
||||
vertical-align: middle;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -105,13 +119,13 @@
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.navbar-toggler-right{
|
||||
padding-right: 0;
|
||||
top: 8px;
|
||||
.navbar-toggler-bar.middle-bar{
|
||||
width: 17px;
|
||||
transition: width .2s linear;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
& .navbar-toggler-bar.bar2{
|
||||
& .navbar-toggler-bar.middle-bar{
|
||||
width: 22px;
|
||||
}
|
||||
}
|
||||
@@ -127,11 +141,11 @@
|
||||
background-color: $transparent-bg !important;
|
||||
box-shadow: none;
|
||||
color: $white-color;
|
||||
padding-top: 20px;
|
||||
padding-top: 20px !important;
|
||||
}
|
||||
|
||||
&.bg-white:not(.navbar-transparent){
|
||||
a:not(.dropdown-item){
|
||||
a:not(.dropdown-item):not(.btn){
|
||||
color: $default-color;
|
||||
|
||||
&.disabled{
|
||||
@@ -144,7 +158,10 @@
|
||||
background: $default-color;
|
||||
}
|
||||
|
||||
.nav-item.active .nav-link{
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
@@ -12,8 +12,7 @@ Created using IcoMoon - icomoon.io
|
||||
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'),
|
||||
url('../fonts/nucleo-outline.svg') format('svg');
|
||||
url('../fonts/nucleo-outline.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -532,3 +531,26 @@ Created using IcoMoon - icomoon.io
|
||||
.now-ui-icons.users_single-02:before {
|
||||
content: "\ea51";
|
||||
}
|
||||
|
||||
.all-icons .font-icon-detail {
|
||||
text-align: center;
|
||||
padding: 45px 0px 30px;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 0.1875rem;
|
||||
margin: 15px 0;
|
||||
min-height: 168px;
|
||||
}
|
||||
|
||||
.all-icons [class*="now-ui-icons"] {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.all-icons .font-icon-detail p {
|
||||
margin: 25px auto 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: block;
|
||||
color: #B8B8B8;
|
||||
padding:0 10px;
|
||||
font-size: 0.7142em;
|
||||
}
|
||||
|
||||
21
resources/sass/now-ui/now-ui-kit/_pagination.scss
Normal file → Executable file
21
resources/sass/now-ui/now-ui-kit/_pagination.scss
Normal file → Executable file
@@ -1,4 +1,5 @@
|
||||
.pagination{
|
||||
|
||||
.page-item .page-link{
|
||||
border: 0;
|
||||
border-radius: 30px !important;
|
||||
@@ -7,6 +8,7 @@
|
||||
margin: 0 3px;
|
||||
min-width: 30px;
|
||||
text-align: center;
|
||||
box-shadow: none;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
color: $black-color;
|
||||
@@ -37,14 +39,14 @@
|
||||
}
|
||||
|
||||
.page-item.active > .page-link{
|
||||
color: $brand-primary;
|
||||
color: $light-gray;
|
||||
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
|
||||
|
||||
&,
|
||||
&:focus,
|
||||
&:hover{
|
||||
background-color: $brand-primary;
|
||||
border-color: $brand-primary;
|
||||
background-color: $default-color;
|
||||
border-color: $default-color;
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
@@ -61,8 +63,8 @@
|
||||
&,
|
||||
&:focus,
|
||||
&:hover{
|
||||
background-color: $brand-primary;
|
||||
border-color: $brand-primary;
|
||||
background-color: $brand-info;
|
||||
border-color: $brand-info;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -72,8 +74,8 @@
|
||||
&,
|
||||
&:focus,
|
||||
&:hover{
|
||||
background-color: $brand-primary;
|
||||
border-color: $brand-primary;
|
||||
background-color: $brand-success;
|
||||
border-color: $brand-success;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -134,3 +136,8 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.pagination-container{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
36
resources/sass/now-ui/now-ui-kit/_phpvms.scss
Normal file
36
resources/sass/now-ui/now-ui-kit/_phpvms.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
/*
|
||||
* Custom styling for phpvms
|
||||
*/
|
||||
|
||||
@include input-sm-padding($padding-small-vertical, $padding-small-horizontal);
|
||||
@include input-base-padding($padding-small-vertical, $padding-small-horizontal);
|
||||
|
||||
.form-container {
|
||||
@extend .form-container;
|
||||
|
||||
border-radius: 0;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
//box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
|
||||
|
||||
h6 {
|
||||
padding: 7px;
|
||||
font-weight: 400;
|
||||
background-color: rgba(222, 222, 222, 0.3);
|
||||
}
|
||||
|
||||
.form-container-body {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $brand-primary;
|
||||
& + .input-group-addon,
|
||||
& ~ .input-group-addon {
|
||||
border: 1px solid $brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
41
resources/sass/now-ui/now-ui-kit/_pills.scss
Normal file → Executable file
41
resources/sass/now-ui/now-ui-kit/_pills.scss
Normal file → Executable file
@@ -1,16 +1,37 @@
|
||||
.nav-pills{
|
||||
|
||||
&.nav-pills-just-icons{
|
||||
.nav-item .nav-link{
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
padding: 0;
|
||||
max-width: 80px;
|
||||
min-width: auto;
|
||||
margin-bottom: 4px;
|
||||
|
||||
i{
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.flex-column) .nav-item {
|
||||
&:not(:last-child) .nav-link{
|
||||
margin-right: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
padding: $padding-btn-vertical - 1 $padding-round-horizontal;
|
||||
background-color: $opacity-gray-3;
|
||||
min-width: 100px;
|
||||
font-weight: $font-weight-normal;
|
||||
text-align: center;
|
||||
color: $light-black;
|
||||
|
||||
|
||||
&:hover{
|
||||
background-color: $opacity-gray-3;
|
||||
@@ -35,8 +56,8 @@
|
||||
|
||||
i{
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
line-height: 60px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -5,10 +5,20 @@
|
||||
line-height: 1.7;
|
||||
max-width: 240px;
|
||||
|
||||
.popover-title{
|
||||
&.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: uppercase;
|
||||
text-transform: capitalize;
|
||||
font-weight: $font-weight-semi;
|
||||
margin: 0;
|
||||
margin-top: 5px;
|
||||
@@ -48,20 +58,20 @@
|
||||
|
||||
|
||||
.tooltip{
|
||||
&.bs-tether-element-attached-right .tooltip-inner:before{
|
||||
border-left-color:$white-color;
|
||||
&.bs-tooltip-right .arrow:before{
|
||||
border-right-color:$white-color;
|
||||
}
|
||||
|
||||
&.bs-tether-element-attached-top .tooltip-inner:before{
|
||||
border-bottom-color:$white-color;
|
||||
}
|
||||
|
||||
&.bs-tether-element-attached-bottom .tooltip-inner:before{
|
||||
&.bs-tooltip-top .arrow:before{
|
||||
border-top-color:$white-color;
|
||||
}
|
||||
|
||||
&.bs-tether-element-attached-left .tooltip-inner:before{
|
||||
border-right-color:$white-color;
|
||||
&.bs-tooltip-bottom .arrow:before{
|
||||
border-bottom-color:$white-color;
|
||||
}
|
||||
|
||||
&.bs-tooltip-left .arrow:before{
|
||||
border-left-color:$white-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
height: 1px;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background: $opacity-gray-5;
|
||||
background: $opacity-gray-8;
|
||||
margin-top: 14px;
|
||||
|
||||
.progress-bar {
|
||||
|
||||
438
resources/sass/now-ui/now-ui-kit/_responsive.scss
Normal file → Executable file
438
resources/sass/now-ui/now-ui-kit/_responsive.scss
Normal file → Executable file
@@ -1,251 +1,69 @@
|
||||
@media screen and (max-width: 991px){
|
||||
.navbar-collapse{
|
||||
position: fixed;
|
||||
display: block;
|
||||
top: 0;
|
||||
height: 100vh !important;
|
||||
width: 300px;
|
||||
right: 0;
|
||||
z-index: 1032;
|
||||
visibility: visible;
|
||||
background-color: #999;
|
||||
overflow-y: visible;
|
||||
border-top: none;
|
||||
text-align: left;
|
||||
.sidebar-collapse{
|
||||
@include navbar-collapse();
|
||||
|
||||
max-height: none !important;
|
||||
|
||||
@include transform-translate-x(300px);
|
||||
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
||||
|
||||
.nav-open &{
|
||||
@include transform-translate-x(0px);
|
||||
}
|
||||
|
||||
&: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;
|
||||
color: $white-color;
|
||||
&.menu-on-left{
|
||||
.navbar-collapse{
|
||||
right: auto;
|
||||
left: 0;
|
||||
@include transform-translate-x(-300px);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-on-left &{
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link i.fab,
|
||||
.navbar-nav .nav-link i.now-ui-icons {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.bootstrap-collapse{
|
||||
.navbar .navbar-collapse{
|
||||
background: none !important;
|
||||
}
|
||||
@include navbar-responsive();
|
||||
}
|
||||
|
||||
.profile-photo .profile-photo-small{
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
[class*="navbar-toggleable-"] .navbar-collapse{
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.button-dropdown{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar{
|
||||
.navbar-brand{
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
.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-top: -18px;
|
||||
|
||||
&:before{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu .dropdown-item:focus,
|
||||
.dropdown-menu .dropdown-item:hover{
|
||||
color: $white-color;
|
||||
}
|
||||
|
||||
.navbar-translate{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
||||
}
|
||||
|
||||
.menu-on-left .navbar-brand{
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.nav-open{
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;}
|
||||
}
|
||||
|
||||
#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));
|
||||
}
|
||||
|
||||
.section-nucleo-icons .container .row > [class*="col-"]:first-child{
|
||||
text-align: center;
|
||||
}
|
||||
@@ -292,8 +110,85 @@
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px){
|
||||
.navbar-collapse{
|
||||
background: none !important;
|
||||
.navbar-collapse:not(.has-image) {
|
||||
background: transparent !important;
|
||||
}
|
||||
.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{
|
||||
@@ -302,7 +197,16 @@
|
||||
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{
|
||||
@@ -311,6 +215,14 @@
|
||||
|
||||
.dropdown-menu .dropdown-item{
|
||||
color: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer{
|
||||
@@ -366,7 +278,7 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px){
|
||||
.navbar[class*='navbar-toggleable-'] .container{
|
||||
.navbar[class*='navbar-expand-'] .container{
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -431,11 +343,11 @@
|
||||
top: 99%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer nav{
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
float: none;
|
||||
@media screen and (max-width: 517px) {
|
||||
.alert .alert-icon{
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -452,3 +364,51 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 950px) {
|
||||
.index-page .page-header .category-absolute{
|
||||
margin-top: -330px;
|
||||
}
|
||||
}
|
||||
|
||||
167
resources/sass/now-ui/now-ui-kit/_sections.scss
Normal file → Executable file
167
resources/sass/now-ui/now-ui-kit/_sections.scss
Normal file → Executable file
@@ -19,14 +19,33 @@
|
||||
}
|
||||
|
||||
.page-header{
|
||||
height: 100vh;
|
||||
max-height: 1050px;
|
||||
padding: 0;
|
||||
color: $white-color;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
max-height: 999px;
|
||||
padding: 0;
|
||||
color: $white-color;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
& > .content{
|
||||
margin-top: 12%;
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
&.page-header-small{
|
||||
min-height: 60vh;
|
||||
max-height: 440px;
|
||||
}
|
||||
|
||||
&:before{
|
||||
background-color: rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
> .container{
|
||||
z-index: 2;
|
||||
padding-top: 12vh;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.page-header-image{
|
||||
position: absolute;
|
||||
@@ -37,6 +56,22 @@
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.content-center{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 2;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
padding: 0 15px;
|
||||
width: 100%;
|
||||
max-width: 880px;
|
||||
|
||||
}
|
||||
|
||||
footer{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@@ -46,30 +81,12 @@
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
|
||||
> .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;
|
||||
color: #FFFFFF;
|
||||
width: 100%;
|
||||
max-width: 880px;
|
||||
}
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.category,
|
||||
.description{
|
||||
color: $opacity-5;
|
||||
}
|
||||
|
||||
&.page-header-small{
|
||||
height: 60vh;
|
||||
max-height: 440px;
|
||||
color: $opacity-8;
|
||||
}
|
||||
|
||||
&:after,
|
||||
@@ -83,19 +100,6 @@
|
||||
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{
|
||||
@@ -103,6 +107,10 @@
|
||||
&:before{
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[filter-color="orange"]{
|
||||
@include linear-gradient(rgba($black-color,.20), rgba(224, 23, 3, 0.6));
|
||||
}
|
||||
}
|
||||
|
||||
.section-story-overview{
|
||||
@@ -111,29 +119,25 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
img{
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&.image-left{
|
||||
img{
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:nth-child(2){
|
||||
@@ -147,7 +151,7 @@
|
||||
min-height: 180px;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
top: 365px;
|
||||
top: 376px;
|
||||
right: 155px;
|
||||
z-index: 0;
|
||||
}
|
||||
@@ -302,22 +306,45 @@
|
||||
background-color: $black-color;
|
||||
}
|
||||
|
||||
[data-background-color]{
|
||||
[data-background-color]:not([data-background-color="gray"]){
|
||||
color: $white-color;
|
||||
|
||||
.title,
|
||||
.social-description h2,
|
||||
p,
|
||||
h1,h2,h3,h4,h5,h6,a:not(.btn),
|
||||
.icons-container i{
|
||||
p.blockquote,
|
||||
p.blockquote small{
|
||||
color: $white-color;
|
||||
}
|
||||
|
||||
.separator{
|
||||
background-color: $white-color;
|
||||
}
|
||||
|
||||
.navbar.bg-white p{
|
||||
color: $default-color;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6,a:not(.btn):not(.dropdown-item),
|
||||
.icons-container{
|
||||
color: $white-color;
|
||||
}
|
||||
|
||||
.input-group-text,
|
||||
.form-group.no-border .input-group-text,
|
||||
.input-group.no-border .input-group-text{
|
||||
color: $opacity-8;
|
||||
}
|
||||
|
||||
.description,
|
||||
.social-description p{
|
||||
color: $opacity-8;
|
||||
}
|
||||
|
||||
p.blockquote{
|
||||
border-color: $opacity-2;
|
||||
}
|
||||
|
||||
//radio and checkboxes
|
||||
.checkbox label::before,
|
||||
.checkbox label::after,
|
||||
@@ -346,24 +373,26 @@
|
||||
//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{
|
||||
.btn[class*="btn-outline-"] {
|
||||
background-color: $transparent-bg;
|
||||
border-color: $opacity-5;
|
||||
color: $white-color;
|
||||
|
||||
&:hover,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active{
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
&:not(:disabled):not(.disabled):active:focus,
|
||||
&:not(:disabled):not(.disabled).active:focus,
|
||||
&:active:hover,
|
||||
&.active:hover,
|
||||
.show > &.dropdown-toggle,
|
||||
.show > &.dropdown-toggle:focus,
|
||||
.show > &.dropdown-toggle:hover {
|
||||
background-color: $transparent-bg;
|
||||
border-color: $white-color;
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
|
||||
.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: 5px;
|
||||
/*text-align: center;*/
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -4,6 +4,15 @@
|
||||
border: 0;
|
||||
padding: $padding-large-vertical $padding-base-horizontal;
|
||||
|
||||
&:not(.nav-tabs-neutral) > .nav-item > .nav-link.active{
|
||||
box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.card &{
|
||||
border-top-right-radius: $border-radius-small;
|
||||
border-top-left-radius: $border-radius-small;
|
||||
}
|
||||
|
||||
> .nav-item{
|
||||
> .nav-link{
|
||||
color: $default-color;
|
||||
@@ -21,8 +30,9 @@
|
||||
}
|
||||
|
||||
&.active{
|
||||
border: 1px solid $default-color;
|
||||
background-color: $light-black;
|
||||
border-radius: 30px;
|
||||
color: $white-color;
|
||||
}
|
||||
|
||||
i.now-ui-icons{
|
||||
@@ -45,7 +55,7 @@
|
||||
color: $white-color;
|
||||
|
||||
&.active{
|
||||
border-color: $opacity-5;
|
||||
background-color: $opacity-2;
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
@@ -56,8 +66,7 @@
|
||||
> .nav-item{
|
||||
> .nav-link{
|
||||
&.active{
|
||||
border-color: $primary-color;
|
||||
color: $primary-color;
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -67,8 +76,7 @@
|
||||
> .nav-item{
|
||||
> .nav-link{
|
||||
&.active{
|
||||
border-color: $info-color;
|
||||
color: $info-color;
|
||||
background-color: $info-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -78,8 +86,7 @@
|
||||
> .nav-item{
|
||||
> .nav-link{
|
||||
&.active{
|
||||
border-color: $danger-color;
|
||||
color: $danger-color;
|
||||
background-color: $danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -89,8 +96,7 @@
|
||||
> .nav-item{
|
||||
> .nav-link{
|
||||
&.active{
|
||||
border-color: $warning-color;
|
||||
color: $warning-color;
|
||||
background-color: $warning-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -100,8 +106,7 @@
|
||||
> .nav-item{
|
||||
> .nav-link{
|
||||
&.active{
|
||||
border-color: $success-color;
|
||||
color: $success-color;
|
||||
background-color: $success-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,10 @@ h1,h2,h3,h4,h5,h6{
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
small{
|
||||
font-size: 60%;
|
||||
}
|
||||
|
||||
a{
|
||||
color: $primary-color;
|
||||
&:hover,
|
||||
@@ -39,18 +43,22 @@ h3, .h3{
|
||||
h4, .h4{
|
||||
font-size: $font-size-h4;
|
||||
line-height: 1.45em;
|
||||
//margin-top: $margin-base-vertical * 2;
|
||||
margin-top: $margin-base-vertical * 2;
|
||||
margin-bottom: $margin-base-vertical;
|
||||
|
||||
& + .category,
|
||||
&.title + .category{
|
||||
margin-top: -10px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
h5, .h5 {
|
||||
font-size: $font-size-h5;
|
||||
line-height: 1.4em;
|
||||
margin-bottom: 15px;
|
||||
|
||||
&.category{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
h6, .h6{
|
||||
font-size: $font-size-h6;
|
||||
@@ -59,14 +67,14 @@ h6, .h6{
|
||||
}
|
||||
p{
|
||||
line-height: 1.61em;
|
||||
|
||||
&.description{
|
||||
font-size: 1.14em;
|
||||
}
|
||||
font-weight: 300;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.title{
|
||||
font-weight: $font-weight-bold;
|
||||
padding-top: 30px;
|
||||
|
||||
|
||||
&.title-up{
|
||||
text-transform: uppercase;
|
||||
@@ -88,7 +96,7 @@ p{
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
.category{
|
||||
text-transform: uppercase;
|
||||
text-transform: capitalize;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $dark-gray;
|
||||
}
|
||||
@@ -107,6 +115,9 @@ p{
|
||||
.text-danger {
|
||||
color: $brand-danger !important;
|
||||
}
|
||||
.text-black{
|
||||
color: $light-black;
|
||||
}
|
||||
|
||||
.blockquote{
|
||||
border-left: none;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
$sans-serif-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
|
||||
$sans-serif-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !default;
|
||||
|
||||
$none: 0 !default;
|
||||
$border-thin: 1px !default;
|
||||
@@ -13,6 +13,7 @@ $white-bg: #FFFFFF !default;
|
||||
$orange-bg: #e95e38 !default;
|
||||
|
||||
$smoke-bg: #F5F5F5 !default;
|
||||
$light-black: #444 !default;
|
||||
|
||||
$black-bg: rgba(30,30,30,.97) !default;
|
||||
|
||||
@@ -25,6 +26,8 @@ $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;
|
||||
@@ -39,37 +42,37 @@ $opacity-2: rgba(255,255,255, .2) !default;
|
||||
$transparent-bg: transparent !default;
|
||||
$dark-background: #555555 !default;
|
||||
|
||||
$default-color: #B8B8B8 !default;
|
||||
$default-states-color: darken($default-color, 5%) !default;
|
||||
$default-color: #888888 !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: darken($primary-color, 5%) !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: darken($success-color, 5%) !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: #067ec1 !default; //#2CA8FF !default;
|
||||
$info-states-color: #0688d0 !default; // #109CFF !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: darken($warning-color, 5%) !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: darken($danger-color, 5%) !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: #067ec1 !default;
|
||||
$brand-primary: $primary-color !default;
|
||||
$brand-info: $info-color !default;
|
||||
$brand-success: $success-color !default;
|
||||
$brand-warning: $warning-color !default;
|
||||
@@ -133,19 +136,22 @@ $btn-round-radius: 30px !default;
|
||||
|
||||
$height-base: 55px !default;
|
||||
|
||||
$btn-icon-font-size: 24px !default;
|
||||
$btn-icon-size: 56px !default;
|
||||
$btn-icon-size-mini: 36px !default;
|
||||
$btn-icon-font-size-mini: 14px !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-size-h3: 1.825em !default; // ~ 28px
|
||||
$font-size-h4: 1.5em !default; // ~ 24px
|
||||
$font-size-h5: 1.3em !default; // ~ 22px
|
||||
$font-size-h6: .9em !default; // ~ 12px
|
||||
|
||||
$font-paragraph: 1em !default;
|
||||
$font-paragraph: 1.2em !default;
|
||||
$font-size-navbar: 1em !default;
|
||||
$font-size-mini: 0.7142em !default;
|
||||
$font-size-small: 0.8571em !default;
|
||||
@@ -236,13 +242,37 @@ $nc-padding-width: (1em/3) !default;
|
||||
|
||||
// Social icons color
|
||||
$social-twitter: #55acee !default;
|
||||
$social-twitter-state-color: darken(#55acee, 5%) !default;
|
||||
$social-twitter-state-color: lighten(#55acee, 6%) !default;
|
||||
|
||||
$social-facebook: #3b5998 !default;
|
||||
$social-facebook-state-color: darken(#3b5998, 5%) !default;
|
||||
$social-facebook-state-color: lighten(#3b5998, 6%) !default;
|
||||
|
||||
$social-google: #dd4b39 !default;
|
||||
$social-google-state-color: darken(#dd4b39, 5%) !default;
|
||||
$social-google-state-color: lighten(#dd4b39, 6%) !default;
|
||||
|
||||
$social-linkedin: #0077B5 !default;
|
||||
$social-linkedin-state-color: darken(#0077B5, 5%) !default;
|
||||
$social-linkedin: #0077B5 !default;
|
||||
$social-linkedin-state-color: lighten(#0077B5, 6%) !default;
|
||||
|
||||
$social-pinterest: #cc2127 !default;
|
||||
$social-pinterest-state-color: lighten(#cc2127, 6%) !default;
|
||||
|
||||
$social-dribbble: #ea4c89 !default;
|
||||
$social-dribbble-state-color: lighten(#ea4c89, 6%) !default;
|
||||
|
||||
$social-github: #333333 !default;
|
||||
$social-github-state-color: lighten(#333333, 6%) !default;
|
||||
|
||||
$social-youtube: #e52d27 !default;
|
||||
$social-youtube-state-color: lighten(#e52d27, 6%) !default;
|
||||
|
||||
$social-instagram: #125688 !default;
|
||||
$social-instagram-state-color: lighten(#125688, 6%) !default;
|
||||
|
||||
$social-reddit: #ff4500 !default;
|
||||
$social-reddit-state-color: lighten(#ff4500, 6%) !default;
|
||||
|
||||
$social-tumblr: #35465c !default;
|
||||
$social-tumblr-state-color: lighten(#35465c, 6%) !default;
|
||||
|
||||
$social-behance: #1769ff !default;
|
||||
$social-behance-state-color: lighten(#1769ff, 6%) !default;
|
||||
|
||||
15
resources/sass/now-ui/now-ui-kit/cards/_card-plain.scss
Executable file
15
resources/sass/now-ui/now-ui-kit/cards/_card-plain.scss
Executable file
@@ -0,0 +1,15 @@
|
||||
.card-plain{
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
.card-body,
|
||||
.card-header{
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.card-header:after{
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
56
resources/sass/now-ui/now-ui-kit/cards/_card-signup.scss
Executable file
56
resources/sass/now-ui/now-ui-kit/cards/_card-signup.scss
Executable file
@@ -0,0 +1,56 @@
|
||||
.card-signup{
|
||||
max-width: 350px;
|
||||
margin: 0 auto;
|
||||
|
||||
.card-header{
|
||||
margin:0 20px;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.card-title{
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 24px;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.card-body{
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.form-check,
|
||||
.form-check.form-check-radio{
|
||||
margin-top: 20px;
|
||||
|
||||
label{
|
||||
margin-left: 11px;
|
||||
color: initial;
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-description{
|
||||
margin-top: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.social-line{
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
|
||||
.btn.btn-icon ,
|
||||
.btn.btn-icon .btn-icon{
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
10
resources/sass/now-ui/now-ui-kit/mixins/_badges.scss
Normal file → Executable file
10
resources/sass/now-ui/now-ui-kit/mixins/_badges.scss
Normal file → Executable file
@@ -1,4 +1,10 @@
|
||||
@mixin badge-color($color) {
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
|
||||
&,
|
||||
&[href]:focus,
|
||||
&[href]:hover{
|
||||
border-color: $color;
|
||||
background-color: $color;
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
|
||||
129
resources/sass/now-ui/now-ui-kit/mixins/_buttons.scss
Normal file → Executable file
129
resources/sass/now-ui/now-ui-kit/mixins/_buttons.scss
Normal file → Executable file
@@ -2,19 +2,26 @@
|
||||
@mixin btn-styles($btn-color, $btn-states-color) {
|
||||
background-color: $btn-color;
|
||||
|
||||
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&:active:focus,
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
&:not(:disabled):not(.disabled):active:focus,
|
||||
&:not(:disabled):not(.disabled).active:focus,
|
||||
&:active:hover,
|
||||
&.active:focus,
|
||||
&.active:hover,
|
||||
.open > &.dropdown-toggle,
|
||||
.open > &.dropdown-toggle:focus,
|
||||
.open > &.dropdown-toggle: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,
|
||||
@@ -32,22 +39,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.focus,
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// btn-neutral style
|
||||
@if $btn-color == $white-color{
|
||||
color: $primary-color;
|
||||
|
||||
|
||||
&.btn-danger{
|
||||
color: $danger-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active{
|
||||
color: $danger-states-color;
|
||||
color: $danger-states-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-primary{
|
||||
color: $primary-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active{
|
||||
color: $primary-states-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,7 +70,7 @@
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active{
|
||||
color: $info-states-color;
|
||||
color: $info-states-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,7 +80,7 @@
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active{
|
||||
color: $warning-states-color;
|
||||
color: $warning-states-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,7 +90,7 @@
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active{
|
||||
color: $success-states-color;
|
||||
color: $success-states-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -87,26 +100,34 @@
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active{
|
||||
color: $default-states-color;
|
||||
color: $default-states-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active:focus,
|
||||
&:active:hover,
|
||||
&.active:focus,
|
||||
&.active:hover,
|
||||
.open > &.dropdown-toggle,
|
||||
.open > &.dropdown-toggle:focus,
|
||||
.open > &.dropdown-toggle:hover {
|
||||
background-color: $white-color;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active{
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
&:not(:disabled):not(.disabled):active:focus,
|
||||
&:not(:disabled):not(.disabled).active:focus,
|
||||
&:active:hover,
|
||||
&.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 !important;
|
||||
|
||||
&:not(.nav-link){
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} @else {
|
||||
@@ -119,10 +140,19 @@
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active{
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
&:not(:disabled):not(.disabled):active:focus,
|
||||
&:not(:disabled):not(.disabled).active:focus,
|
||||
&:active:hover,
|
||||
&.active:hover,
|
||||
.show > &.dropdown-toggle,
|
||||
.show > &.dropdown-toggle:focus,
|
||||
.show > &.dropdown-toggle:hover{
|
||||
background-color: $transparent-bg;
|
||||
color: $btn-states-color;
|
||||
border-color: $btn-states-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -131,22 +161,53 @@
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active{
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
&:not(:disabled):not(.disabled):active:focus,
|
||||
&:not(:disabled):not(.disabled).active:focus,
|
||||
&:active:hover,
|
||||
&.active:hover,
|
||||
.show > &.dropdown-toggle,
|
||||
.show > &.dropdown-toggle:focus,
|
||||
.show > &.dropdown-toggle:hover{
|
||||
background-color: $transparent-bg;
|
||||
color: $btn-states-color;
|
||||
text-decoration: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin outline-buttons($btn-color, $btn-states-color) {
|
||||
color: $btn-color;
|
||||
border-color: $btn-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
&:not(:disabled):not(.disabled):active:focus,
|
||||
&:not(:disabled):not(.disabled).active:focus,
|
||||
&:active:hover,
|
||||
&.active:hover,
|
||||
.show > &.dropdown-toggle,
|
||||
.show > &.dropdown-toggle:focus,
|
||||
.show > &.dropdown-toggle:hover {
|
||||
background-color: $transparent-bg;
|
||||
color: $btn-states-color;
|
||||
border-color: $btn-states-color;
|
||||
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;
|
||||
&[class*="btn-outline-"] {
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
4
resources/sass/now-ui/now-ui-kit/mixins/_cards.scss
Executable file
4
resources/sass/now-ui/now-ui-kit/mixins/_cards.scss
Executable file
@@ -0,0 +1,4 @@
|
||||
@mixin icon-color($color) {
|
||||
box-shadow: 0px 9px 30px -6px $color;
|
||||
color: $color;
|
||||
}
|
||||
0
resources/sass/now-ui/now-ui-kit/mixins/_datepicker.scss
Normal file → Executable file
0
resources/sass/now-ui/now-ui-kit/mixins/_datepicker.scss
Normal file → Executable file
0
resources/sass/now-ui/now-ui-kit/mixins/_dropdown.scss
Normal file → Executable file
0
resources/sass/now-ui/now-ui-kit/mixins/_dropdown.scss
Normal file → Executable file
86
resources/sass/now-ui/now-ui-kit/mixins/_inputs.scss
Normal file → Executable file
86
resources/sass/now-ui/now-ui-kit/mixins/_inputs.scss
Normal file → Executable file
@@ -5,76 +5,42 @@
|
||||
@mixin form-control-placeholder($color, $opacity){
|
||||
.form-control::-moz-placeholder{
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
@include opacity($opacity);
|
||||
}
|
||||
.form-control:-moz-placeholder{
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
@include opacity($opacity);
|
||||
}
|
||||
.form-control::-webkit-input-placeholder{
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
@include opacity($opacity);
|
||||
}
|
||||
.form-control:-ms-input-placeholder{
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
@include opacity($opacity);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin light-form() {
|
||||
@mixin light-form(){
|
||||
border-radius: 0;
|
||||
border:0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
|
||||
@mixin input-sm-padding($padding-vertical, $padding-horizontal) {
|
||||
.form-group.form-group-no-border.input-sm,
|
||||
.input-group.form-group-no-border.input-sm {
|
||||
.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-sm,
|
||||
.input-group.input-sm {
|
||||
.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-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{
|
||||
.form-group.no-border.input-lg,
|
||||
.input-group.no-border.input-lg{
|
||||
.input-group-text{
|
||||
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
|
||||
}
|
||||
|
||||
.form-control{
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
|
||||
& + .input-group-addon{
|
||||
& + .input-group-text{
|
||||
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
|
||||
}
|
||||
}
|
||||
@@ -85,12 +51,12 @@
|
||||
.form-control{
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1;
|
||||
|
||||
& + .input-group-addon{
|
||||
& + .input-group-text{
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon{
|
||||
.input-group-text{
|
||||
padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1;
|
||||
|
||||
& + .form-control{
|
||||
@@ -103,17 +69,17 @@
|
||||
|
||||
|
||||
@mixin input-base-padding($padding-vertical, $padding-horizontal) {
|
||||
.form-group.form-group-no-border,
|
||||
.input-group.form-group-no-border{
|
||||
.form-group.no-border,
|
||||
.input-group.no-border{
|
||||
.form-control{
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
|
||||
& + .input-group-addon{
|
||||
& + .input-group-text{
|
||||
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon{
|
||||
.input-group-text{
|
||||
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
@@ -123,12 +89,12 @@
|
||||
.form-control{
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1;
|
||||
|
||||
& + .input-group-addon{
|
||||
& + .input-group-text{
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon{
|
||||
.input-group-text{
|
||||
padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1;
|
||||
|
||||
& + .form-control,
|
||||
@@ -175,22 +141,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon{
|
||||
.input-group-text{
|
||||
background-color: $color4;
|
||||
border-color: $color1;
|
||||
color: $color2;
|
||||
}
|
||||
|
||||
.input-group-focus{
|
||||
.input-group-addon{
|
||||
.input-group-text{
|
||||
background-color: $color4;
|
||||
border-color: $color3;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.form-group-no-border,
|
||||
.input-group.form-group-no-border{
|
||||
.form-group.no-border,
|
||||
.input-group.no-border{
|
||||
.form-control{
|
||||
background-color: $color5;
|
||||
color: $color2;
|
||||
@@ -203,7 +169,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.form-control + .input-group-addon{
|
||||
.form-control + .input-group-text{
|
||||
background-color: $color5;
|
||||
|
||||
&:focus,
|
||||
@@ -216,21 +182,21 @@
|
||||
|
||||
.form-control{
|
||||
&:focus{
|
||||
& + .input-group-addon{
|
||||
& + .input-group-text{
|
||||
background-color: $color6;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon{
|
||||
.input-group-text{
|
||||
background-color: $color5;
|
||||
border: none;
|
||||
color: $color2;
|
||||
}
|
||||
|
||||
&.input-group-focus{
|
||||
.input-group-addon{
|
||||
.input-group-text{
|
||||
background-color: $color6;
|
||||
color: $color3;
|
||||
}
|
||||
|
||||
0
resources/sass/now-ui/now-ui-kit/mixins/_modals.scss
Normal file → Executable file
0
resources/sass/now-ui/now-ui-kit/mixins/_modals.scss
Normal file → Executable file
257
resources/sass/now-ui/now-ui-kit/mixins/_navbar.scss
Executable file
257
resources/sass/now-ui/now-ui-kit/mixins/_navbar.scss
Executable file
@@ -0,0 +1,257 @@
|
||||
@mixin navbar-responsive() {
|
||||
&.menu-on-left .navbar-translate {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.navbar{
|
||||
.navbar-nav{
|
||||
margin-top: 53px;
|
||||
position: relative;
|
||||
max-height: calc(100vh - 75px);
|
||||
min-height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
&.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: 125px;
|
||||
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;
|
||||
border-radius: $border-radius-small;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// .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);
|
||||
// }
|
||||
|
||||
.top-bar {
|
||||
transform: rotate(0);
|
||||
}
|
||||
.middle-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
.bottom-bar {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.top-bar,
|
||||
.middle-bar,
|
||||
.bottom-bar{
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.toggled {
|
||||
.top-bar {
|
||||
transform: rotate(45deg);
|
||||
transform-origin: 0%;
|
||||
}
|
||||
.bottom-bar {
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: 0%;
|
||||
}
|
||||
.middle-bar {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// @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 !important;
|
||||
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 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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));
|
||||
}
|
||||
|
||||
}
|
||||
0
resources/sass/now-ui/now-ui-kit/mixins/_pages.scss
Normal file → Executable file
0
resources/sass/now-ui/now-ui-kit/mixins/_pages.scss
Normal file → Executable file
39
resources/sass/now-ui/now-ui-kit/mixins/_phpvms.scss
Normal file
39
resources/sass/now-ui/now-ui-kit/mixins/_phpvms.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
/*
|
||||
* Custom styling for phpvms
|
||||
*/
|
||||
|
||||
@mixin input-sm-padding($padding-vertical, $padding-horizontal) {
|
||||
.form-group.form-group-no-border.input-sm,
|
||||
.input-group.form-group-no-border.input-sm {
|
||||
.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-sm,
|
||||
.input-group.input-sm {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
30
resources/sass/now-ui/now-ui-kit/mixins/_popovers.scss
Normal file → Executable file
30
resources/sass/now-ui/now-ui-kit/mixins/_popovers.scss
Normal file → Executable file
@@ -1,25 +1,29 @@
|
||||
@mixin popover-color($color, $text-color) {
|
||||
background-color: $color;
|
||||
color: $text-color;
|
||||
|
||||
|
||||
&.bs-tether-element-attached-right:after{
|
||||
border-left-color:$color;
|
||||
.popover-body{
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
&.bs-tether-element-attached-top:after{
|
||||
border-bottom-color:$color;
|
||||
}
|
||||
|
||||
&.bs-tether-element-attached-bottom:after{
|
||||
border-top-color:$color;
|
||||
}
|
||||
|
||||
&.bs-tether-element-attached-left:after{
|
||||
&.bs-popover-right .arrow:after{
|
||||
border-right-color:$color;
|
||||
}
|
||||
|
||||
.popover-title{
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
|
||||
0
resources/sass/now-ui/now-ui-kit/mixins/_transparency.scss
Normal file → Executable file
0
resources/sass/now-ui/now-ui-kit/mixins/_transparency.scss
Normal file → Executable file
23
resources/sass/now-ui/now-ui-kit/mixins/_vendor-prefixes.scss
Normal file → Executable file
23
resources/sass/now-ui/now-ui-kit/mixins/_vendor-prefixes.scss
Normal file → Executable file
@@ -20,6 +20,14 @@
|
||||
transition: all $time $type;
|
||||
}
|
||||
|
||||
@mixin transition-on-prop($prop ,$time, $type){
|
||||
-webkit-transition: $prop $time $type;
|
||||
-moz-transition: $prop $time $type;
|
||||
-o-transition: $prop $time $type;
|
||||
-ms-transition: all $time $type;
|
||||
transition: $prop $time $type;
|
||||
}
|
||||
|
||||
@mixin rotate-180(){
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
||||
-webkit-transform: rotate(180deg);
|
||||
@@ -27,6 +35,13 @@
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@mixin transform-scale($value){
|
||||
-webkit-transform: scale($value);
|
||||
-moz-transform: scale($value);
|
||||
-o-transform: scale($value);
|
||||
-ms-transform: scale($value);
|
||||
transform: scale($value);
|
||||
}
|
||||
|
||||
@mixin transform-translate-x($value){
|
||||
-webkit-transform: translate3d($value, 0, 0);
|
||||
@@ -36,6 +51,14 @@
|
||||
transform: translate3d($value, 0, 0);
|
||||
}
|
||||
|
||||
@mixin transform-translate-y-dropdown($value) {
|
||||
-webkit-transform: translate3d(0,$value,0) !important;
|
||||
-moz-transform: translate3d(0,$value,0) !important;
|
||||
-o-transform: translate3d(0,$value,0) !important;
|
||||
-ms-transform: translate3d(0,$value,0) !important;
|
||||
transform: translate3d(0,$value,0) !important;
|
||||
}
|
||||
|
||||
@mixin transform-translate-y($value){
|
||||
-webkit-transform: translate3d(0,$value,0);
|
||||
-moz-transform: translate3d(0,$value,0);
|
||||
|
||||
0
resources/sass/now-ui/now-ui-kit/plugins/_plugin-bootstrap-switch.scss
Normal file → Executable file
0
resources/sass/now-ui/now-ui-kit/plugins/_plugin-bootstrap-switch.scss
Normal file → Executable file
18
resources/sass/now-ui/now-ui-kit/plugins/_plugin-datepicker.scss
Normal file → Executable file
18
resources/sass/now-ui/now-ui-kit/plugins/_plugin-datepicker.scss
Normal file → Executable file
@@ -114,7 +114,7 @@
|
||||
font-weight: $font-weight-light;
|
||||
font-size: $font-size-base;
|
||||
border: none;
|
||||
z-index: -1;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -123,6 +123,17 @@
|
||||
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;
|
||||
@@ -508,3 +519,8 @@
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
.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{
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@@ -1,71 +1,81 @@
|
||||
/*! nouislider - 9.1.0 - 2016-12-10 16:00:32 */
|
||||
|
||||
|
||||
/*! nouislider - 13.1.4 */
|
||||
/* 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;
|
||||
-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;
|
||||
position: relative;
|
||||
direction: ltr;
|
||||
}
|
||||
.noUi-base {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1; /* Fix 401 */
|
||||
.noUi-base,
|
||||
.noUi-connects {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.noUi-connect {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
/* Wrapper for all connect elements.
|
||||
*/
|
||||
.noUi-connects {
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
.noUi-connect,
|
||||
.noUi-origin {
|
||||
position: absolute;
|
||||
height: 0;
|
||||
width: 0;
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
-ms-transform-origin: 0 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
/* Offset direction
|
||||
*/
|
||||
html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
/* Give origins 0 height/width so they don't interfere with clicking the
|
||||
* connect elements.
|
||||
*/
|
||||
.noUi-vertical .noUi-origin {
|
||||
width: 0;
|
||||
}
|
||||
.noUi-horizontal .noUi-origin {
|
||||
height: 0;
|
||||
}
|
||||
.noUi-handle {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
}
|
||||
.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;
|
||||
-webkit-transition: transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.noUi-state-drag * {
|
||||
cursor: inherit !important;
|
||||
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;
|
||||
height: 1px;
|
||||
}
|
||||
.noUi-horizontal .noUi-handle {
|
||||
border-radius: 50%;
|
||||
@@ -74,24 +84,31 @@
|
||||
height:15px;
|
||||
width:15px;
|
||||
cursor:pointer;
|
||||
margin-left: -10px;
|
||||
margin-top: -7px;
|
||||
outline: none;
|
||||
}
|
||||
.noUi-vertical {
|
||||
width: 18px;
|
||||
}
|
||||
.noUi-vertical .noUi-handle {
|
||||
width: 28px;
|
||||
height: 34px;
|
||||
left: -6px;
|
||||
top: -17px;
|
||||
width: 28px;
|
||||
height: 34px;
|
||||
left: -6px;
|
||||
top: -17px;
|
||||
}
|
||||
html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
|
||||
right: -15px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
/* Styling;
|
||||
* Giving the connect element a border radius causes issues with using transform: scale
|
||||
*/
|
||||
.noUi-target {
|
||||
background-color: rgba(182, 182, 182, .3);
|
||||
border-radius: 3px;
|
||||
.noUi-target {
|
||||
background-color: rgba(182, 182, 182, .3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.noUi-connects {
|
||||
border-radius: 3px;
|
||||
}
|
||||
.noUi-connect {
|
||||
background: $default-color;
|
||||
@@ -99,14 +116,13 @@
|
||||
-webkit-transition: background 450ms;
|
||||
transition: background 450ms;
|
||||
}
|
||||
|
||||
/* Handles and cursors;
|
||||
*/
|
||||
.noUi-draggable {
|
||||
cursor: ew-resize;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.noUi-vertical .noUi-draggable {
|
||||
cursor: ns-resize;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
.noUi-handle {
|
||||
// border: 1px solid #D9D9D9;
|
||||
@@ -129,136 +145,154 @@
|
||||
-o-transform: scale3d(1.5,1.5,1);
|
||||
transform: scale3d(1.5,1.5,1);
|
||||
}
|
||||
|
||||
/* Handle stripes;
|
||||
*/
|
||||
.noUi-handle:before,
|
||||
.noUi-handle:after {
|
||||
display: none;
|
||||
}
|
||||
.noUi-handle:after {
|
||||
left: 17px;
|
||||
}
|
||||
.noUi-vertical .noUi-handle:before,
|
||||
.noUi-vertical .noUi-handle:after {
|
||||
width: 14px;
|
||||
height: 1px;
|
||||
left: 6px;
|
||||
top: 14px;
|
||||
}
|
||||
.noUi-vertical .noUi-handle:after {
|
||||
top: 17px;
|
||||
}
|
||||
/* Disabled state;
|
||||
*/
|
||||
|
||||
[disabled] .noUi-connect {
|
||||
background: #B8B8B8;
|
||||
background: #B8B8B8;
|
||||
}
|
||||
[disabled].noUi-target,
|
||||
[disabled].noUi-handle,
|
||||
[disabled] .noUi-handle {
|
||||
cursor: not-allowed;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Base;
|
||||
*
|
||||
*/
|
||||
.noUi-pips,
|
||||
.noUi-pips * {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.noUi-pips {
|
||||
position: absolute;
|
||||
color: #999;
|
||||
position: absolute;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Values;
|
||||
*
|
||||
*/
|
||||
.noUi-value {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
.noUi-value-sub {
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* Markings;
|
||||
*
|
||||
*/
|
||||
.noUi-marker {
|
||||
position: absolute;
|
||||
background: #CCC;
|
||||
position: absolute;
|
||||
background: #CCC;
|
||||
}
|
||||
.noUi-marker-sub {
|
||||
background: #AAA;
|
||||
background: #AAA;
|
||||
}
|
||||
.noUi-marker-large {
|
||||
background: #AAA;
|
||||
background: #AAA;
|
||||
}
|
||||
|
||||
/* Horizontal layout;
|
||||
*
|
||||
*/
|
||||
.noUi-pips-horizontal {
|
||||
padding: 10px 0;
|
||||
height: 80px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
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);
|
||||
-webkit-transform: translate(-50%, 50%);
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
.noUi-rtl .noUi-value-horizontal {
|
||||
-webkit-transform: translate(50%, 50%);
|
||||
transform: translate(50%, 50%);
|
||||
}
|
||||
|
||||
.noUi-marker-horizontal.noUi-marker {
|
||||
margin-left: -1px;
|
||||
width: 2px;
|
||||
height: 5px;
|
||||
margin-left: -1px;
|
||||
width: 2px;
|
||||
height: 5px;
|
||||
}
|
||||
.noUi-marker-horizontal.noUi-marker-sub {
|
||||
height: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.noUi-marker-horizontal.noUi-marker-large {
|
||||
height: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
/* Vertical layout;
|
||||
*
|
||||
*/
|
||||
.noUi-pips-vertical {
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
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;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%, 0);
|
||||
padding-left: 25px;
|
||||
}
|
||||
.noUi-rtl .noUi-value-vertical {
|
||||
-webkit-transform: translate(0, 50%);
|
||||
transform: translate(0, 50%);
|
||||
}
|
||||
|
||||
.noUi-marker-vertical.noUi-marker {
|
||||
width: 5px;
|
||||
height: 2px;
|
||||
margin-top: -1px;
|
||||
width: 5px;
|
||||
height: 2px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.noUi-marker-vertical.noUi-marker-sub {
|
||||
width: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
.noUi-marker-vertical.noUi-marker-large {
|
||||
width: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.noUi-tooltip {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: 1px solid #D9D9D9;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: 1px solid #D9D9D9;
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.noUi-horizontal .noUi-tooltip {
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
left: 50%;
|
||||
bottom: 120%;
|
||||
-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%;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
top: 50%;
|
||||
right: 120%;
|
||||
}
|
||||
|
||||
|
||||
.slider {
|
||||
|
||||
&.slider-neutral{
|
||||
|
||||
113
resources/sass/now-ui/now-ui-kit/plugins/_plugin-perfect-scrollbar.scss
Executable file
113
resources/sass/now-ui/now-ui-kit/plugins/_plugin-perfect-scrollbar.scss
Executable file
@@ -0,0 +1,113 @@
|
||||
/* perfect-scrollbar v0.6.13 */
|
||||
.ps-container {
|
||||
-ms-touch-action: auto;
|
||||
touch-action: auto;
|
||||
overflow: hidden !important;
|
||||
-ms-overflow-style: none; }
|
||||
@supports (-ms-overflow-style: none) {
|
||||
.ps-container {
|
||||
overflow: auto !important; } }
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
.ps-container {
|
||||
overflow: auto !important; } }
|
||||
.ps-container.ps-active-x > .ps-scrollbar-x-rail,
|
||||
.ps-container.ps-active-y > .ps-scrollbar-y-rail {
|
||||
display: block;
|
||||
background-color: transparent; }
|
||||
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
|
||||
background-color: #eee;
|
||||
opacity: 0.9; }
|
||||
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
|
||||
background-color: #999;
|
||||
height: 11px; }
|
||||
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
|
||||
background-color: #eee;
|
||||
opacity: 0.9; }
|
||||
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
|
||||
background-color: #999;
|
||||
width: 11px; }
|
||||
.ps-container > .ps-scrollbar-x-rail {
|
||||
display: none;
|
||||
position: absolute;
|
||||
/* please don't change 'position' */
|
||||
opacity: 0;
|
||||
-webkit-transition: background-color .2s linear, opacity .2s linear;
|
||||
-o-transition: background-color .2s linear, opacity .2s linear;
|
||||
-moz-transition: background-color .2s linear, opacity .2s linear;
|
||||
transition: background-color .2s linear, opacity .2s linear;
|
||||
bottom: 0px;
|
||||
/* there must be 'bottom' for ps-scrollbar-x-rail */
|
||||
height: 15px; }
|
||||
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
|
||||
position: absolute;
|
||||
/* please don't change 'position' */
|
||||
background-color: #aaa;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
-webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
|
||||
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
|
||||
-o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
|
||||
-moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
|
||||
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
|
||||
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
|
||||
bottom: 2px;
|
||||
/* there must be 'bottom' for ps-scrollbar-x */
|
||||
height: 6px; }
|
||||
.ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
|
||||
height: 11px; }
|
||||
.ps-container > .ps-scrollbar-y-rail {
|
||||
display: none;
|
||||
position: absolute;
|
||||
/* please don't change 'position' */
|
||||
opacity: 0;
|
||||
-webkit-transition: background-color .2s linear, opacity .2s linear;
|
||||
-o-transition: background-color .2s linear, opacity .2s linear;
|
||||
-moz-transition: background-color .2s linear, opacity .2s linear;
|
||||
transition: background-color .2s linear, opacity .2s linear;
|
||||
right: 0;
|
||||
/* there must be 'right' for ps-scrollbar-y-rail */
|
||||
width: 15px; }
|
||||
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
|
||||
position: absolute;
|
||||
/* please don't change 'position' */
|
||||
background-color: #aaa;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
-webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
|
||||
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
|
||||
-o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
|
||||
-moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
|
||||
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
|
||||
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
|
||||
right: 2px;
|
||||
/* there must be 'right' for ps-scrollbar-y */
|
||||
width: 6px; }
|
||||
.ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
|
||||
width: 11px; }
|
||||
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
|
||||
background-color: #eee;
|
||||
opacity: 0.9; }
|
||||
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
|
||||
background-color: #999;
|
||||
height: 11px; }
|
||||
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
|
||||
background-color: #eee;
|
||||
opacity: 0.9; }
|
||||
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
|
||||
background-color: #999;
|
||||
width: 11px; }
|
||||
.ps-container:hover > .ps-scrollbar-x-rail,
|
||||
.ps-container:hover > .ps-scrollbar-y-rail {
|
||||
opacity: 0.6; }
|
||||
.ps-container:hover > .ps-scrollbar-x-rail:hover {
|
||||
background-color: #eee;
|
||||
opacity: 0.9; }
|
||||
.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
|
||||
background-color: #999; }
|
||||
.ps-container:hover > .ps-scrollbar-y-rail:hover {
|
||||
background-color: #eee;
|
||||
opacity: 0.9; }
|
||||
.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
|
||||
background-color: #999; }
|
||||
@@ -33,16 +33,9 @@
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-toggleable-md" style="background: #067ec1;">
|
||||
<nav class="navbar navbar-expand-lg " style="background: #067ec1;">
|
||||
<div class="container" style="width: 85%!important;">
|
||||
<div class="navbar-translate">
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
|
||||
data-target="#navigation" aria-controls="navigation-index" aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-bar bar1"></span>
|
||||
<span class="navbar-toggler-bar bar2"></span>
|
||||
<span class="navbar-toggler-bar bar3"></span>
|
||||
</button>
|
||||
<p class="navbar-brand text-white" data-placement="bottom" target="_blank">
|
||||
<a href="{{ url('/') }}">
|
||||
<img src="{{ public_asset('/assets/img/logo_blue_bg.svg') }}" width="135px" style=""/>
|
||||
@@ -85,6 +78,7 @@
|
||||
|
||||
{{-- Start of the required tags block. Don't remove these or things will break!! --}}
|
||||
<script src="{{ public_mix('/assets/global/js/vendor.js') }}"></script>
|
||||
<script src="{{ public_mix('/assets/frontend/js/vendor.js') }}"></script>
|
||||
<script src="{{ public_mix('/assets/frontend/js/app.js') }}"></script>
|
||||
@yield('scripts')
|
||||
|
||||
|
||||
@@ -11,8 +11,7 @@
|
||||
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
|
||||
<link href="{{ public_asset('/assets/frontend/css/bootstrap.min.css') }}" rel="stylesheet" />
|
||||
<link href="{{ public_asset('/assets/frontend/css/now-ui-kit.css') }}" rel="stylesheet" />
|
||||
<link href="{{ public_mix('/assets/frontend/css/vendor.min.css') }}" rel="stylesheet" />
|
||||
@yield('css')
|
||||
</head>
|
||||
|
||||
|
||||
@@ -2,7 +2,19 @@
|
||||
@section('title', __('common.login'))
|
||||
|
||||
@section('content')
|
||||
<div class="col-md-4 content-center">
|
||||
<div class="navbar-translate">
|
||||
<a class="navbar-brand" href="https://demos.creative-tim.com/now-ui-kit/index.html" rel="tooltip"
|
||||
title="Designed by Invision. Coded by Creative Tim" data-placement="bottom" target="_blank">
|
||||
Now Ui Kit
|
||||
</a>
|
||||
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
|
||||
aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-bar top-bar"></span>
|
||||
<span class="navbar-toggler-bar middle-bar"></span>
|
||||
<span class="navbar-toggler-bar bottom-bar"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-4 ml-auto mr-auto content-center">
|
||||
<div class="card card-login card-plain">
|
||||
{{ Form::open(['url' => url('/login'), 'method' => 'post']) }}
|
||||
<div class="header header-primary text-center">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@foreach($flights as $flight)
|
||||
<div class="card border-blue-bottom">
|
||||
<div class="card-block" style="min-height: 0">
|
||||
<div class="card-body" style="min-height: 0">
|
||||
<div class="row">
|
||||
<div class="col-sm-9">
|
||||
<h5>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ul class="navbar-nav">
|
||||
<ul class="navbar-nav align-middle">
|
||||
@if(Auth::check())
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ route('frontend.dashboard.index') }}">
|
||||
@@ -47,7 +47,6 @@
|
||||
</li>
|
||||
|
||||
@else
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ route('frontend.flights.index') }}">
|
||||
<i class="fab fa-avianex"></i>
|
||||
@@ -61,26 +60,11 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ route('frontend.profile.index') }}">
|
||||
<i class="far fa-user"></i>
|
||||
<p>@lang('common.profile')</p>
|
||||
<a class="nav-link" href="{{ route('frontend.downloads.index') }}">
|
||||
<i class="fas fa-download"></i>
|
||||
<p>{{ trans_choice('common.download', 2) }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ route('frontend.downloads.index') }}">
|
||||
<i class="fas fa-download"></i>
|
||||
<p>{{ trans_choice('common.download', 2) }}</p>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@role('admin')
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url('/admin') }}">
|
||||
<i class="fas fa-circle-notch"></i>
|
||||
<p>@lang('common.administration')</p>
|
||||
</a>
|
||||
</li>
|
||||
@endrole
|
||||
|
||||
{{-- Show the module links for being logged in --}}
|
||||
@foreach($moduleSvc->getFrontendLinks($logged_in=true) as &$link)
|
||||
@@ -92,11 +76,32 @@
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url('/logout') }}">
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
<p>@lang('common.logout')</p>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
@if (Auth::user()->avatar == null)
|
||||
<img src="{{ Auth::user()->gravatar(38) }}" style=" height: 38px; width: 38px;">
|
||||
@else
|
||||
<img src="{{ Auth::user()->avatar->url }}" style="height: 38px; width: 38px;">
|
||||
@endif
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
|
||||
|
||||
<a class="dropdown-item" href="{{ route('frontend.profile.index') }}">
|
||||
<i class="far fa-user"></i> @lang('common.profile')
|
||||
</a>
|
||||
|
||||
@role('admin')
|
||||
<a class="dropdown-item" href="{{ url('/admin') }}">
|
||||
<i class="fas fa-circle-notch"></i> @lang('common.administration')
|
||||
</a>
|
||||
@endrole
|
||||
|
||||
<a class="dropdown-item" href="{{ url('/logout') }}">
|
||||
<i class="fas fa-sign-out-alt"></i> @lang('common.logout')
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
</ul>
|
||||
|
||||
@@ -11,47 +11,77 @@
|
||||
<img src="{{ $user->avatar->url }}" style="width: 123px;">
|
||||
@endif
|
||||
</div>
|
||||
<h3 class="title">{{ $user->name }}</h3>
|
||||
<h6><span class="flag-icon flag-icon-{{ $user->country }}"></span></h6>
|
||||
<h6>{{ $user->ident }}</h6>
|
||||
<h6>{{ $user->rank->name }}</h6>
|
||||
<div><br /></div>
|
||||
<div class="social-description">
|
||||
<h2>{{ $user->name }}</h2>
|
||||
<p>{{ $user->ident }}</p>
|
||||
</div>
|
||||
<p class="description" style="color: #9A9A9A;">
|
||||
{{ $user->airline->name }}
|
||||
</p>
|
||||
<h6><span class="flag-icon flag-icon-{{ $user->country }}"></span></h6>
|
||||
<div class="social-description">
|
||||
<h2>{{ $user->rank->name }}</h2>
|
||||
<p>Rank</p>
|
||||
</div>
|
||||
@if($user->home_airport)
|
||||
<div class="social-description">
|
||||
<h2>{{ $user->home_airport->icao }}</h2>
|
||||
<p>@lang('airports.home')</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-8 content-center">
|
||||
<div class="content">
|
||||
<div class="social-description">
|
||||
<h2>{{ $user->flights}}</h2>
|
||||
<p>{{ trans_choice('common.flight', $user->flights) }}</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">{{ $user->flights}}</h2>
|
||||
<p class="card-text">Flights</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<div class="social-description">
|
||||
<h2>{{ \App\Facades\Utils::minutesToTimeString($user->flight_time, false) }}</h2>
|
||||
<p>@lang('flights.flighthours')</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@if($user->current_airport)
|
||||
<div class="col-lg-6">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<div class="social-description">
|
||||
<h2>{{ $user->current_airport->icao }}</h2>
|
||||
<p>@lang('airports.current')</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="social-description">
|
||||
<h2>{{ \App\Facades\Utils::minutesToTimeString($user->flight_time, false) }}</h2>
|
||||
<p>@lang('flights.flighthours')</p>
|
||||
|
||||
@if(setting('pilots.allow_transfer_hours') === true)
|
||||
<div class="col-lg-6">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<div class="social-description">
|
||||
<h2>{{ \App\Facades\Utils::minutesToHours($user->transfer_time) }}h</h2>
|
||||
<p>@lang('profile.transferhours')</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if($user->home_airport)
|
||||
<div class="social-description">
|
||||
<h2>{{ $user->home_airport->icao }}</h2>
|
||||
<p>@lang('airports.home')</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($user->current_airport)
|
||||
<div class="social-description">
|
||||
<h2>{{ $user->current_airport->icao }}</h2>
|
||||
<p>@lang('airports.current')</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if(setting('pilots.allow_transfer_hours') === true)
|
||||
<div class="social-description">
|
||||
<h2>{{ \App\Facades\Utils::minutesToHours($user->transfer_time) }}h</h2>
|
||||
<p>@lang('profile.transferhours')</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user