Watanabebashi/WB-Workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HTMLテンプレートやBootstrapを追加

Browse Source
This commit is contained in:
furu04
2025-06-19 11:32:01 +09:00
parent 54d5164b73
commit d2ae29995e
204 changed files with 52814 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
app/assets/scss/material-dashboard/forms/_form-check.scss Normal file
View File

@@ -0,0 +1,91 @@
.form-check:not(.form-switch) .form-check-input {
float: initial !important;
margin-left: auto !important;
&[type="checkbox"],
&[type="radio"] {
border: 1px solid darken($gray-200, 10%);
margin-top: $form-text-margin-top;
position: relative;
&:checked {
border-color: $primary;
}
}
&[type="checkbox"] {
background-image: none;
&: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{
background: $primary;
&:after {
opacity: 1;
}
}
}
&[type="radio"] {
transition: border 0s;
background: transparent;
&: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-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);;
opacity: 0;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
&:checked {
padding: 6px;
}
&:checked:after {
opacity: 1;
}
&:active{
box-shadow: $form-check-radio-after-shadow;
border-radius: $border-radius-pill;
transition: $form-check-radio-transition;
}
}
}
.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;
}

3
app/assets/scss/material-dashboard/forms/_form-select.scss Normal file
View File

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

43
app/assets/scss/material-dashboard/forms/_form-switch.scss Normal file
View File

@@ -0,0 +1,43 @@
.form-switch{
.form-check-input{
position: relative;
background-color: $form-switch-bg-color;
height: $form-switch-height;
width: $form-switch-width;
&: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%;
border: 1px solid $form-switch-check-after-border-color;
position: absolute;
background-color: $white;
transform: translateX($form-switch-translate-x-start);
box-shadow: $form-switch-round-box-shadow;
top: $form-switch-check-top;
left: $form-switch-check-left;
}
&:checked:after {
transform: translateX($form-switch-translate-x-end);
border-color: $dark-gradient;
}
&:checked {
border-color: $dark-gradient;
background-color: $dark-gradient;
&:active{
&:after{
box-shadow: $form-switch-check-active-checked-after-shadow;
}
}
}
&:active{
&:after{
box-shadow: $form-switch-check-active-after-shadow;
}
}
}
}

6
app/assets/scss/material-dashboard/forms/_forms.scss Normal file
View File

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

312
app/assets/scss/material-dashboard/forms/_input-group.scss Normal file
View File

@@ -0,0 +1,312 @@
.input-group {
@include border-radius(0, 0);
&:not(.has-validation) {
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
> .dropdown-toggle:nth-last-child(n + 3) {
@include border-end-radius($border-radius-md);
}
}
&.has-validation {
> :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
> .dropdown-toggle:nth-last-child(n + 4) {
@include border-end-radius($border-radius-md);
}
}
&,
.input-group-text {
transition: $input-transition;
border: none;
}
& > :not(:first-child):not(.dropdown-menu) {
margin-left: 2px;
}
label {
transition: $transition-material;
}
&.input-group-dynamic,
&.input-group-static {
.form-control {
background: $input-background;
background-size: $input-background-size;
transition: $input-transition;
&: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;
}
&,
&:focus{
background-image: $input-background-image;
border-radius: 0 !important;
}
&:focus{
background-size: $input-background-size-focus;
}
&[disabled]{
cursor: not-allowed;
background-image: $input-background-image-disabled !important;
}
}
.input-group-text {
border-right: 0;
}
&.is-focused,
&.is-filled {
.form-label {
font-size: $form-label-font-size-focused !important;
}
}
&.is-focused {
.form-label {
top: $form-label-top-focused;
}
label {
color: $primary;
}
&.is-valid{
label{
color: $success;
}
.form-control{
&,
&:focus{
background-image: $input-background-image-valid;
border-radius: 0 !important;
}
}
}
&.is-invalid{
label{
color: $danger;
}
.form-control{
&,
&:focus{
background-image: $input-background-image-invalid;
border-radius: 0 !important;
}
}
}
}
&.is-valid{
.form-control{
&,
&:focus{
background-image: $input-background-image-valid;
border-radius: 0 !important;
}
}
}
&.is-invalid{
.form-control{
&,
&:focus{
background-image: $input-background-image-invalid;
border-radius: 0 !important;
}
}
}
&.is-filled.is-focused,
&.is-filled {
.form-label {
top: $form-label-top-focused-filled;
}
}
}
&.input-group-outline {
.form-control {
background: none;
border: $input-border-width solid $input-border-color;
border-radius: $input-border-radius;
border-top-left-radius: $border-radius-md !important;
border-bottom-left-radius: $border-radius-md !important;
padding: $form-control-outline-padding !important;
line-height: 1.3 !important;
&.form-control-lg {
padding: $input-padding-y-lg $input-padding-x-lg !important;
}
&.form-control-sm{
padding: $input-padding-y-sm $input-padding-x-sm !important;
}
&[disabled]{
cursor: not-allowed;
border-style: dashed;
}
}
.form-label {
display: flex;
line-height: $form-label-outline-line-height !important;
top: -$form-label-outline-top;
margin-bottom: 0;
&:before {
content: "";
margin-right: 4px;
border-left: solid 1px transparent;
border-radius: 4px 0;
}
&:after {
content: "";
flex-grow: 1;
margin-left: 4px;
border-right: solid 1px transparent;
border-radius: 0 5px;
}
&:before,
&:after {
content: "";
border-top: solid 1px;
border-top-color: $input-border-color;
pointer-events: none;
margin-top: $form-label-outline-top;
box-sizing: border-box;
display: block;
height: $form-label-outline-after-height;
width: $form-label-outline-after-width;
border-width: $form-label-outline-after-border-width;
border-color: transparent;
}
}
&.is-focused,
&.is-filled {
.form-label + .form-control {
border-color: $primary !important;
border-top-color: transparent !important;
box-shadow: inset 1px 0 $primary, inset -1px 0 $primary, inset 0 -1px $primary;
}
.form-label {
width: 100%;
height: 100%;
font-size: $form-label-font-size-focused !important;
color: $primary;
display: flex;
line-height: $line-height-sm !important;
&:before,
&:after {
opacity: 1;
}
&:before,
&:after {
border-top-color: $primary;
box-shadow: inset 0 1px $primary;
}
}
}
&.is-valid {
.form-control {
background-image: escape-svg($form-feedback-icon-valid);
background-repeat: no-repeat;
background-position: right $input-height-inner-quarter center;
background-size: $input-height-inner-half $input-height-inner-half;
}
&.is-focused,
&.is-filled {
.form-label + .form-control {
border-color: $success !important;
box-shadow: inset 1px 0 $success, inset -1px 0 $success, inset 0 -1px $success;
border-top-color: transparent !important;
}
.form-label {
color: $success;
&:before,
&:after {
border-top-color: $success;
box-shadow: inset 0 1px $success;
}
}
}
}
&.is-invalid {
.form-control {
background-image: escape-svg($form-feedback-icon-invalid);
background-repeat: no-repeat;
background-position: right $input-height-inner-quarter center;
background-size: $input-height-inner-half $input-height-inner-half;
}
&.is-focused,
&.is-filled {
.form-label + .form-control {
border-color: $danger !important;
box-shadow: inset 1px 0 $danger, inset -1px 0 $danger, inset 0 -1px $danger;
border-top-color: transparent !important;
}
.form-label {
color: $danger;
&:before,
&:after {
border-top-color: $danger;
box-shadow: inset 0 1px $danger;
}
}
}
}
}
&.input-group-outline,
&.input-group-dynamic,
&.input-group-static {
&.input-group-sm{
.form-label,
label{
font-size: $input-group-sm-font-size;
}
}
&.input-group-lg{
.form-label,
label{
font-size: $input-group-lg-font-size;
}
}
}
&.input-group-static {
.form-control {
width: 100%;
}
label {
margin-left: 0;
margin-bottom: 0;
}
}
}

47
app/assets/scss/material-dashboard/forms/_inputs.scss Normal file
View File

@@ -0,0 +1,47 @@
.form-control {
border: none;
&.is-invalid {
border: $input-border-width solid $input-border-color;
padding: $form-control-outline-padding;
line-height: 1.3 !important;
&:focus {
box-shadow: 0 0 0 2px rgba($form-feedback-invalid-color, .6);
}
}
&.is-valid {
border: $input-border-width solid $input-border-color;
padding: $form-control-outline-padding;
line-height: 1.3 !important;
&:focus {
box-shadow: 0 0 0 2px rgba($form-feedback-valid-color, .65);
}
}
&[disabled] {
padding: $form-control-outline-padding;
line-height: 1.45 !important;
}
}
.input-group {
.input-group-text {
position: absolute;
padding: .75rem 0;
right: 0;
border-right: 0 !important;
i {
color: $gray-600;
}
}
&.input-group-static {
.input-group-text {
bottom: 0;
}
}
}

21
app/assets/scss/material-dashboard/forms/_labels.scss Normal file
View File

@@ -0,0 +1,21 @@
//
// 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;
}
.input-group{
.form-label{
position: $form-label-position;
top: $form-label-top;
margin-left: 0;
transition: $form-label-transition;
}
}