add: React Bootstrap Framework & Argon Dashboard 2

This commit is contained in:
2022-07-02 16:18:45 +00:00
parent d96ff1bebc
commit dd9d6bb602
306 changed files with 55600 additions and 53 deletions

View File

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

View File

@ -0,0 +1,3 @@
.form-select {
transition: $input-transition;
}

View File

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

View File

@ -0,0 +1,6 @@
@import 'input-group';
@import 'form-check';
@import 'form-switch';
@import 'form-select';
@import 'labels';
@import 'inputs';

View File

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

View File

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

View File

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