add: React Bootstrap Framework & Argon Dashboard 2
This commit is contained in:
@ -0,0 +1,72 @@
|
||||
.form-check:not(.form-switch) .form-check-input {
|
||||
&[type="checkbox"],
|
||||
&[type="radio"] {
|
||||
border: 1px solid darken($gray-200, 10%);
|
||||
margin-top: $form-text-margin-top;
|
||||
position: relative;
|
||||
|
||||
&:checked {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[type="checkbox"] {
|
||||
&:after {
|
||||
transition: opacity $form-check-transition-time ease-in-out;
|
||||
font-family: "FontAwesome";
|
||||
content: "\f00c";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: $form-check-input-checked-color;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: $font-size-sm - .205;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:checked:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&[type="radio"] {
|
||||
transition: border 0s;
|
||||
|
||||
&:after {
|
||||
transition: opacity $form-check-transition-time ease-in-out;
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: $form-check-radio-after-width;
|
||||
height: $form-check-radio-after-width;
|
||||
border-radius: 50%;
|
||||
background-color: $white;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
&:checked:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label,
|
||||
.form-check-input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-check-label{
|
||||
font-size:$font-size-sm;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
.form-check-input{
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
@ -0,0 +1,3 @@
|
||||
.form-select {
|
||||
transition: $input-transition;
|
||||
}
|
@ -0,0 +1,38 @@
|
||||
.form-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.form-check-input {
|
||||
border: 1px solid $gray-200;
|
||||
position: relative;
|
||||
background-color: rgba($dark-gradient-state, .1);
|
||||
height: $form-check-input-width + .02;
|
||||
|
||||
&:after {
|
||||
transition: transform $form-check-transition-time ease-in-out, background-color $form-check-transition-time ease-in-out;
|
||||
content: "";
|
||||
width: $form-switch-check-after-width;
|
||||
height: $form-switch-check-after-width;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
background-color: $white;
|
||||
transform: translateX($form-switch-translate-x-start);
|
||||
box-shadow: $form-switch-round-box-shadow;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
&:checked:after {
|
||||
transform: translateX($form-switch-translate-x-end);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border-color: rgba($primary-gradient, .95);
|
||||
background-color: rgba($primary-gradient, .95);
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
margin-bottom: 0;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
@ -0,0 +1,6 @@
|
||||
@import 'input-group';
|
||||
@import 'form-check';
|
||||
@import 'form-switch';
|
||||
@import 'form-select';
|
||||
@import 'labels';
|
||||
@import 'inputs';
|
@ -0,0 +1,62 @@
|
||||
.input-group {
|
||||
@include border-radius($input-border-radius, 0);
|
||||
|
||||
&,
|
||||
.input-group-text {
|
||||
transition: $input-transition;
|
||||
}
|
||||
|
||||
& > :not(:first-child):not(.dropdown-menu) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
&:focus {
|
||||
border-left: $input-border-width solid $input-focus-border-color !important;
|
||||
border-right: $input-border-width solid $input-focus-border-color !important;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
& + .input-group-text {
|
||||
border-left: 0;
|
||||
border-right: $input-border-width solid $input-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
|
||||
border-left: $white !important;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
.input-group-text {
|
||||
border-color: $primary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
&.form-control-alternative {
|
||||
border: 0;
|
||||
box-shadow: $input-alternative-box-shadow;
|
||||
|
||||
&:focus {
|
||||
box-shadow: $input-alternative-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
@ -0,0 +1,13 @@
|
||||
.form-control{
|
||||
&.is-invalid{
|
||||
&:focus{
|
||||
box-shadow: 0 0 0 2px rgba($form-feedback-invalid-color, .6);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-valid{
|
||||
&:focus{
|
||||
box-shadow: 0 0 0 2px rgba($form-feedback-valid-color, .65);
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,12 @@
|
||||
//
|
||||
// Labels
|
||||
//
|
||||
|
||||
label,
|
||||
.form-label {
|
||||
font-size: $form-label-font-size;
|
||||
font-weight: $form-label-font-weight;
|
||||
margin-bottom: $form-label-margin-bottom;
|
||||
color: $form-label-color;
|
||||
margin-left: $form-label-margin-left;
|
||||
}
|
Reference in New Issue
Block a user