This commit is contained in:
Jamie Kyle
2023-04-20 10:03:43 -07:00
committed by GitHub
parent 1f2cde6d04
commit 0e490542a7
196 changed files with 2117 additions and 1217 deletions
@@ -124,7 +124,7 @@ $emoji-height: 64px;
width: $width - (2 * $guide-offset);
height: $height - (2 * $guide-offset);
position: absolute;
left: $guide-offset - $border-width;
inset-inline-start: $guide-offset - $border-width;
top: $guide-offset - $border-width;
pointer-events: none;
@@ -132,7 +132,7 @@ $emoji-height: 64px;
width: $emoji-width;
height: $emoji-height;
position: absolute;
left: calc(($width - $emoji-width) / 2);
inset-inline-start: calc(($width - $emoji-width) / 2);
top: calc(($height - $emoji-height) / 2);
}
}
@@ -140,7 +140,7 @@ $emoji-height: 64px;
.close-button {
position: absolute;
top: 8px;
right: 8px;
inset-inline-end: 8px;
width: 20px;
height: 20px;
@@ -169,7 +169,7 @@ $emoji-height: 64px;
height: 32px;
position: absolute;
top: 6px;
right: 6px;
inset-inline-end: 6px;
border: none;
border-radius: 16px;
padding: 0;
@@ -202,7 +202,8 @@ $emoji-height: 64px;
.emoji-name-input {
width: 100%;
padding: 7px 8px;
padding-block: 7px;
padding-inline: 8px;
border-radius: 4px;
background-color: transparent;
font-size: 14px;
@@ -30,7 +30,8 @@
.title-bar {
height: 36px;
padding: 9px 16px;
padding-block: 9px;
padding-inline: 16px;
display: flex;
flex-direction: row;
align-items: center;
@@ -61,7 +62,8 @@
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 16px 0 12px;
padding-block: 0;
padding-inline: 12px 16px;
overflow: auto;
justify-items: center;
@@ -76,7 +78,8 @@
}
.meta {
padding: 18px 16px;
padding-block: 18px;
padding-inline: 16px;
display: flex;
@include light-theme {
@@ -9,6 +9,6 @@
justify-content: center;
align-items: center;
position: fixed;
left: 0;
inset-inline-start: 0;
top: 0;
}
@@ -9,7 +9,8 @@
border: none;
min-width: 80px;
height: 36px;
padding: 0 25px;
padding-block: 0;
padding-inline: 25px;
border-radius: 4px;
display: flex;
justify-content: center;
@@ -89,7 +90,8 @@
composes: base;
height: 28px;
border-radius: 15px;
padding: 0 17px;
padding-block: 0;
padding-inline: 17px;
@include light-theme() {
color: $color-gray-90;
@@ -9,7 +9,8 @@
max-width: 468px;
width: 100%;
height: 138px;
padding: 16px 16px 8px 16px;
padding-block: 16px 8px;
padding-inline: 16px;
display: flex;
flex-direction: column;
border-radius: 8px;
@@ -70,7 +71,8 @@
composes: base;
height: 28px;
border-radius: 15px;
padding: 0 17px;
padding-block: 0;
padding-inline: 17px;
@include light-theme() {
color: $color-gray-90;
@@ -19,7 +19,8 @@
flex-grow: 1;
height: 36px;
line-height: 34px;
padding: 0 12px;
padding-block: 0;
padding-inline: 12px;
border-radius: 4px;
background-color: transparent;
font-size: 14px;
@@ -24,7 +24,8 @@
}
.text {
margin: 16px 0 0 0;
margin-block: 16px 0;
margin-inline: 0;
font-family: $inter;
font-size: 14px;
font-weight: normal;
@@ -54,7 +54,7 @@
}
.label {
margin-left: 11px;
margin-inline-start: 11px;
position: relative;
user-select: none;
}
@@ -25,7 +25,8 @@
width: 100%;
height: 34px;
line-height: 34px;
padding: 0 12px;
padding-block: 0;
padding-inline: 12px;
border-radius: 4px;
background-color: transparent;
font-size: 14px;
@@ -47,7 +48,8 @@
&:focus {
outline: none;
padding: 0 11px;
padding-block: 0;
padding-inline: 11px;
@include light-theme() {
border: 2px solid $color-ultramarine;
@@ -6,7 +6,8 @@
.base {
background-color: $color-ultramarine;
padding: 6px 12px;
padding-block: 6px;
padding-inline: 12px;
border-radius: 18px;
color: $color-white-alpha-90;
font: {
@@ -13,7 +13,7 @@
}
.item {
margin-left: 6px;
margin-inline-start: 6px;
font: {
size: 11px;
family: $inter;
@@ -2,7 +2,8 @@
// SPDX-License-Identifier: AGPL-3.0-only
.base {
padding: 6px 12px;
padding-block: 6px;
padding-inline: 12px;
}
.image {
@@ -12,9 +12,11 @@
margin-bottom: 30px;
border-bottom-width: 1px;
border-bottom-style: solid;
padding: 0 64px;
padding-block: 0;
padding-inline: 64px;
@include small-screen() {
padding: 0 32px;
padding-block: 0;
padding-inline: 32px;
}
display: flex;
flex-direction: row;
@@ -32,11 +34,12 @@
.guidelines {
text-decoration: none;
padding: 12px 16px;
padding-block: 12px;
padding-inline: 16px;
}
.icon {
margin-right: 8px;
margin-inline-end: 8px;
}
.grow {
@@ -24,7 +24,8 @@
.frame {
width: 50%;
padding: 12px 12px 3px 12px;
padding-block: 12px 3px;
padding-inline: 12px;
}
.frame-light {
@@ -77,7 +78,7 @@
.arrow-left {
composes: arrow;
border-width: 8px 8px 8px 0;
left: -8px;
inset-inline-start: -8px;
@include light-theme() {
border-color: transparent $color-white transparent transparent;
@@ -91,7 +92,7 @@
.arrow-right {
composes: arrow;
border-width: 8px 0 8px 8px;
right: -8px;
inset-inline-end: -8px;
@include light-theme() {
border-color: transparent transparent transparent $color-white;
@@ -6,7 +6,8 @@
@import '../fonts.scss';
.base {
padding: 8px 12px;
padding-block: 8px;
padding-inline: 12px;
border-radius: 4px;
border: none;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 20px 0px rgba(0, 0, 0, 0.33);
+2 -1
View File
@@ -46,7 +46,8 @@ button.grey {
border-radius: 5px;
border: solid 1px $color-gray-25;
cursor: pointer;
margin: 1em auto;
margin-block: 1em;
margin-inline: auto;
padding: 1em;
font-family: inherit;
@@ -31,10 +31,12 @@
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 0 64px;
padding-block: 0;
padding-inline: 64px;
@include small-screen() {
padding: 0 32px;
padding-block: 0;
padding-inline: 32px;
}
}
@@ -47,13 +49,15 @@
}
.footer {
margin: 16px 64px;
margin-block: 16px;
margin-inline: 64px;
display: flex;
flex-direction: row;
align-items: center;
@include small-screen() {
margin: 16px 32px;
margin-block: 16px;
margin-inline: 32px;
}
}
@@ -64,12 +68,19 @@
}
.button {
margin-left: 12px;
margin-inline-start: 12px;
}
.toaster {
position: fixed;
bottom: 16px;
left: 50%;
transform: translate(-50%, 0px);
inset-inline-start: 50%;
&:dir(ltr) {
// stylelint-disable-next-line declaration-property-value-disallowed-list
transform: translate(-50%, 0px);
}
&:dir(rtl) {
// stylelint-disable-next-line declaration-property-value-disallowed-list
transform: translate(50%, 0px)
}
}
@@ -90,7 +90,7 @@
.edit-button {
position: absolute;
top: 6px;
right: 6px;
inset-inline-end: 6px;
content: '';
width: 32px;
height: 32px;
@@ -111,7 +111,7 @@
width: 24px;
height: 24px;
top: 5px;
left: 5px;
inset-inline-start: 5px;
mask-image: url(/src/assets/icons/compose-outline-24.svg);
mask-size: 22px;
-webkit-mask-image: url(/src/assets/icons/compose-outline-24.svg);
@@ -27,5 +27,6 @@
}
.progress {
margin: 24px 0;
margin-block: 24px;
margin-inline: 0;
}