admin styling
This commit is contained in:
parent
86d28aafd6
commit
0986cddae1
File diff suppressed because it is too large
Load Diff
604
public/assets/admin/css/vendor.min.css
vendored
604
public/assets/admin/css/vendor.min.css
vendored
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,7 @@
|
||||
{
|
||||
"/assets/frontend/js/app.js": "/assets/frontend/js/app.js?id=3d5b0dff38050f6b5e0b",
|
||||
"/assets/frontend/css/now-ui-kit.css": "/assets/frontend/css/now-ui-kit.css?id=a64d6e004c25bd2720b2",
|
||||
"/assets/admin/css/vendor.min.css": "/assets/admin/css/vendor.min.css?id=61da6b300cd04cca6799",
|
||||
"/assets/admin/css/vendor.min.css": "/assets/admin/css/vendor.min.css?id=7b067ced063f89165b11",
|
||||
"/assets/admin/js/app.js": "/assets/admin/js/app.js?id=926a7c24ec36533523e3",
|
||||
"/assets/installer/js/app.js": "/assets/installer/js/app.js?id=c65781eda730445d666e",
|
||||
"/assets/fonts/glyphicons-halflings-regular.woff2": "/assets/fonts/glyphicons-halflings-regular.woff2?id=b5b5055c6d812c0f9f0d",
|
||||
@ -9,7 +9,7 @@
|
||||
"/assets/admin/img/clear.png": "/assets/admin/img/clear.png?id=0e92f4c3efc6988a3c96",
|
||||
"/assets/admin/img/loading.gif": "/assets/admin/img/loading.gif?id=90a4b76b4f11558691f6",
|
||||
"/assets/global/js/jquery.js": "/assets/global/js/jquery.js?id=6a07da9fae934baf3f74",
|
||||
"/assets/admin/css/vendor.css": "/assets/admin/css/vendor.css?id=7453fe9b5675cd1d759c",
|
||||
"/assets/admin/css/vendor.css": "/assets/admin/css/vendor.css?id=724120aacdfd53f887d8",
|
||||
"/assets/admin/js/vendor.js": "/assets/admin/js/vendor.js?id=aa7db4bedfe23409f625",
|
||||
"/assets/admin/css/blue.png": "/assets/admin/css/blue.png?id=753a3c0dec86d3a38d9c",
|
||||
"/assets/admin/css/blue@2x.png": "/assets/admin/css/blue@2x.png?id=97da23d47b838cbd4bef",
|
||||
|
@ -1,91 +1,60 @@
|
||||
input {
|
||||
margin-top: 5px;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
cursor: text;
|
||||
//font-family: "Inconsolata", "Monaco", "Consolas", "Lucida Console", monospace !important;
|
||||
font-family: "Avenir-light", "AvenirLTStd-Light", sans-serif !important;
|
||||
}
|
||||
|
||||
.form-control::-moz-placeholder{
|
||||
@include placeholder($medium-gray,1);
|
||||
}
|
||||
.form-control:-moz-placeholder{
|
||||
@include placeholder($medium-gray,1);
|
||||
}
|
||||
.form-control::-webkit-input-placeholder{
|
||||
@include placeholder($medium-gray,1);
|
||||
}
|
||||
.form-control:-ms-input-placeholder{
|
||||
@include placeholder($medium-gray,1);
|
||||
}
|
||||
@include form-control-placeholder($medium-gray, 1);
|
||||
|
||||
.form-control {
|
||||
font-family: "Avenir-light", "AvenirLTStd-Light", sans-serif !important;
|
||||
display: block;
|
||||
width: 100%;
|
||||
/*font-size: $font-size-base;*/
|
||||
line-height: 1.846;
|
||||
color: #666666;
|
||||
border: medium none;
|
||||
border-radius: $border-radius-extra-small;
|
||||
border-bottom: 2px solid #0f5b8c;
|
||||
vertical-align: middle;
|
||||
/*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);*/
|
||||
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
||||
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
@include input-size($padding-small-vertical, $padding-small-horizontal, 30px);
|
||||
border-radius: 0;
|
||||
background-color: $transparent-bg;
|
||||
border: 1px solid $light-gray;
|
||||
color: $black-color;
|
||||
line-height: 1em;
|
||||
font-size: $font-size-small;
|
||||
@include transition-input-focus-color();
|
||||
@include box-shadow(none);
|
||||
|
||||
/*background-color: $gray-input-bg;
|
||||
border: medium none;
|
||||
border-radius: $border-radius-base;
|
||||
color: $font-color;
|
||||
font-size: $font-size-base;
|
||||
transition: background-color 0.3s ease 0s;
|
||||
@include input-size($padding-base-vertical, $padding-base-horizontal, $height-base);
|
||||
@include box-shadow(none);*/
|
||||
.has-success & {
|
||||
border-color: $light-gray;
|
||||
}
|
||||
|
||||
&:focus{
|
||||
background-color: $white-bg;
|
||||
//@include box-shadow(none);
|
||||
outline: 0 !important;
|
||||
border-bottom: 2px solid #2196f3;
|
||||
/*-webkit-box-shadow: inset 0 -2px 0 #2196f3;
|
||||
box-shadow: inset 0 -2px 0 #2196f3;*/
|
||||
&:focus {
|
||||
border: 1px solid $brand-primary;
|
||||
@include box-shadow(none);
|
||||
outline: 0 !important;
|
||||
color: $black-color;
|
||||
|
||||
& + .input-group-addon,
|
||||
& ~ .input-group-addon {
|
||||
border: 1px solid $brand-primary;
|
||||
background-color: $transparent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success &,
|
||||
.has-error &,
|
||||
.has-success &:focus,
|
||||
.has-error &:focus{
|
||||
.has-error &:focus {
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
.has-success &{
|
||||
background-color: $success-input-bg;
|
||||
color: $success-color;
|
||||
&.border-input{
|
||||
border: 1px solid $success-color;
|
||||
.has-danger &,
|
||||
.has-success & {
|
||||
&.form-control-success,
|
||||
&.form-control-danger {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
.has-success &:focus{
|
||||
background-color: $white-bg;
|
||||
}
|
||||
.has-error &{
|
||||
background-color: $danger-input-bg;
|
||||
color: $danger-color;
|
||||
&.border-input{
|
||||
border: 1px solid $danger-color;
|
||||
}
|
||||
}
|
||||
.has-error &:focus{
|
||||
background-color: $white-bg;
|
||||
}
|
||||
|
||||
& + .form-control-feedback{
|
||||
border-radius: $border-radius-large;
|
||||
.has-danger & {
|
||||
background-color: lighten($danger-color, 30%);
|
||||
border-color: lighten($danger-color, 30%);
|
||||
color: $danger-color;
|
||||
|
||||
&:focus {
|
||||
background-color: $opacity-gray-3;
|
||||
}
|
||||
}
|
||||
|
||||
& + .form-control-feedback {
|
||||
border-radius: $border-radius-extra-small;
|
||||
font-size: $font-size-base;
|
||||
margin-top: -7px;
|
||||
position: absolute;
|
||||
@ -93,68 +62,141 @@ input {
|
||||
top: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
&.border-input{
|
||||
border: 1px solid $table-line-color;
|
||||
}
|
||||
.open &{
|
||||
|
||||
.open & {
|
||||
border-radius: $border-radius-extra-small $border-radius-extra-small 0 0;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
& + .input-group-addon {
|
||||
background-color: $white-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.input-lg{
|
||||
height: 55px;
|
||||
padding: $padding-large-vertical $padding-large-horizontal;
|
||||
font-size: 17px;
|
||||
line-height: 1.3333333;
|
||||
border-radius: 3px;
|
||||
.has-success,
|
||||
.has-danger {
|
||||
&:after {
|
||||
font-family: 'Nucleo Outline';
|
||||
content: "\ea22";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 35px;
|
||||
top: 12px;
|
||||
color: $success-color;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&.input-lg {
|
||||
&:after {
|
||||
font-size: 13px;
|
||||
top: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-error{
|
||||
.form-control-feedback, .control-label{
|
||||
.has-danger {
|
||||
&:after {
|
||||
content: "\ea53";
|
||||
color: $danger-color;
|
||||
}
|
||||
}
|
||||
.has-success{
|
||||
.form-control-feedback, .control-label{
|
||||
color: $success-color;
|
||||
|
||||
@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);
|
||||
|
||||
.form-group.form-group-no-border,
|
||||
.input-group.form-group-no-border {
|
||||
.form-control,
|
||||
.form-control + .input-group-addon {
|
||||
background-color: $opacity-gray-3;
|
||||
border: medium none;
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active {
|
||||
border: medium none;
|
||||
background-color: $opacity-gray-5;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
&:focus {
|
||||
& + .input-group-addon {
|
||||
background-color: $opacity-gray-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
background-color: $opacity-gray-3;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
.form-control-feedback, .control-label {
|
||||
color: $danger-color;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success {
|
||||
.form-control-feedback, .control-label {
|
||||
color: $success-color;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
background-color: $gray-input-bg;
|
||||
border: medium none;
|
||||
border-radius: $border-radius-base;
|
||||
background-color: $white-bg;
|
||||
border: 1px solid $light-gray;
|
||||
border-radius: $border-radius-extra-small;
|
||||
color: $dark-background;
|
||||
padding: $padding-base-vertical - 1 0 $padding-base-vertical - 1 $padding-base-horizontal - 1;
|
||||
|
||||
@include transition-input-focus-color();
|
||||
|
||||
.has-success &,
|
||||
.has-error &{
|
||||
.has-danger & {
|
||||
background-color: $white-color;
|
||||
}
|
||||
.has-error .form-control:focus + &{
|
||||
.has-danger .form-control:focus + & {
|
||||
color: $danger-color;
|
||||
}
|
||||
.has-success .form-control:focus + &{
|
||||
.has-success .form-control:focus + & {
|
||||
color: $success-color;
|
||||
}
|
||||
.form-control:focus + &,
|
||||
.form-control:focus ~ &{
|
||||
background-color: $white-color;
|
||||
|
||||
& + .form-control,
|
||||
& ~ .form-control {
|
||||
@include input-size($padding-base-vertical - 1, $padding-base-horizontal);
|
||||
padding-left: 18px;
|
||||
}
|
||||
}
|
||||
.border-input{
|
||||
.input-group-addon{
|
||||
border: solid 1px $table-line-color;
|
||||
|
||||
.input-group-focus {
|
||||
.input-group-addon {
|
||||
background-color: $white-bg;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
&.form-group-no-border {
|
||||
.input-group-addon {
|
||||
background-color: $opacity-gray-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-group{
|
||||
margin-bottom: 15px;
|
||||
|
||||
.input-group,
|
||||
.form-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.input-group[disabled]{
|
||||
.input-group-addon{
|
||||
|
||||
.input-group[disabled] {
|
||||
.input-group-addon {
|
||||
background-color: $light-gray;
|
||||
}
|
||||
}
|
||||
.input-group .form-control:first-child,
|
||||
|
||||
/*.input-group .form-control:first-child,
|
||||
.input-group-addon:first-child,
|
||||
.input-group-btn:first-child > .dropdown-toggle,
|
||||
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
|
||||
@ -165,38 +207,50 @@ input {
|
||||
.input-group-btn:last-child > .dropdown-toggle,
|
||||
.input-group-btn:first-child > .btn:not(:first-child) {
|
||||
border-left: 0 none;
|
||||
}
|
||||
}*/
|
||||
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
|
||||
background-color: $light-gray;
|
||||
color: $default-color;
|
||||
cursor: not-allowed;
|
||||
@include placeholder($dark-gray,1);
|
||||
}
|
||||
.form-control[disabled]::-moz-placeholder{
|
||||
@include placeholder($dark-gray,1);
|
||||
}
|
||||
.form-control[disabled]:-moz-placeholder{
|
||||
@include placeholder($medium-gray,1);
|
||||
}
|
||||
.form-control[disabled]::-webkit-input-placeholder{
|
||||
@include placeholder($medium-gray,1);
|
||||
}
|
||||
.form-control[disabled]:-ms-input-placeholder{
|
||||
@include placeholder($medium-gray,1);
|
||||
}
|
||||
.input-group-btn .btn{
|
||||
|
||||
.input-group-btn .btn {
|
||||
border-width: $border-thin;
|
||||
padding: $padding-round-vertical $padding-base-horizontal;
|
||||
padding: $padding-btn-vertical $padding-base-horizontal;
|
||||
}
|
||||
.input-group-btn .btn-default:not(.btn-fill){
|
||||
|
||||
.input-group-btn .btn-default:not(.btn-fill) {
|
||||
border-color: $medium-gray;
|
||||
}
|
||||
|
||||
.input-group-btn:last-child > .btn{
|
||||
.input-group-btn:last-child > .btn {
|
||||
margin-left: 0;
|
||||
}
|
||||
textarea.form-control{
|
||||
|
||||
textarea.form-control {
|
||||
max-width: 100%;
|
||||
padding: 10px 18px;
|
||||
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-radius: 0;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
@include box-shadow(none);
|
||||
border: 1px solid $brand-primary;
|
||||
background-color: $transparent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success,
|
||||
.has-danger {
|
||||
|
||||
&.form-group .form-control,
|
||||
&.form-group.form-group-no-border .form-control {
|
||||
padding-right: $padding-input-horizontal + 21;
|
||||
}
|
||||
}
|
||||
|
@ -6,6 +6,7 @@
|
||||
z-index: 1;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
color: $card-black-color;
|
||||
.sidebar-wrapper{
|
||||
position: relative;
|
||||
max-height: none;
|
||||
@ -155,7 +156,7 @@
|
||||
}
|
||||
|
||||
&[data-active-color="primary"]{
|
||||
@include sidebar-active-color($primary-color);
|
||||
@include sidebar-active-color($default-color);
|
||||
}
|
||||
&[data-active-color="info"]{
|
||||
@include sidebar-active-color($info-color);
|
||||
@ -173,7 +174,8 @@
|
||||
}
|
||||
|
||||
.main-panel{
|
||||
background-color: $bg-nude;
|
||||
//background-color: $bg-nude;
|
||||
background-color: $white-navbar;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
float: right;
|
||||
|
@ -18,6 +18,8 @@ $table-line-color: #CCC5B9 !default;
|
||||
$muted-color: #a49e93 !default;
|
||||
|
||||
$black-bg: rgba(30,30,30,.97) !default;
|
||||
$transparent-bg: transparent !default;
|
||||
$dark-background: #555555 !default;
|
||||
|
||||
$black-color: #333333 !default;
|
||||
$black-hr: #444444 !default;
|
||||
@ -38,8 +40,11 @@ $success-input-bg: #fffcf5 !default;
|
||||
$other-medium-gray: #A49E93 !default;
|
||||
$transparent-bg: transparent !default;
|
||||
|
||||
$default-color: #2f2d2a !default; //#66615B !default;
|
||||
$default-bg: #66615B !default;
|
||||
$black-color: #2c2c2c !default;
|
||||
//$default-color: #2f2d2a !default; //#66615B !default;
|
||||
$default-color: #2c2c2c !default; //#66615B !default;
|
||||
//$default-bg: #66615B !default;
|
||||
$default-bg: #FFFFFF !default;
|
||||
$default-states-color: #403D39 !default;
|
||||
|
||||
//$primary-color: #7A9E9F !default;
|
||||
@ -52,18 +57,28 @@ $success-color: #18ce0f !default;
|
||||
$success-bg: darken($success-color, 5%) !default;
|
||||
$success-states-color: darken($success-color, 5%) !default;
|
||||
|
||||
$info-color: #2CA8FF !default;
|
||||
$info-bg: #109CFF !default;
|
||||
$info-states-color: #3091B2 !default;
|
||||
|
||||
$warning-color: #F3BB45 !default;
|
||||
$warning-bg: darken($warning-color, 5%) !default;
|
||||
$warning-states-color: #BB992F !default;
|
||||
$info-color: #067ec1 !default; //#2CA8FF !default;
|
||||
$info-states-color: #0688d0 !default; // #109CFF !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-color-opacity: rgba(255, 178, 54, .3) !default;
|
||||
$warning-color-alert: rgba(255, 178, 54, .8) !default;
|
||||
|
||||
$danger-color: #FF3636 !default;
|
||||
$danger-bg: darken($danger-color, 5%) !default;
|
||||
$danger-states-color: darken($danger-color, 5%) !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-info: $info-color !default;
|
||||
$brand-success: $success-color !default;
|
||||
$brand-warning: $warning-color !default;
|
||||
$brand-danger: $danger-color !default;
|
||||
$brand-inverse: $black-color !default;
|
||||
|
||||
/*
|
||||
$default-color: #B8B8B8 !default;
|
||||
@ -110,6 +125,12 @@ $light-red: rgba($danger-color, .2);
|
||||
|
||||
//== Components
|
||||
//
|
||||
$padding-input-vertical: 11px !default;
|
||||
$padding-input-horizontal: 19px !default;
|
||||
|
||||
$padding-btn-vertical: 11px !default;
|
||||
$padding-btn-horizontal: 22px !default;
|
||||
|
||||
$padding-base-vertical: 7px !default;
|
||||
$padding-base-horizontal: 18px !default;
|
||||
|
||||
@ -166,12 +187,23 @@ $btn-icon-size: 56px !default;
|
||||
$btn-icon-size-mini: 36px !default;
|
||||
$btn-icon-font-size-mini: 14px !default;
|
||||
|
||||
$font-size-base: 14px !default;
|
||||
/*$font-size-base: 14px !default;
|
||||
$font-size-xs: 12px !default;
|
||||
$font-size-small: 12px !default;
|
||||
$font-size-medium: 16px !default;
|
||||
$font-size-large: 18px !default;
|
||||
$font-size-large-navbar: 20px !default;
|
||||
$font-size-large-navbar: 20px !default;*/
|
||||
|
||||
$font-paragraph: 1em !default;
|
||||
$font-size-navbar: 1em !default;
|
||||
$font-size-mini: 0.7142em !default;
|
||||
$font-size-xs: 0.7142em !default;
|
||||
$font-size-small: 0.8571em !default;
|
||||
$font-size-base: 14px !default;
|
||||
$font-size-medium: 14px !default;
|
||||
$font-size-large: 1em !default;
|
||||
$font-size-large-navbar: 20px !default;
|
||||
$font-size-blockquote: 1.1em !default; // ~ 15px
|
||||
|
||||
$font-size-h1: 3.2em !default;
|
||||
$font-size-h2: 2.6em !default;
|
||||
@ -275,11 +307,20 @@ $padding-zero: 0px !default;
|
||||
$sidebar-width: calc(100% - 260px) !default;
|
||||
$medium-dark-gray: #AAAAAA !default;
|
||||
|
||||
$light-gray: #E3E3E3 !default;
|
||||
$medium-gray: #DDDDDD !default;
|
||||
$dark-gray: #9A9A9A !default;
|
||||
|
||||
$opacity-gray-3: rgba(222, 222, 222, .3) !default;
|
||||
$opacity-gray-5: rgba(222, 222, 222, .5) !default;
|
||||
|
||||
$opacity-5: rgba(255, 255, 255, .5) !default;
|
||||
$opacity-8: rgba(255, 255, 255, .8) !default;
|
||||
|
||||
//variables used in cards
|
||||
$card-black-color: #2c2c2c !default;
|
||||
$card-muted-color: #ccc5b9 !default;
|
||||
|
||||
|
||||
//variables used for sidebar
|
||||
$sidebar-background-dark-blue: #506367;
|
||||
|
||||
|
@ -1,17 +1,237 @@
|
||||
@mixin input-size($padding-vertical, $padding-horizontal, $height){
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
height: $height;
|
||||
@mixin input-size($padding-vertical, $padding-horizontal) {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
}
|
||||
|
||||
@mixin placeholder($color, $opacity){
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
@mixin form-control-placeholder($color, $opacity) {
|
||||
.form-control::-moz-placeholder {
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
}
|
||||
.form-control:-moz-placeholder {
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
}
|
||||
.form-control::-webkit-input-placeholder {
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
}
|
||||
.form-control:-ms-input-placeholder {
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin light-form(){
|
||||
border-radius: 0;
|
||||
border:0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
@mixin 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 {
|
||||
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
|
||||
& + .input-group-addon {
|
||||
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.input-lg,
|
||||
.input-group.input-lg {
|
||||
.form-control {
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1;
|
||||
|
||||
& + .input-group-addon {
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1;
|
||||
|
||||
& + .form-control {
|
||||
padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin input-base-padding($padding-vertical, $padding-horizontal) {
|
||||
.form-group.form-group-no-border,
|
||||
.input-group.form-group-no-border {
|
||||
.form-control {
|
||||
/*margin-top: 2px;*/
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
|
||||
& + .input-group-addon {
|
||||
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group,
|
||||
.input-group {
|
||||
.form-control {
|
||||
margin-top: 2px;
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1;
|
||||
|
||||
& + .input-group-addon {
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1;
|
||||
|
||||
& + .form-control,
|
||||
& ~ .form-control {
|
||||
padding: $padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//color1 = $opacity-5
|
||||
//color2 = $opacity-8
|
||||
//color3 = $white-color
|
||||
//color4 = $transparent-bg
|
||||
//color5 = $opacity-1
|
||||
//color6 = $opacity-2
|
||||
|
||||
@mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) {
|
||||
@include form-control-placeholder(darken($color2, 8%), 1);
|
||||
|
||||
.form-control {
|
||||
border-color: $color1;
|
||||
color: $color2;
|
||||
|
||||
&:focus {
|
||||
border-color: $color3;
|
||||
background-color: $color4;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success,
|
||||
.has-danger {
|
||||
&:after {
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.has-danger {
|
||||
.form-control {
|
||||
background-color: $color4;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
background-color: $color4;
|
||||
border-color: $color1;
|
||||
color: $color2;
|
||||
}
|
||||
|
||||
.input-group-focus {
|
||||
.input-group-addon {
|
||||
background-color: $color4;
|
||||
border-color: $color3;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.form-group-no-border,
|
||||
.input-group.form-group-no-border {
|
||||
.form-control {
|
||||
background-color: $color5;
|
||||
color: $color2;
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active {
|
||||
background-color: $color6;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control + .input-group-addon {
|
||||
background-color: $color5;
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active {
|
||||
background-color: $color6;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
&:focus {
|
||||
& + .input-group-addon {
|
||||
background-color: $color6;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
background-color: $color5;
|
||||
border: none;
|
||||
color: $color2;
|
||||
}
|
||||
|
||||
&.input-group-focus {
|
||||
.input-group-addon {
|
||||
background-color: $color6;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,285 @@
|
||||
// User select
|
||||
// For selecting text on the page
|
||||
|
||||
@mixin box-shadow($shadow...) {
|
||||
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
@mixin transition-input-focus-color() {
|
||||
-webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
-moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
-o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
-ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@mixin transition($time, $type) {
|
||||
-webkit-transition: all $time $type;
|
||||
-moz-transition: all $time $type;
|
||||
-o-transition: all $time $type;
|
||||
-ms-transition: all $time $type;
|
||||
transition: all $time $type;
|
||||
}
|
||||
|
||||
@mixin rotate-180() {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@mixin transform-translate-x($value) {
|
||||
-webkit-transform: translate3d($value, 0, 0);
|
||||
-moz-transform: translate3d($value, 0, 0);
|
||||
-o-transform: translate3d($value, 0, 0);
|
||||
-ms-transform: translate3d($value, 0, 0);
|
||||
transform: translate3d($value, 0, 0);
|
||||
}
|
||||
|
||||
@mixin transform-translate-y($value) {
|
||||
-webkit-transform: translate3d(0, $value, 0);
|
||||
-moz-transform: translate3d(0, $value, 0);
|
||||
-o-transform: translate3d(0, $value, 0);
|
||||
-ms-transform: translate3d(0, $value, 0);
|
||||
transform: translate3d(0, $value, 0);
|
||||
}
|
||||
|
||||
@mixin bar-animation($type) {
|
||||
-webkit-animation: $type 500ms linear 0s;
|
||||
-moz-animation: $type 500ms linear 0s;
|
||||
animation: $type 500ms 0s;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@mixin topbar-x-rotation() {
|
||||
@keyframes topbar-x {
|
||||
0% {
|
||||
top: 0px;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
45% {
|
||||
top: 6px;
|
||||
transform: rotate(145deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(130deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes topbar-x {
|
||||
0% {
|
||||
top: 0px;
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
45% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(145deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotate(130deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes topbar-x {
|
||||
0% {
|
||||
top: 0px;
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
45% {
|
||||
top: 6px;
|
||||
-moz-transform: rotate(145deg);
|
||||
}
|
||||
75% {
|
||||
-moz-transform: rotate(130deg);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin topbar-back-rotation() {
|
||||
@keyframes topbar-back {
|
||||
0% {
|
||||
top: 6px;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
45% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes topbar-back {
|
||||
0% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(135deg);
|
||||
}
|
||||
45% {
|
||||
-webkit-transform: rotate(-10deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotate(5deg);
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
-webkit-transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes topbar-back {
|
||||
0% {
|
||||
top: 6px;
|
||||
-moz-transform: rotate(135deg);
|
||||
}
|
||||
45% {
|
||||
-moz-transform: rotate(-10deg);
|
||||
}
|
||||
75% {
|
||||
-moz-transform: rotate(5deg);
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
-moz-transform: rotate(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bottombar-x-rotation() {
|
||||
@keyframes bottombar-x {
|
||||
0% {
|
||||
bottom: 0px;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
45% {
|
||||
bottom: 6px;
|
||||
transform: rotate(-145deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(-130deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes bottombar-x {
|
||||
0% {
|
||||
bottom: 0px;
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
45% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(-145deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotate(-130deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes bottombar-x {
|
||||
0% {
|
||||
bottom: 0px;
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
45% {
|
||||
bottom: 6px;
|
||||
-moz-transform: rotate(-145deg);
|
||||
}
|
||||
75% {
|
||||
-moz-transform: rotate(-130deg);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bottombar-back-rotation {
|
||||
@keyframes bottombar-back {
|
||||
0% {
|
||||
bottom: 6px;
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
45% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
100% {
|
||||
bottom: 0px;
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes bottombar-back {
|
||||
0% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(-135deg);
|
||||
}
|
||||
45% {
|
||||
-webkit-transform: rotate(10deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotate(-5deg);
|
||||
}
|
||||
100% {
|
||||
bottom: 0px;
|
||||
-webkit-transform: rotate(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes bottombar-back {
|
||||
0% {
|
||||
bottom: 6px;
|
||||
-moz-transform: rotate(-135deg);
|
||||
}
|
||||
45% {
|
||||
-moz-transform: rotate(10deg);
|
||||
}
|
||||
75% {
|
||||
-moz-transform: rotate(-5deg);
|
||||
}
|
||||
100% {
|
||||
bottom: 0px;
|
||||
-moz-transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin nc-rotate($degrees, $rotation) {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
|
||||
-webkit-transform: rotate($degrees);
|
||||
-moz-transform: rotate($degrees);
|
||||
-ms-transform: rotate($degrees);
|
||||
-o-transform: rotate($degrees);
|
||||
transform: rotate($degrees);
|
||||
}
|
||||
|
||||
@mixin nc-flip($horiz, $vert, $rotation) {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
|
||||
-webkit-transform: scale($horiz, $vert);
|
||||
-moz-transform: scale($horiz, $vert);
|
||||
-ms-transform: scale($horiz, $vert);
|
||||
-o-transform: scale($horiz, $vert);
|
||||
transform: scale($horiz, $vert);
|
||||
}
|
||||
|
||||
|
||||
@mixin user-select($select) {
|
||||
-webkit-user-select: $select;
|
||||
-moz-user-select: $select;
|
||||
@ -135,14 +414,14 @@
|
||||
75% { transform: rotate(5deg); }
|
||||
100% { top: 0px; transform: rotate(0); }
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes topbar-back {
|
||||
0% { top: 6px; -webkit-transform: rotate(135deg); }
|
||||
45% { -webkit-transform: rotate(-10deg); }
|
||||
75% { -webkit-transform: rotate(5deg); }
|
||||
100% { top: 0px; -webkit-transform: rotate(0); }
|
||||
}
|
||||
|
||||
|
||||
@-moz-keyframes topbar-back {
|
||||
0% { top: 6px; -moz-transform: rotate(135deg); }
|
||||
45% { -moz-transform: rotate(-10deg); }
|
||||
|
@ -5,36 +5,34 @@
|
||||
<h6><i class="fas fa-info-circle"></i>
|
||||
Flight Information
|
||||
</h6>
|
||||
<div class="form-container-body">
|
||||
<div class="row">
|
||||
<div class="form-group col-sm-3">
|
||||
{{ Form::label('airline_id', 'Airline:') }} <span
|
||||
class="required">*</span>
|
||||
{{ Form::select('airline_id', $airlines, null , ['class' => 'form-control select2']) }}
|
||||
<p class="text-danger">{{ $errors->first('airline_id') }}</p>
|
||||
</div>
|
||||
<div class="form-container-body row">
|
||||
<div class="form-group col-sm-3">
|
||||
{{ Form::label('airline_id', 'Airline:') }} <span
|
||||
class="required">*</span>
|
||||
{{ Form::select('airline_id', $airlines, null , ['class' => 'form-control select2']) }}
|
||||
<p class="text-danger">{{ $errors->first('airline_id') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Flight Number Field -->
|
||||
<div class="form-group col-sm-3">
|
||||
{{ Form::label('flight_number', 'Flight Number:') }} <span
|
||||
class="required">*</span>
|
||||
{{ Form::text('flight_number', null, ['class' => 'form-control']) }}
|
||||
<p class="text-danger">{{ $errors->first('flight_number') }}</p>
|
||||
</div>
|
||||
<!-- Flight Number Field -->
|
||||
<div class="form-group col-sm-3">
|
||||
{{ Form::label('flight_number', 'Flight Number:') }} <span
|
||||
class="required">*</span>
|
||||
{{ Form::text('flight_number', null, ['class' => 'form-control']) }}
|
||||
<p class="text-danger">{{ $errors->first('flight_number') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Route Code Field -->
|
||||
<div class="form-group col-sm-3">
|
||||
{{ Form::label('route_code', 'Route Code:') }}
|
||||
{{ Form::text('route_code', null, ['class'=>'form-control', 'placeholder'=>'optional']) }}
|
||||
<p class="text-danger">{{ $errors->first('route_code') }}</p>
|
||||
</div>
|
||||
<!-- Route Code Field -->
|
||||
<div class="form-group col-sm-3">
|
||||
{{ Form::label('route_code', 'Route Code:') }}
|
||||
{{ Form::text('route_code', null, ['class'=>'form-control', 'placeholder'=>'optional']) }}
|
||||
<p class="text-danger">{{ $errors->first('route_code') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Route Leg Field -->
|
||||
<div class="form-group col-sm-3">
|
||||
{{ Form::label('route_leg', 'Route Leg:') }}
|
||||
{{ Form::text('route_leg', null, ['class'=>'form-control', 'placeholder'=>'optional']) }}
|
||||
<p class="text-danger">{{ $errors->first('route_leg') }}</p>
|
||||
</div>
|
||||
<!-- Route Leg Field -->
|
||||
<div class="form-group col-sm-3">
|
||||
{{ Form::label('route_leg', 'Route Leg:') }}
|
||||
{{ Form::text('route_leg', null, ['class'=>'form-control', 'placeholder'=>'optional']) }}
|
||||
<p class="text-danger">{{ $errors->first('route_leg') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user