Skip to content

Commit

Permalink
udpate css
Browse files Browse the repository at this point in the history
  • Loading branch information
@capdiem
capdiem committed Aug 5, 2024
1 parent 5f5acce commit 3936f80
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 163 deletions.
109 changes: 7 additions & 102 deletions src/Masa.Blazor/wwwroot/css/masa-blazor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22940,7 +22940,7 @@ html.overflow-y-hidden {
display: inline-flex;
flex: 1 1 auto;
height: auto;
margin-left: 10px;
margin-inline-start: 10px;
}
.m-input--selection-controls__input {
color: inherit;
Expand Down Expand Up @@ -23004,58 +23004,14 @@ html.overflow-y-hidden {
-ms-user-select: none;
user-select: none;
}
.m-input--selection-controls__ripple {
border-radius: 50%;
cursor: pointer;
height: 34px;
position: absolute;
transition: inherit;
width: 34px;
left: -12px;
top: calc(50% - 24px);
margin: 7px;
}
.m-input--selection-controls__ripple:before {
border-radius: inherit;
bottom: 0;
content: "";
position: absolute;
opacity: 0.2;
left: 0;
right: 0;
top: 0;
transform-origin: center center;
transform: scale(0.2);
transition: inherit;
}
.m-input--selection-controls__ripple > .m-ripple__container {
transform: scale(1.2);
}
.m-input--selection-controls.m-input--dense:not(.m-input--switch--text) .m-input--selection-controls__ripple {
width: 28px;
height: 28px;
left: -9px;
}
.m-input--selection-controls.m-input--dense:not(.m-input--switch) .m-input--selection-controls__ripple {
top: calc(50% - 21px);
}
.m-input--selection-controls.m-input {
flex: 0 1 auto;
}
.m-input--selection-controls.m-input--is-focused .m-input--selection-controls__ripple:before,
.m-input--selection-controls .m-radio--is-focused .m-input--selection-controls__ripple:before {
background: currentColor;
transform: scale(1.2);
}

.m-input--selection-controls.m-input--is-disabled:not(.m-input--indeterminate) .m-icon {
color: inherit;
}

.m-input--selection-controls__input:hover .m-input--selection-controls__ripple:before {
background: currentColor;
transform: scale(1.2);
transition: none;
}
.m-chip-group .m-chip {
margin: 4px 8px 4px 0;
}
Expand Down Expand Up @@ -28323,7 +28279,6 @@ html.overflow-y-hidden {

.m-input--selection-controls__wrapper {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
Expand All @@ -28339,16 +28294,6 @@ html.overflow-y-hidden {
pointer-events: none;
transition: inherit;
}
/*.m-input--switch__track {*/
/* border-radius: 8px;*/
/* width: 36px;*/
/* height: 14px;*/
/* left: 2px;*/
/* position: absolute;*/
/* opacity: 0.6;*/
/* right: 2px;*/
/* top: calc(50% - 7px);*/
/*}*/
.m-input--switch__track {
display: inline-flex;
align-items: center;
Expand Down Expand Up @@ -28385,8 +28330,11 @@ html.overflow-y-hidden {
.m-application--is-ltr .m-input--switch.m-input--is-dirty .m-input--selection-controls__input {
transform: translateX(10px);
}
.m-input--switch .m-input--selection-controls__ripple {
top: calc(50% - 24px);
.m-application--is-rtl .m-input--switch .m-input--selection-controls__input {
transform: translateX(10px);
}
.m-application--is-rtl .m-input--switch.m-input--is-dirty .m-input--selection-controls__input {
transform: translateX(-10px);
}
.m-input--switch.m-input--dense:not(.m-input--switch--text) .m-input--switch__thumb {
width: 18px;
Expand All @@ -28402,62 +28350,19 @@ html.overflow-y-hidden {
top: calc(50% - 12px);
left: -3px;
}
.m-input--switch.m-input--dense:not(.m-input--switch--text) .m-input--selection-controls__ripple {
top: calc(50% - 22px);
}
.m-input--switch.m-input--is-dirty.m-input--is-disabled {
opacity: 0.6;
}
.m-application--is-ltr .m-input--switch .m-input--selection-controls__ripple {
left: -14px;
}
.m-application--is-ltr .m-input--switch.m-input--dense:not(.m-input--switch--text) .m-input--selection-controls__ripple {
left: -12px;
}
/*.m-application--is-ltr .m-input--switch.m-input--is-dirty .m-input--selection-controls__ripple,*/
/*.m-application--is-ltr .m-input--switch.m-input--is-dirty .m-input--switch__thumb {*/
/* transform: translate(20px, 0);*/
/*}*/
.m-application--is-rtl .m-input--switch .m-input--selection-controls__ripple {
right: -14px;
}
.m-application--is-rtl .m-input--switch.m-input--dense:not(.m-input--switch--text) .m-input--selection-controls__ripple {
right: -12px;
}
/*.m-application--is-rtl .m-input--switch.m-input--is-dirty .m-input--selection-controls__ripple,*/
/*.m-application--is-rtl .m-input--switch.m-input--is-dirty .m-input--switch__thumb {*/
/* transform: translate(-20px, 0);*/
/*}*/
.m-input--switch:not(.m-input--switch--flat):not(.m-input--switch--inset) .m-input--switch__thumb {
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
/*.m-input--switch--inset .m-input--switch__track,*/
/*.m-input--switch--inset .m-input--selection-controls__input {*/
/* width: 48px;*/
/*}*/
.m-input--switch--inset .m-input--switch__track {
border-radius: 14px;
height: 28px;
left: -4px;
opacity: 0.32;
top: calc(50% - 14px);
}
/*.m-application--is-ltr .m-input--switch--inset .m-input--selection-controls__ripple,*/
/*.m-application--is-ltr .m-input--switch--inset .m-input--switch__thumb {*/
/* transform: translate(0, 0) !important;*/
/*}*/
/*.m-application--is-rtl .m-input--switch--inset .m-input--selection-controls__ripple,*/
/*.m-application--is-rtl .m-input--switch--inset .m-input--switch__thumb {*/
/* transform: translate(-6px, 0) !important;*/
/*}*/
/*.m-application--is-ltr .m-input--switch--inset.m-input--is-dirty .m-input--selection-controls__ripple,*/
/*.m-application--is-ltr .m-input--switch--inset.m-input--is-dirty .m-input--switch__thumb {*/
/* transform: translate(20px, 0) !important;*/
/*}*/
/*.m-application--is-rtl .m-input--switch--inset.m-input--is-dirty .m-input--selection-controls__ripple,*/
/*.m-application--is-rtl .m-input--switch--inset.m-input--is-dirty .m-input--switch__thumb {*/
/* transform: translate(-26px, 0) !important;*/
/*}*/
/* Theme */
.theme--light.m-system-bar {
background-color: #e0e0e0;
Expand Down
134 changes: 74 additions & 60 deletions src/Masa.Blazor/wwwroot/css/masa-blazor.extend.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,61 +329,6 @@
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}

/* custom-text example in Switch */

.m-input--switch--text .m-input--switch__track {
border-radius: 17px;
height: 34px;
width: 64px;
}

.m-input--switch--text .m-input--switch__thumb {
/*top: calc(50% - 15px);*/
height: 30px;
width: 30px;
}

.m-application--is-ltr .m-input--switch--text.m-input--is-dirty .m-input--selection-controls__ripple, .m-application--is-ltr .m-input--switch--text.m-input--is-dirty .m-input--switch__thumb {
/*transform: translate(30px, 0);*/
}

.m-input--switch--text .m-input--switch__left {
flex: 1;
color: #fff;
}

.m-input--switch--text .m-input--switch__right {
flex: 1;
}

.m-input--switch--text.m-input--is-dirty .m-input--switch__left {
color: inherit
}

.m-input--switch--text.m-input--is-dirty .m-input--switch__right {
color: #fff
}

.m-input--switch--text .m-input--selection-controls__ripple {
width: 44px;
height: 44px;
top: calc(50% - 30px);
}

.m-input--switch--text.m-input--dense .m-input--selection-controls__ripple {
width: 36px;
height: 36px;
top: calc(50% - 25px);
}

.m-application--is-ltr .m-input--switch--text.m-input--dense .m-input--selection-controls__ripple {
left: -10px;
}

.m-application--is-rtl .m-input--switch--text.m-input--dense .m-input--selection-controls__ripple {
right: -10px;
}

/* cascader */

.m-cascader__columns {
Expand Down Expand Up @@ -1633,14 +1578,12 @@ html.m-overlay-scroll-blocked {
cursor: pointer;
}

/* switch */

.m-input--switch--inset .m-input--switch__track {
width: 48px;
}

.m-input--switch--inset .m-input--selection-controls__input {
width: 40px;
}

.m-application--is-ltr .m-input--switch--text.m-input--is-dirty .m-input--selection-controls__input {
transform: translateX(15px);
}
Expand All @@ -1649,8 +1592,36 @@ html.m-overlay-scroll-blocked {
transform: translateX(-15px);
}

.m-application--is-ltr .m-input--dense.m-input--switch--text.m-input--is-dirty .m-input--selection-controls__input {
transform: translateX(13px);
}

.m-application--is-ltr .m-input--dense.m-input--switch--text .m-input--selection-controls__input {
transform: translateX(-13px);
}

.m-application--is-rtl .m-input--switch--text.m-input--is-dirty .m-input--selection-controls__input {
transform: translateX(-15px);
}

.m-application--is-rtl .m-input--switch--text .m-input--selection-controls__input {
transform: translateX(15px);
}

.m-application--is-rtl .m-input--dense.m-input--switch--text.m-input--is-dirty .m-input--selection-controls__input {
transform: translateX(-13px);
}

.m-application--is-rtl .m-input--dense.m-input--switch--text .m-input--selection-controls__input {
transform: translateX(13px);
}

.m-input--switch--text .m-input--selection-controls__wrapper {
width: 64px;
width: 68px;
}

.m-input--dense.m-input--switch--text .m-input--selection-controls__wrapper {
width: 60px;
}

.m-input--switch__text {
Expand All @@ -1659,6 +1630,7 @@ html.m-overlay-scroll-blocked {
display: flex;
text-align: center;
pointer-events: none;
padding: 0 4px;
}

.m-input--switch--text .m-input--selection-controls__input {
Expand All @@ -1669,3 +1641,45 @@ html.m-overlay-scroll-blocked {
.m-input--switch--inset .m-input--selection-controls__wrapper {
width: auto;
}

.m-input--dense.m-input--switch--text .m-input--selection-controls__input {
width: 38px;
height: 38px;
}

.m-input--switch--text .m-input--switch__track {
height: 38px;
width: 68px;
}

.m-input--dense.m-input--switch--text .m-input--switch__track {
height: 30px;
width: 60px;
}

.m-input--switch--text .m-input--switch__thumb {
height: 30px;
width: 30px;
}

.m-input--dense.m-input--switch--text .m-input--switch__thumb {
height: 26px;
width: 26px;
}

.m-input--switch--text .m-input--switch__left {
flex: 1;
color: #fff;
}

.m-input--switch--text .m-input--switch__right {
flex: 1;
}

.m-input--switch--text.m-input--is-dirty .m-input--switch__left {
color: inherit
}

.m-input--switch--text.m-input--is-dirty .m-input--switch__right {
color: #fff
}
2 changes: 1 addition & 1 deletion src/Masa.Blazor/wwwroot/css/masa-blazor.min.css
View file

Large diffs are not rendered by default.

0 comments on commit 3936f80

Please sign in to comment.