fix: batch rename margins to their var equivalent

Some of those are used in calculus and cannot be renamed
pull/2425/head
Audric Ackermann 3 years ago
parent 6876dad8c4
commit 36f929a1ca

@ -91,7 +91,7 @@ $borderAvatarColor: unquote(
}
.module-avatar-clickable {
transition: $session-transition-duration;
transition: var(--default-duration);
cursor: pointer;
&:hover {
filter: grayscale(0.7);

@ -67,7 +67,7 @@
filter: brightness(1.05);
svg path {
transition: $session-transition-duration;
transition: var(--default-duration);
opacity: 0.6;
fill: var(--color-text-opposite);
}

@ -162,7 +162,7 @@
.edit-profile-dialog {
.session-modal__header__title {
font-size: $session-font-lg;
font-size: var(--font-size-lg);
}
.session-modal {
@ -191,7 +191,7 @@
width: 30px;
border-radius: 50%;
background-color: $session-color-white;
transition: $session-transition-duration;
transition: var(--default-duration);
&:hover {
filter: brightness(90%);
@ -216,7 +216,7 @@
.profile-name {
display: flex;
justify-content: center;
margin-top: $session-margin-lg;
margin-top: var(--margins-lg);
input {
height: 38px;
@ -235,7 +235,7 @@
p {
font-size: $session-font-md;
padding: 0px $session-margin-sm;
padding: 0px var(--margins-sm);
}
.session-icon-button {
@ -247,7 +247,7 @@
.onion-status-dialog {
.session-modal__header__title {
font-size: $session-font-lg;
font-size: var(--font-size-lg);
}
.session-modal {

@ -231,8 +231,8 @@
}
.module-conversation__user,
.module-message__author {
margin-top: $session-margin-sm;
margin-bottom: $session-margin-xs;
margin-top: var(--margins-sm);
margin-bottom: var(--margins-xs);
font-size: var(--font-size-sm);
font-weight: 300;
line-height: 18px;
@ -675,7 +675,7 @@
overflow: hidden;
.session-icon-button:first-child {
margin-right: $session-margin-sm;
margin-right: var(--margins-sm);
}
}
@ -1214,7 +1214,7 @@
align-items: flex-start;
min-height: 65px;
margin: $session-margin-xs;
margin: var(--margins-xs);
}
.module-staged-link-preview--is-loading {
@ -1232,11 +1232,11 @@
.module-staged-link-preview__icon-container {
margin-inline-end: 8px;
padding: $session-margin-sm;
padding: var(--margins-sm);
}
.module-staged-link-preview__content {
margin-inline-end: 20px;
padding: $session-margin-sm;
padding: var(--margins-sm);
}
.module-staged-link-preview__title {
color: $color-gray-90;

@ -92,7 +92,7 @@ textarea {
user-select: none;
white-space: nowrap;
cursor: pointer;
transition: $session-transition-duration;
transition: var(--default-duration);
background-color: rgba(0, 0, 0, 0);
&.disabled {
@ -196,7 +196,7 @@ textarea {
min-width: 165px;
height: 45px;
align-items: center;
padding: 0px $session-margin-lg;
padding: 0px var(--margins-lg);
font-size: $session-font-md;
font-family: $session-font-accent;
border-radius: 500px;
@ -229,7 +229,7 @@ textarea {
.session-label {
color: $session-color-white;
padding: $session-margin-sm;
padding: var(--margins-sm);
width: 100%;
border-radius: 2px;
text-align: center;
@ -260,7 +260,7 @@ textarea {
&:hover {
opacity: 1;
}
transition: opacity $session-transition-duration;
transition: opacity var(--default-duration);
&.no-opacity {
opacity: 1;
@ -324,7 +324,7 @@ textarea {
pre {
backdrop-filter: brightness(0.8);
padding: $session-margin-xs;
padding: var(--margins-xs);
}
.module-message__container {
@ -371,7 +371,7 @@ label {
.module-conversation-header {
position: relative;
padding: 0px $session-margin-lg 0px $session-margin-sm;
padding: 0px var(--margins-lg) 0px var(--margins-sm);
}
.title-wrapper {
@ -416,7 +416,7 @@ label {
}
.session-modal {
animation: fadein $session-transition-duration;
animation: fadein var(--default-duration);
z-index: 150;
min-width: 300px;
box-sizing: border-box;
@ -438,7 +438,7 @@ label {
justify-content: space-between;
align-items: center;
padding: $session-margin-lg;
padding: var(--margins-lg);
font-family: $session-font-default;
text-align: center;
@ -469,7 +469,7 @@ label {
}
&__close > div {
float: left;
padding: $session-margin-xs;
padding: var(--margins-xs);
margin: 0px;
}
&__icons > div {
@ -479,7 +479,7 @@ label {
}
&__body {
padding: 0px $session-margin-lg $session-margin-lg $session-margin-lg;
padding: 0px var(--margins-lg) var(--margins-lg) var(--margins-lg);
font-family: $session-font-default;
line-height: $session-font-md;
font-size: $session-font-md;
@ -514,7 +514,7 @@ label {
justify-content: flex-end;
.session-button {
margin: $session-margin-xs;
margin: var(--margins-xs);
}
&__center {
@ -522,7 +522,7 @@ label {
justify-content: center;
.session-button {
margin: $session-margin-xs;
margin: var(--margins-xs);
}
}
}
@ -546,7 +546,7 @@ label {
.session-confirm {
&-wrapper {
.session-modal__body .session-modal__centered {
margin: $session-margin-lg;
margin: var(--margins-lg);
text-align: center;
}
}
@ -583,8 +583,8 @@ label {
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.05), 0 3px 1px 0 rgba(0, 0, 0, 0.05),
0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
transition: transform $session-transition-duration ease,
background-color $session-transition-duration ease;
transition: transform var(--default-duration) ease,
background-color var(--default-duration) ease;
}
&.active {
@ -614,7 +614,7 @@ label {
color: var(--color-text-menu-highlighted);
}
.react-contexify__item__content {
transition: $session-transition-duration;
transition: var(--default-duration);
color: var(--color-text);
}
@ -637,7 +637,7 @@ label {
align-items: center;
justify-content: space-between;
height: 50px;
padding: 0px $session-margin-md;
padding: 0px var(--margins-md);
font-size: $session-font-sm;
color: var(--color-text);
@ -668,13 +668,13 @@ label {
align-items: center;
justify-content: center;
height: 35px;
padding: 0 $session-margin-md;
padding: 0 var(--margins-md);
background: var(--color-cell-background);
color: var(--color-text);
font-size: 0.8rem;
width: -webkit-fill-available;
transition: $session-transition-duration;
transition: var(--default-duration);
&:first-child {
border-top: var(--border-session);
@ -724,7 +724,7 @@ label {
border-radius: 100%;
background-color: rgba($session-color-black, 0.72);
opacity: 0;
transition: $session-transition-duration;
transition: var(--default-duration);
&:after {
content: 'Edit';
@ -745,7 +745,7 @@ label {
width: 135px;
height: 135px;
border-radius: 3px;
padding: $session-margin-xs;
padding: var(--margins-xs);
background-color: $session-color-white;
}
}
@ -841,20 +841,20 @@ label {
&-title {
line-height: $main-view-header-height;
font-weight: bold;
font-size: $session-font-lg;
font-size: var(--font-size-lg);
text-align: center;
flex-grow: 1;
}
.session-button,
.session-icon-button {
margin-inline-end: $session-margin-lg;
margin-inline-end: var(--margins-lg);
}
}
&-item {
font-size: $session-font-md;
padding: $session-margin-lg;
padding: var(--margins-lg);
margin-bottom: 20px;
background: var(--color-cell-background);
@ -868,12 +868,12 @@ label {
}
&__info {
padding-inline-end: $session-margin-lg;
padding-inline-end: var(--margins-lg);
}
&__title {
line-height: 1.7;
font-size: $session-font-lg;
font-size: var(--font-size-lg);
font-weight: bold;
}
@ -887,7 +887,7 @@ label {
&__selection {
.session-toggle {
transition: $session-transition-duration;
transition: var(--default-duration);
}
}
}
@ -904,13 +904,13 @@ label {
display: flex;
justify-content: space-between;
padding: $session-margin-sm $session-margin-md;
padding: var(--margins-sm) var(--margins-md);
background: none;
font-size: $session-font-xs;
span {
opacity: 0.4;
transition: $session-transition-duration;
transition: var(--default-duration);
&:hover {
opacity: 1;
@ -941,7 +941,7 @@ label {
h3 {
padding: 0px;
margin-bottom: $session-margin-lg;
margin-bottom: var(--margins-lg);
}
input {
@ -949,13 +949,13 @@ label {
background: var(--color-input-background);
color: var(--color-text);
padding: $session-margin-xs $session-margin-md;
margin-bottom: $session-margin-lg;
padding: var(--margins-xs) var(--margins-md);
margin-bottom: var(--margins-lg);
outline: none;
border: none;
border-radius: 2px;
text-align: center;
font-size: $session-font-xl;
font-size: 24px;
letter-spacing: 5px;
font-family: $session-font-default;
}
@ -967,17 +967,17 @@ label {
.qr-image svg {
width: $session-modal-size-sm;
height: $session-modal-size-sm;
padding: $session-margin-xs;
padding: var(--margins-xs);
background-color: $session-color-white;
border-radius: 3px;
}
.messages li {
transition: $session-transition-duration !important;
transition: var(--default-duration) !important;
}
.session-id-editable {
padding: $session-margin-lg;
padding: var(--margins-lg);
textarea {
width: 30vh;
@ -1028,7 +1028,7 @@ input {
.onion__node-list {
display: flex;
flex-direction: column;
margin: $session-margin-sm;
margin: var(--margins-sm);
align-items: center;
min-width: 10vw;
position: relative;
@ -1037,7 +1037,7 @@ input {
display: flex;
flex-grow: 1;
align-items: center;
margin: $session-margin-xs;
margin: var(--margins-xs);
&:nth-child(2) {
margin-top: 0;
@ -1048,7 +1048,7 @@ input {
}
.session-icon-button {
margin: $session-margin-sm !important;
margin: var(--margins-sm) !important;
}
}
@ -1056,7 +1056,7 @@ input {
position: relative;
}
.onion__node__country {
margin: $session-margin-sm;
margin: var(--margins-sm);
min-width: 150px;
}
@ -1089,7 +1089,7 @@ input {
box-shadow: var(--color-session-shadow);
svg path {
transition: $session-transition-duration;
transition: var(--default-duration);
opacity: 0.6;
fill: var(--color-text);
}

@ -71,10 +71,6 @@ $session-shade-16: #979797;
$session-shade-17: #a0a0a0;
$session-shade-18: #141414;
$session-opaque-dark-1: rgba(0, 0, 0, 0.25);
$session-opaque-dark-2: rgba(0, 0, 0, 0.37);
$session-opaque-dark-3: rgba(0, 0, 0, 0.5);
$session-color-white: #fff;
$session-color-light-grey: #a0a0a0;
$session-color-dark-grey: #353535;
@ -103,13 +99,8 @@ $session-overlay-opacity: 0.3;
$session-font-xs: 11px;
$session-font-sm: 13px;
$session-font-md: 15px;
$session-font-lg: 18px;
$session-font-xl: 24px;
$session-font-h1: 30px;
$session-font-h2: 24px;
$session-font-h3: 20px;
$session-font-h4: 16px;
// Mixins
@mixin fontAccentBold {

@ -64,7 +64,7 @@
display: flex;
left: 0px;
right: 0px;
padding: 0px $session-margin-md;
padding: 0px var(--margins-md);
align-items: center;
justify-content: space-between;
height: $main-view-header-height;
@ -96,7 +96,7 @@
.selection-mode {
.messages-container > *:not(.message-selected) {
animation: toShadow $session-transition-duration;
animation: toShadow var(--default-duration);
opacity: 0.4;
}
}
@ -150,21 +150,21 @@
overflow-x: hidden;
min-width: 370px;
scrollbar-width: 4px;
padding: $session-margin-sm $session-margin-lg $session-margin-lg;
padding: var(--margins-sm) var(--margins-lg) var(--margins-lg);
}
.composition-container {
display: flex;
justify-content: center;
align-items: center;
padding: 0px $session-margin-md;
padding: 0px var(--margins-md);
min-height: min-content;
background: var(--color-cell-background);
border-top: var(--border-session);
z-index: 1;
.session-icon-button {
margin-right: $session-margin-sm;
margin-right: var(--margins-sm);
display: flex;
justify-content: center;
@ -174,11 +174,11 @@
&:hover {
opacity: 1;
filter: brightness(0.9);
transition: $session-transition-duration;
transition: var(--default-duration);
}
.send {
padding: $session-margin-xs;
padding: var(--margins-xs);
border-radius: 50%;
height: 30px;
width: 30px;
@ -191,7 +191,7 @@
align-items: center;
flex-grow: 1;
min-height: $composition-container-height;
padding: $session-margin-xs 0;
padding: var(--margins-xs) 0;
z-index: 1;
background-color: inherit;
@ -204,7 +204,7 @@
font-family: $session-font-default;
min-height: calc($composition-container-height / 3);
max-height: 3 * $composition-container-height;
margin-right: $session-margin-md;
margin-right: var(--margins-md);
color: var(--color-text);
background: transparent;
@ -235,12 +235,12 @@
position: absolute;
bottom: 68px;
right: 0px;
padding: $session-margin-lg;
padding: var(--margins-lg);
z-index: 5;
opacity: 0;
visibility: hidden;
transition: $session-transition-duration;
transition: var(--default-duration);
button:focus {
outline: none;
@ -257,14 +257,14 @@
background-color: var(--color-cell-background);
border: 1px solid var(--color-session-border);
border-radius: 8px;
padding-bottom: $session-margin-sm;
padding-bottom: var(--margins-sm);
.emoji-mart-category-label {
top: -2px;
span {
font-family: $session-font-default;
padding-top: $session-margin-sm;
padding-top: var(--margins-sm);
background-color: var(--color-cell-background);
}
}
@ -324,7 +324,7 @@
}
.send-message-button {
animation: fadein $session-transition-duration;
animation: fadein var(--default-duration);
&---scale {
animation: scaling 2s ease-in-out;
@ -363,11 +363,11 @@
border-radius: 50%;
.session-button {
animation: fadein $session-transition-duration;
animation: fadein var(--default-duration);
}
.session-icon-button {
animation: fadein $session-transition-duration;
animation: fadein var(--default-duration);
border-radius: 50%;
width: $actions-element-size;
height: $actions-element-size;
@ -389,7 +389,7 @@
canvas {
position: absolute;
width: 100%;
padding: 0px $session-margin-lg;
padding: 0px var(--margins-lg);
}
}
@ -400,7 +400,7 @@
left: 0;
z-index: 2;
right: 0;
bottom: $composition-container-height + $session-margin-md;
bottom: $composition-container-height + var(--margins-md);
.session-button {
display: flex;
@ -434,7 +434,7 @@
flex-shrink: 0;
&.playback-timer {
animation: fadein $session-transition-duration;
animation: fadein var(--default-duration);
@media (-webkit-min-device-pixel-ratio: 1.6) {
margin-left: auto;
@ -442,11 +442,11 @@
}
&-light {
height: $session-margin-sm;
width: $session-margin-sm;
height: var(--margins-sm);
width: var(--margins-sm);
border-radius: 50%;
background-color: $session-color-danger-alt;
margin: 0 $session-margin-sm;
margin: 0 var(--margins-sm);
@include pulse-color($session-color-danger-alt, 1s, infinite);
}
@ -477,7 +477,7 @@ $rhap_font-family: inherit !default;
box-shadow: none;
svg {
transition: fill $session-transition-duration;
transition: fill var(--default-duration);
&:hover path {
fill: #ffffff;

@ -10,8 +10,8 @@
&-header {
margin-top: var(--margins-lg);
margin-inline-start: $session-margin-sm;
margin-inline-end: $session-margin-sm;
margin-inline-start: var(--margins-sm);
margin-inline-end: var(--margins-sm);
width: -webkit-fill-available;
display: flex;
flex-direction: row;
@ -27,7 +27,7 @@
}
.description {
margin: $session-margin-md 0;
margin: var(--margins-md) 0;
min-height: 4rem;
width: inherit;
color: var(--color-text);
@ -49,8 +49,8 @@
border-bottom: var(--border-session);
width: -webkit-fill-available;
padding: 0 $session-margin-md;
transition: $session-transition-duration;
padding: 0 var(--margins-md);
transition: var(--default-duration);
cursor: pointer;
&:hover {
@ -121,7 +121,7 @@
}
&__content {
padding: $session-margin-xs;
padding: var(--margins-xs);
margin-bottom: 1vh;
.module-media-grid-item__image,

@ -13,7 +13,7 @@ $session-compose-margin: 20px;
}
&-list-item {
transition: $session-transition-duration;
transition: var(--default-duration);
&:hover {
background: var(--color-clickable-hovered);
@ -88,13 +88,13 @@ $session-compose-margin: 20px;
align-items: center;
height: $main-view-header-height;
padding-inline-end: 7px;
transition: $session-transition-duration;
transition: var(--default-duration);
}
&__title {
padding-inline-end: $session-margin-sm;
padding-inline-start: $session-margin-sm;
transition: $session-transition-duration;
padding-inline-end: var(--margins-sm);
padding-inline-start: var(--margins-sm);
transition: var(--default-duration);
flex-grow: 1;
}

@ -33,13 +33,13 @@
&-error-section {
width: 100%;
color: $session-color-white;
margin: -$session-margin-sm 0px 2 * $session-margin-lg 0px;
margin: -var(--margins-sm) 0px 2 * $session-margin-lg 0px;
.session-label {
&.primary {
background-color: rgba($session-color-primary, 0.3);
}
padding: $session-margin-xs $session-margin-sm;
padding: var(--margins-xs) var(--margins-sm);
text-align: center;
}
}
@ -70,13 +70,13 @@
color: $session-color-white;
}
svg {
margin-inline-end: $session-margin-lg;
margin-inline-end: var(--margins-lg);
}
}
p,
input {
margin: $session-margin-lg 0px;
margin: var(--margins-lg) 0px;
}
.button-group {
@ -88,7 +88,7 @@
color: #fff;
background-color: #2e2e2e;
margin-top: 2 * $session-margin-lg;
padding: $session-margin-xs $session-margin-lg;
padding: var(--margins-xs) var(--margins-lg);
outline: none;
border: none;
border-radius: 2px;

@ -95,7 +95,7 @@
color: var(--color-text);
padding: 2px 0 2px 0;
transition: opacity $session-transition-duration;
transition: opacity var(--default-duration);
opacity: 1;
position: relative;
@ -151,7 +151,7 @@
}
&-terms-conditions-agreement {
padding-top: $session-margin-md;
padding-top: var(--margins-md);
color: var(--color-text-subtle);
text-align: center;
@ -163,7 +163,7 @@
text-decoration: none;
color: var(--color-text-subtle);
transition: $session-transition-duration;
transition: var(--default-duration);
&:visited &:link {
color: var(--color-text-subtle);

@ -41,7 +41,7 @@
margin: 0px 0px 0px -1px;
}
.rc-slider-handle {
transition: $session-transition-duration;
transition: var(--default-duration);
position: absolute;
width: 6px;
height: 25px;

@ -60,7 +60,7 @@
align-items: center;
svg {
margin-right: $session-margin-xs;
margin-right: var(--margins-xs);
}
a {

Loading…
Cancel
Save