v0.28.81
refactor: using CSS variables instead of ::part() selector
This commit is contained in:
sairaj mote
parent
971c5dc5b3
commit
ad51bba083
File diff suppressed because one or more lines are too long
43
css/main.css
43
css/main.css
@ -177,9 +177,7 @@ strong {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.fab::part(button) {
|
||||
padding: 0.9rem 1.6rem;
|
||||
--padding: 0.9rem 1.6rem;
|
||||
}
|
||||
.fab .icon {
|
||||
margin-left: 0 !important;
|
||||
@ -236,9 +234,10 @@ span.ripple {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
sm-popup sm-input::part(input) {
|
||||
border-radius: 0.5rem;
|
||||
sm-input {
|
||||
--border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
sm-popup sm-input + sm-input {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@ -449,9 +448,7 @@ sm-button.danger {
|
||||
}
|
||||
#sign_in sm-button {
|
||||
width: 100%;
|
||||
}
|
||||
#sign_in sm-button::part(button) {
|
||||
padding: 0.8rem 1.6rem;
|
||||
--padding: 0.8rem 1.6rem;
|
||||
}
|
||||
#sign_in p {
|
||||
margin-bottom: 0.5rem;
|
||||
@ -553,7 +550,7 @@ sm-button.danger {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
#main {
|
||||
#main_page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -940,7 +937,6 @@ sm-button.danger {
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
#main_navbar .logo-section {
|
||||
margin: 1rem 0 1.5rem 0;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
#main_navbar .active {
|
||||
@ -1109,10 +1105,7 @@ sm-button.danger {
|
||||
#contacts .header sm-input, #mails .header sm-input, #settings_page .header sm-input {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#contacts .header sm-input::part(input), #mails .header sm-input::part(input), #settings_page .header sm-input::part(input) {
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
--padding: 0.5rem 1rem;
|
||||
}
|
||||
#contacts .header h4, #mails .header h4, #settings_page .header h4 {
|
||||
text-transform: capitalize;
|
||||
@ -1513,6 +1506,9 @@ sm-button.danger {
|
||||
justify-content: center;
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
.big-emoji .text-emoji {
|
||||
font-size: 2.6rem !important;
|
||||
}
|
||||
|
||||
#chat_middle {
|
||||
flex: 1;
|
||||
@ -1780,6 +1776,8 @@ sm-panel {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-radius: 1rem;
|
||||
border: solid;
|
||||
margin: 1.5rem;
|
||||
}
|
||||
|
||||
#call_controls {
|
||||
@ -1788,6 +1786,21 @@ sm-panel {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#pick_up_call {
|
||||
color: #00C853;
|
||||
}
|
||||
|
||||
.circular-button {
|
||||
align-items: center;
|
||||
--padding: 0;
|
||||
--border-radius: 50%;
|
||||
}
|
||||
.circular-button .filled {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.hide-on-mobile {
|
||||
position: fixed;
|
||||
@ -1957,7 +1970,7 @@ sm-panel {
|
||||
min-width: 36rem;
|
||||
}
|
||||
|
||||
#main {
|
||||
#main_page {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -147,9 +147,7 @@ strong{
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
&::part(button){
|
||||
padding: 0.9rem 1.6rem;
|
||||
}
|
||||
--padding: 0.9rem 1.6rem;
|
||||
.icon{
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0.5rem;
|
||||
@ -198,10 +196,10 @@ span.ripple{
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
sm-input{
|
||||
--border-radius: 0.5rem;
|
||||
}
|
||||
sm-popup{
|
||||
sm-input::part(input){
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
sm-input + sm-input{
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@ -397,9 +395,7 @@ sm-button.danger{
|
||||
}
|
||||
sm-button{
|
||||
width: 100%;
|
||||
&::part(button){
|
||||
padding: 0.8rem 1.6rem;
|
||||
}
|
||||
--padding: 0.8rem 1.6rem;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0.5rem;
|
||||
@ -499,7 +495,7 @@ sm-button.danger{
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
#main{
|
||||
#main_page{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -870,7 +866,6 @@ sm-button.danger{
|
||||
width: max(16rem, 60vw);
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
.logo-section{
|
||||
margin: 1rem 0 1.5rem 0;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.active{
|
||||
@ -1035,10 +1030,7 @@ sm-button.danger{
|
||||
sm-input{
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
sm-input::part(input){
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
--padding: 0.5rem 1rem;
|
||||
}
|
||||
h4{
|
||||
text-transform: capitalize;
|
||||
@ -1423,6 +1415,9 @@ sm-button.danger{
|
||||
justify-content: center;
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
.text-emoji{
|
||||
font-size: 2.6rem !important;
|
||||
}
|
||||
}
|
||||
#chat_middle{
|
||||
flex: 1;
|
||||
@ -1681,12 +1676,27 @@ sm-panel{
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-radius: 1rem;
|
||||
border: solid;
|
||||
margin: 1.5rem;
|
||||
}
|
||||
#call_controls{
|
||||
padding: 1.5rem;
|
||||
margin-top: auto;
|
||||
justify-self: center;
|
||||
}
|
||||
#pick_up_call{
|
||||
color: #00C853;
|
||||
}
|
||||
.circular-button{
|
||||
align-items: center;
|
||||
.filled{
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
--padding: 0;
|
||||
--border-radius: 50%;
|
||||
}
|
||||
@media screen and (max-width: 640px){
|
||||
.hide-on-mobile{
|
||||
position: fixed;
|
||||
@ -1839,7 +1849,7 @@ sm-panel{
|
||||
#reply_mail_popup::part(popup){
|
||||
min-width: 36rem;
|
||||
}
|
||||
#main{
|
||||
#main_page{
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
#emoji_picker{
|
||||
|
||||
57
index.html
57
index.html
File diff suppressed because one or more lines are too long
@ -12,6 +12,9 @@ smButton.innerHTML = `
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
--padding: 0.6rem 1.2rem;
|
||||
--border-radius: 0.3rem;
|
||||
--background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
:host([disable]) .button{
|
||||
cursor: not-allowed;
|
||||
@ -45,13 +48,13 @@ smButton.innerHTML = `
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0.6rem 1.2rem;
|
||||
padding: var(--padding);
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
border-radius: 0.3rem;
|
||||
border-radius: var(--border-radius);
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
@ -63,17 +66,11 @@ smButton.innerHTML = `
|
||||
text-transform: capitalize;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
background: var(--background);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
span.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
background: rgba(var(--text-color), 0.2);
|
||||
}
|
||||
:host(:not([disable])) .button:focus-visible{
|
||||
-webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
|
||||
box-shadow: 0 0 0 0.1rem var(--accent-color);
|
||||
@ -199,6 +196,8 @@ border: none;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
--border-radius: 0.3rem;
|
||||
--padding: 0.7rem 1rem;
|
||||
}
|
||||
.hide{
|
||||
opacity: 0 !important;
|
||||
@ -236,8 +235,8 @@ border: none;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
gap: 0.5rem;
|
||||
padding: 0.7rem 1rem;
|
||||
border-radius: 0.3rem;
|
||||
padding: var(--padding);
|
||||
border-radius: var(--border-radius);
|
||||
-webkit-transition: opacity 0.3s;
|
||||
-o-transition: opacity 0.3s;
|
||||
transition: opacity 0.3s;
|
||||
@ -578,6 +577,7 @@ smTextarea.innerHTML = `
|
||||
}
|
||||
:host{
|
||||
display: grid;
|
||||
--border-radius: 0.3s;
|
||||
}
|
||||
:host(.outlined) .textarea {
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
|
||||
@ -594,7 +594,7 @@ smTextarea.innerHTML = `
|
||||
align-items: stretch;
|
||||
max-height: 8rem;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.3rem;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
.textarea::after,
|
||||
textarea{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user