admin styling

This commit is contained in:
Nabeel Shahzad 2018-04-09 15:16:01 -05:00
parent 86d28aafd6
commit 0986cddae1
9 changed files with 1526 additions and 640 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -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",

View File

@ -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;
}
}

View File

@ -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;

View File

@ -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;

View File

@ -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;
}
}
}
}

View File

@ -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); }

View File

@ -5,36 +5,34 @@
<h6><i class="fas fa-info-circle"></i>
&nbsp;Flight Information
</h6>
<div class="form-container-body">
<div class="row">
<div class="form-group col-sm-3">
{{ Form::label('airline_id', 'Airline:') }}&nbsp;<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:') }}&nbsp;<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:') }}&nbsp;<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:') }}&nbsp;<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>