FGFS-4.1/phpvms
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

PIREP form styling and improvments

Browse Source
This commit is contained in:
Nabeel Shahzad
2018-04-06 17:10:45 -05:00
parent 42264eb180
commit 12a442970e
30 changed files with 721 additions and 468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
resources/sass/now-ui/now-ui-kit.scss
View File

@@ -49,6 +49,7 @@
@import "now-ui-kit/carousel";
@import "now-ui-kit/cards";
@import "now-ui-kit/footers";
@import "now-ui-kit/form-container";
// example pages and sections
@import "now-ui-kit/example-pages";

19
resources/sass/now-ui/now-ui-kit/_form-container.scss Executable file
View File

@@ -0,0 +1,19 @@
.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;
background-color: rgba(222, 222, 222, 0.3);
}
.form-container-body {
padding: 8px;
}
}

28
resources/sass/now-ui/now-ui-kit/_inputs.scss
View File

@@ -1,9 +1,9 @@
@include form-control-placeholder($medium-gray, 1);
.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;
font-size: $font-size-small;
@@ -15,15 +15,14 @@
}
&:focus{
border: 1px solid $primary-color;
border: 1px solid $brand-primary;
@include box-shadow(none);
outline: 0 !important;
color: $black-color;
& + .input-group-addon,
& ~ .input-group-addon{
border: 1px solid $primary-color;
border-left: none;
border: 1px solid $brand-primary;
background-color: $transparent-bg;
}
}
@@ -101,8 +100,9 @@
}
}
@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-input-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{
@@ -192,7 +192,7 @@
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) {
@@ -203,7 +203,7 @@
.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;
@@ -225,16 +225,18 @@ textarea.form-control{
max-width: 100%;
padding: 10px 10px 0 0;
resize: none;
border: none;
border-bottom: 1px solid $light-gray;
background-color: $transparent-bg;
border: 1px solid $light-gray;
color: $black-color;
line-height: 1em;
font-size: $font-size-small;
border-radius: 0;
line-height: 2;
&:focus,
&:active{
border-left: none;
border-top: none;
border-right: none;
@include box-shadow(none);
border: 1px solid $brand-primary;
background-color: $transparent-bg;
}
}

4
resources/sass/now-ui/now-ui-kit/_variables.scss
View File

@@ -53,8 +53,8 @@ $success-states-color: darken($success-color, 5%) !default;
$success-color-opacity: rgba(24, 206, 15, .3) !default;
$success-color-alert: rgba(24, 206, 15, .8) !default;
$info-color: #2CA8FF !default;
$info-states-color: #109CFF !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;

42
resources/sass/now-ui/now-ui-kit/mixins/_inputs.scss
View File

@@ -21,18 +21,52 @@
}
}
@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.form-group-no-border.input-lg {
.input-group-addon{
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
}
@@ -72,6 +106,7 @@
.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{
@@ -87,6 +122,7 @@
.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{