v2 first commit
This commit is contained in:
denisdulici
38
resources/assets/sass/core/forms/_form-extend.scss
vendored
Normal file
38
resources/assets/sass/core/forms/_form-extend.scss
vendored
Normal file
@ -0,0 +1,38 @@
|
||||
//
|
||||
// Form extend
|
||||
//
|
||||
|
||||
|
||||
// Color variations
|
||||
|
||||
.form-primary {
|
||||
.form-control {
|
||||
color: color-yiq(theme-color("primary"));
|
||||
background-color: transparentize(darken(theme-color("primary"), 10%), .5);
|
||||
border-color: darken(theme-color("primary"), 10%);
|
||||
|
||||
&:focus {
|
||||
background-color: transparentize(darken(theme-color("primary"), 12%), .3);
|
||||
border: $input-border-width solid darken(theme-color("primary"), 12%);
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
&::placeholder {
|
||||
color: transparentize(color-yiq(theme-color("primary")), .2);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
color: color-yiq(theme-color("primary"));
|
||||
background-color: transparentize(darken(theme-color("primary"), 10%), .5);
|
||||
border-color: darken(theme-color("primary"), 10%);
|
||||
}
|
||||
|
||||
.focused {
|
||||
.input-group-text {
|
||||
color: color-yiq(theme-color("primary"));
|
||||
background-color: transparentize(darken(theme-color("primary"), 12%), .3);
|
||||
border-color: darken(theme-color("primary"), 12%);
|
||||
}
|
||||
}
|
||||
}
|
||||
78
resources/assets/sass/core/forms/_form-validation.scss
vendored
Normal file
78
resources/assets/sass/core/forms/_form-validation.scss
vendored
Normal file
@ -0,0 +1,78 @@
|
||||
//
|
||||
// Form validation
|
||||
//
|
||||
|
||||
// Validation
|
||||
|
||||
.has-success,
|
||||
.has-danger {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
display: none; // remove in v1.1
|
||||
//display: inline-block;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
font-family: 'NucleoIcons';
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 50%;
|
||||
font-size: 9px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-group-prepend{
|
||||
.input-group-text{
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-success {
|
||||
&:after {
|
||||
content: "\ea26";
|
||||
color: darken($form-feedback-valid-color, 18%);
|
||||
background-color: $form-feedback-valid-bg;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: $input-focus-bg;
|
||||
|
||||
&:focus {
|
||||
//border-color: $input-focus-border-color;
|
||||
}
|
||||
|
||||
|
||||
// Placeholder
|
||||
|
||||
&::placeholder {
|
||||
color: $form-feedback-valid-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-danger {
|
||||
&:after {
|
||||
content: "\ea53";
|
||||
color: darken($form-feedback-invalid-color, 18%);
|
||||
background-color: $form-feedback-invalid-bg;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: $input-focus-bg;
|
||||
|
||||
&:focus {
|
||||
//border-color: $input-focus-border-color;
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
|
||||
&::placeholder {
|
||||
color: $form-feedback-invalid-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
109
resources/assets/sass/core/forms/_form.scss
vendored
Normal file
109
resources/assets/sass/core/forms/_form.scss
vendored
Normal file
@ -0,0 +1,109 @@
|
||||
//
|
||||
// Forms
|
||||
//
|
||||
|
||||
|
||||
// Labels
|
||||
|
||||
.form-control-label {
|
||||
color: $gray-700;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
|
||||
// Text inputs
|
||||
|
||||
.form-control {
|
||||
font-size: $input-btn-font-size;
|
||||
@include transition($transition-ease-in-out);
|
||||
height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border * 2.5});
|
||||
|
||||
&:focus {
|
||||
&::placeholder {
|
||||
color: $input-focus-placeholder-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.form-control-lg{
|
||||
height: calc(#{$input-line-height * 1.5em} + #{$input-padding-y * 2} + #{$input-height-border * 2.5});
|
||||
|
||||
}
|
||||
|
||||
.form-control-sm{
|
||||
height: calc(#{$input-line-height * .3em} + #{$input-padding-y * 2} + #{$input-height-border * 2.5});
|
||||
|
||||
}
|
||||
|
||||
// Form control flush
|
||||
// Removes borders and paddings from inputs and text areas
|
||||
|
||||
.form-control-flush {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Textarea
|
||||
|
||||
textarea[resize="none"] {
|
||||
resize: none!important;
|
||||
}
|
||||
|
||||
textarea[resize="both"] {
|
||||
resize: both!important;
|
||||
}
|
||||
|
||||
textarea[resize="vertical"] {
|
||||
resize: vertical!important;
|
||||
}
|
||||
|
||||
textarea[resize="horizontal"] {
|
||||
resize: horizontal!important;
|
||||
}
|
||||
|
||||
|
||||
// Form input variations
|
||||
|
||||
// Muted input
|
||||
|
||||
.form-control-muted {
|
||||
background-color: $input-muted-bg;
|
||||
border-color: $input-muted-bg;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
background-color: $input-focus-muted-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alternative input
|
||||
|
||||
.form-control-alternative {
|
||||
box-shadow: $input-alternative-box-shadow;
|
||||
border: 0;
|
||||
transition: box-shadow .15s ease;
|
||||
|
||||
&:focus {
|
||||
box-shadow: $input-focus-alternative-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
// Size variations: Fixes to the bootstrap defaults
|
||||
|
||||
.form-control-lg,
|
||||
.input-group-lg .form-control,
|
||||
.input-group-text {
|
||||
font-size: $font-size-base !important;
|
||||
}
|
||||
136
resources/assets/sass/core/forms/_input-group.scss
vendored
Normal file
136
resources/assets/sass/core/forms/_input-group.scss
vendored
Normal file
@ -0,0 +1,136 @@
|
||||
//
|
||||
// Input group
|
||||
//
|
||||
|
||||
.custom-control{
|
||||
padding-left: $custom-control-gutter + $custom-control-indicator-size - 1rem;
|
||||
|
||||
}
|
||||
|
||||
.input-group {
|
||||
box-shadow: $input-box-shadow;
|
||||
border-radius: $input-border-radius;
|
||||
@include transition($transition-ease-in-out);
|
||||
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
@include transition($input-transition);
|
||||
|
||||
i {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.custom-control {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.input-group-prepend {
|
||||
|
||||
// Should add the value of border right in variables.scss
|
||||
.input-group-text {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-append {
|
||||
|
||||
// Should add the value of border right in variables.scss
|
||||
.input-group-text {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Merged input group
|
||||
|
||||
.input-group-merge {
|
||||
.form-control {
|
||||
&:not(:first-child) {
|
||||
border-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Alternative input groups related to .form-control-alternative
|
||||
|
||||
.input-group-alternative {
|
||||
box-shadow: $input-alternative-box-shadow;
|
||||
border: 0;
|
||||
transition: box-shadow .15s ease;
|
||||
|
||||
.form-control,
|
||||
.input-group-text {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.focused {
|
||||
.input-group-alternative {
|
||||
box-shadow: $input-focus-alternative-box-shadow !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Remove borders and paddings
|
||||
|
||||
.input-group-flush {
|
||||
box-shadow: none;
|
||||
|
||||
> .form-control {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
|
||||
> .input-group-prepend,
|
||||
> .input-group-append {
|
||||
|
||||
> .input-group-text {
|
||||
padding: 0;
|
||||
padding-right: 1rem;
|
||||
border-width: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// .focus class is applied dinamycally from theme.js
|
||||
|
||||
.focused {
|
||||
.input-group {
|
||||
box-shadow: $input-focus-box-shadow;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
color: $input-group-addon-focus-color;
|
||||
background-color: $input-group-addon-focus-bg;
|
||||
border-color: $input-group-addon-focus-border-color;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-color: $input-group-addon-focus-border-color;
|
||||
}
|
||||
|
||||
.input-group-flush {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user