mirror of
https://github.com/discourse/discourse.git
synced 2025-06-04 23:36:11 +08:00
DEV: Introduce stylelint (#29852)
Stylelint is a css linter: https://stylelint.io/ As part of this change we have added two javascript scripts: ``` pnpm lint:css pnpm lint:css:fix ``` Look at `.vscode/settings.json.sample` and `.vscode/extensions.json` for configuration in VSCode. --------- Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
This commit is contained in:
David Taylor
@ -57,9 +57,11 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
h2 {
|
||||
margin: 0 auto 0 0;
|
||||
}
|
||||
|
||||
&-filter {
|
||||
margin: 0;
|
||||
flex: 0 1 15em;
|
||||
@ -81,9 +83,11 @@
|
||||
grid-template-rows: subgrid;
|
||||
grid-row: span 4;
|
||||
gap: 0;
|
||||
|
||||
&__buttons {
|
||||
display: none; // empty container
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: 18.75em;
|
||||
}
|
||||
@ -128,6 +132,7 @@
|
||||
|
||||
.alert {
|
||||
padding: 1em;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
@ -312,9 +317,11 @@
|
||||
.control-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.control-label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin: 0;
|
||||
}
|
||||
@ -340,9 +347,11 @@
|
||||
.pm-field:not(:last-child) {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.pm-title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pm-textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -27,6 +27,7 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
z-index: z("header");
|
||||
pointer-events: none;
|
||||
|
||||
&-content {
|
||||
width: max-content;
|
||||
display: flex;
|
||||
@ -35,27 +36,33 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
|
||||
padding: 2em;
|
||||
background-color: #1d1d1d;
|
||||
border-radius: 0.25em;
|
||||
|
||||
&-images {
|
||||
.d-icon {
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
color: var(--secondary-or-primary);
|
||||
|
||||
&:first-of-type {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
height: 4em;
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
margin: 1.5em 0 0 0;
|
||||
font-size: var(--font-up-1);
|
||||
color: var(--secondary-or-primary);
|
||||
|
||||
.d-icon-upload {
|
||||
padding-right: 0.25em;
|
||||
position: relative;
|
||||
@ -94,7 +101,6 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
|
||||
.d-icon {
|
||||
color: var(--header_primary-low-mid);
|
||||
}
|
||||
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
@ -155,8 +161,7 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
|
||||
|
||||
.is-online & {
|
||||
padding: 2px;
|
||||
box-shadow: inset 0px 0px 0px 1px var(--success),
|
||||
inset 0px 0px 0px 2px var(--secondary);
|
||||
box-shadow: inset 0 0 0 1px var(--success), inset 0 0 0 2px var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -277,6 +282,7 @@ html.has-full-page-chat {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[data-popper-reference-hidden] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@ -63,7 +63,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
&:before {
|
||||
|
||||
&::before {
|
||||
content: none; //there is a strange thing applied on nav-pills and this resets it
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,9 +31,11 @@
|
||||
&__muted {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
&__read-restricted {
|
||||
font-size: var(--font-down-2-rem);
|
||||
}
|
||||
|
||||
&__muted {
|
||||
font-size: var(--font-down-1-rem);
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
.chat-channel-icon {
|
||||
flex-shrink: 0;
|
||||
|
||||
&.--users-count {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
overflow: hidden;
|
||||
grid-area: main;
|
||||
min-width: 250px;
|
||||
@include chat-height(var(--chat-header-offset, 0px));
|
||||
@include chat-height(var(--chat-header-offset, 0));
|
||||
|
||||
.join-channel-btn.in-float {
|
||||
position: absolute;
|
||||
|
||||
@ -44,9 +44,11 @@
|
||||
0% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
@ -83,6 +85,7 @@
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
.is-focused & {
|
||||
color: var(--tertiary);
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
|
||||
.d-icon {
|
||||
padding: 5px;
|
||||
|
||||
background: var(--primary-low);
|
||||
border-radius: 100%;
|
||||
}
|
||||
@ -14,7 +13,6 @@
|
||||
.d-icon {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
background: none !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
@ -91,7 +91,7 @@
|
||||
margin: 5px 0;
|
||||
text-overflow: ellipsis;
|
||||
cursor: inherit;
|
||||
@include chat-scrollbar();
|
||||
@include chat-scrollbar;
|
||||
white-space: pre-wrap !important;
|
||||
min-width: 20px;
|
||||
|
||||
|
||||
@ -66,7 +66,7 @@ html.rtl {
|
||||
border-bottom: 0;
|
||||
border-top-left-radius: var(--d-border-radius-large);
|
||||
border-top-right-radius: var(--d-border-radius-large);
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.125);
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.125);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -94,7 +94,7 @@ html.rtl {
|
||||
}
|
||||
|
||||
.chat-drawer-content {
|
||||
@include chat-scrollbar();
|
||||
@include chat-scrollbar;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -35,6 +35,7 @@
|
||||
color: var(--d-nav-color--active);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.discourse-no-touch &,
|
||||
@ -67,12 +68,14 @@
|
||||
right: unset;
|
||||
left: 50%;
|
||||
margin-left: 0.75rem;
|
||||
|
||||
&.-urgent {
|
||||
height: 1em;
|
||||
width: min-content;
|
||||
min-width: 0.6em;
|
||||
padding: 0.21em 0.42em;
|
||||
}
|
||||
|
||||
&:not(.-urgent) {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
@mixin chat-height($inset: 0px) {
|
||||
@mixin chat-height($inset: 0) {
|
||||
// desktop and mobile
|
||||
// -1px is for the bottom border of the chat navbar
|
||||
$base-height: calc(
|
||||
var(--composer-vh, 1vh) * 100 - var(--main-outlet-offset, 0px) - 1px -
|
||||
$inset
|
||||
);
|
||||
|
||||
height: calc($base-height - var(--composer-height, 0px));
|
||||
|
||||
// mobile with keyboard opened
|
||||
|
||||
@ -8,14 +8,14 @@
|
||||
padding: 0.5rem;
|
||||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||||
z-index: z("usercard");
|
||||
box-shadow: 0px 5px 5px -1px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 5px 5px -1px rgba(0, 0, 0, 0.25);
|
||||
|
||||
.d-icon {
|
||||
color: var(--primary-very-low);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.25);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
@ -29,12 +29,12 @@
|
||||
.channels-list,
|
||||
.channels-list-container {
|
||||
position: relative;
|
||||
@include chat-scrollbar();
|
||||
@include chat-scrollbar;
|
||||
height: 100%;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
@include breakpoint(mobile-large) {
|
||||
@include chat-scrollbar();
|
||||
@include chat-scrollbar;
|
||||
}
|
||||
|
||||
.open-browse-page-btn,
|
||||
@ -46,7 +46,7 @@
|
||||
color: var(--primary-medium);
|
||||
font-size: var(--font-0-rem);
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
|
||||
@ -74,8 +74,8 @@
|
||||
width: 2.5em;
|
||||
transition: var(--d-button-transition);
|
||||
border-radius: var(--d-border-radius);
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary-300);
|
||||
@ -128,7 +128,6 @@
|
||||
|
||||
.chat-message-reaction {
|
||||
@include chat-reaction;
|
||||
|
||||
align-items: center;
|
||||
border-radius: 0;
|
||||
border-left-color: transparent;
|
||||
|
||||
@ -33,6 +33,7 @@
|
||||
.-group & {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
|
||||
.d-icon-user-group {
|
||||
padding: 5px 5px;
|
||||
box-sizing: border-box;
|
||||
@ -225,6 +226,7 @@
|
||||
.user-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.fk-d-tooltip__trigger-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -234,6 +236,7 @@
|
||||
width: var(--font-down-2-rem);
|
||||
height: var(--font-down-2-rem);
|
||||
}
|
||||
|
||||
.user-status-message-description {
|
||||
@include ellipsis;
|
||||
font-size: var(--font-down-2-rem);
|
||||
@ -290,7 +293,7 @@
|
||||
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
@include default-focus();
|
||||
@include default-focus;
|
||||
}
|
||||
|
||||
&-container {
|
||||
|
||||
@ -43,9 +43,11 @@ $max_image_height: 150px;
|
||||
.thumbnail.onebox-avatar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aspect-image {
|
||||
margin-right: 0;
|
||||
max-width: 100%;
|
||||
|
||||
+ h3 {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
@ -54,6 +56,7 @@ $max_image_height: 150px;
|
||||
h3 {
|
||||
margin-block: 0.75rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
@ -78,6 +81,7 @@ $max_image_height: 150px;
|
||||
object-fit: contain;
|
||||
max-height: $max_image_height;
|
||||
max-width: calc(#{$max_image_height} / 9 * 16);
|
||||
|
||||
&:has(div[data-provider-name="tiktok"]) {
|
||||
max-height: unset;
|
||||
}
|
||||
|
||||
@ -92,6 +92,7 @@
|
||||
height: 0.9em;
|
||||
width: 0.9em;
|
||||
}
|
||||
|
||||
&__restricted-category-icon {
|
||||
background: var(--tertiary-very-low);
|
||||
height: 0.355em;
|
||||
@ -99,6 +100,7 @@
|
||||
margin-right: 0.4em;
|
||||
padding: 1px 1px 2px 1px;
|
||||
}
|
||||
|
||||
&:has(.--users-count) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -115,7 +115,7 @@
|
||||
|
||||
.react-btn {
|
||||
vertical-align: top;
|
||||
padding: 0em 0.25em;
|
||||
padding: 0 0.25em;
|
||||
background: none;
|
||||
border: none;
|
||||
will-change: scale;
|
||||
@ -178,6 +178,7 @@
|
||||
|
||||
&.-deleted {
|
||||
background-color: var(--danger-low);
|
||||
|
||||
.chat-message-expand {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
z-index: 1;
|
||||
margin: 0 1px 0 0;
|
||||
will-change: transform;
|
||||
@include chat-scrollbar();
|
||||
@include chat-scrollbar;
|
||||
min-height: 1px;
|
||||
box-sizing: border-box;
|
||||
transition: padding-top 0.2s ease-in-out;
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.category-chooser {
|
||||
.select-kit-selected-name.selected-name.choice {
|
||||
color: var(
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
.chat-modal-move-message-to-channel {
|
||||
&__channel-chooser {
|
||||
width: 100%;
|
||||
|
||||
.category-chat-badge {
|
||||
.d-icon {
|
||||
color: inherit;
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
}
|
||||
|
||||
&__toggle-drawer-button {
|
||||
&:after {
|
||||
&::after {
|
||||
@container (inline-size) {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -56,7 +56,7 @@
|
||||
}
|
||||
|
||||
.c-navbar__channel-title {
|
||||
@include ellipsis();
|
||||
@include ellipsis;
|
||||
font-weight: 700;
|
||||
height: var(--chat-header-offset);
|
||||
display: flex;
|
||||
@ -66,11 +66,11 @@
|
||||
.c-navbar__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include ellipsis();
|
||||
@include ellipsis;
|
||||
height: var(--chat-header-offset);
|
||||
|
||||
&-text {
|
||||
@include ellipsis();
|
||||
@include ellipsis;
|
||||
font-weight: 700;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
@ -108,6 +108,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--chat-header-offset);
|
||||
|
||||
.d-icon {
|
||||
color: var(--primary-low-mid);
|
||||
}
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
.chat-onebox-images.onebox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
max-height: 150px;
|
||||
|
||||
@ -43,6 +43,7 @@
|
||||
margin-top: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin-top: 0.35em;
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
// unicode zero width space character
|
||||
// Ensures the span height is consistent even when empty
|
||||
content: "\200b";
|
||||
@ -27,9 +27,11 @@
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: chat-replying-indicator__wave 1.8s linear infinite;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: -1.6s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: -1.4s;
|
||||
}
|
||||
@ -41,6 +43,7 @@
|
||||
100% {
|
||||
transform: initial;
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translateY(-0.2em);
|
||||
}
|
||||
|
||||
@ -41,6 +41,7 @@
|
||||
&:active,
|
||||
&:focus {
|
||||
background: none !important;
|
||||
|
||||
.d-icon {
|
||||
color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
@keyframes chat-quote-message-background-fade-highlight {
|
||||
0% {
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
". content";
|
||||
grid-template-columns: auto 1fr;
|
||||
|
||||
&:not(:first-of-type):not(:last-of-type) {
|
||||
&:not(:first-of-type, :last-of-type) {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
@ -29,6 +29,7 @@
|
||||
.chat-skeleton__body:nth-of-type(odd) & {
|
||||
background-color: var(--primary-100);
|
||||
}
|
||||
|
||||
.chat-skeleton__body:nth-of-type(even) & {
|
||||
background-color: var(--primary-200);
|
||||
}
|
||||
@ -45,6 +46,7 @@
|
||||
.chat-skeleton__body:nth-of-type(odd) & {
|
||||
background-color: var(--primary-100);
|
||||
}
|
||||
|
||||
.chat-skeleton__body:nth-of-type(even) & {
|
||||
background-color: var(--primary-200);
|
||||
}
|
||||
@ -86,6 +88,7 @@
|
||||
.chat-skeleton__body:nth-of-type(odd) & {
|
||||
background-color: var(--primary-100);
|
||||
}
|
||||
|
||||
.chat-skeleton__body:nth-of-type(even) & {
|
||||
background-color: var(--primary-200);
|
||||
}
|
||||
@ -109,10 +112,10 @@
|
||||
overflow: hidden;
|
||||
|
||||
*[class^="chat-skeleton__message-"]:not(
|
||||
.chat-skeleton__message-content
|
||||
):not(.chat-skeleton__message-text):not(
|
||||
.chat-skeleton__message-content,
|
||||
.chat-skeleton__message-text,
|
||||
.chat-skeleton__message-reactions
|
||||
):after {
|
||||
)::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
@ -73,12 +73,14 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
.chat-user-avatar {
|
||||
cursor: pointer;
|
||||
|
||||
&__container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border: 2px solid var(--primary-very-low);
|
||||
padding: 0;
|
||||
@ -92,6 +94,7 @@
|
||||
margin-right: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-thread-participants__avatar-group {
|
||||
overflow: hidden;
|
||||
justify-content: flex-start;
|
||||
|
||||
@ -35,6 +35,7 @@
|
||||
&:not(:last-child) {
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border: 1px solid var(--primary-very-low);
|
||||
}
|
||||
|
||||
@ -2,5 +2,5 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
@include chat-height(var(--chat-header-expanded-offset, 0px));
|
||||
@include chat-height(var(--chat-header-expanded-offset, 0));
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
&__items {
|
||||
overflow-y: scroll;
|
||||
@include chat-scrollbar();
|
||||
@include chat-scrollbar;
|
||||
box-sizing: border-box;
|
||||
flex-grow: 1;
|
||||
overscroll-behavior: contain;
|
||||
@ -18,6 +18,6 @@
|
||||
|
||||
&__no-threads {
|
||||
@include thread-list-item;
|
||||
margin: 0.5rem 0rem 0.5rem 0.5rem;
|
||||
margin: 0.5rem 0 0.5rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -78,6 +78,7 @@
|
||||
|
||||
.chat-transcript-thread {
|
||||
min-width: 0;
|
||||
|
||||
&-header {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@ -106,7 +107,6 @@
|
||||
|
||||
.chat-transcript-reaction {
|
||||
@include chat-reaction;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
@ -114,6 +114,7 @@
|
||||
.chat-transcript-images.onebox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
max-height: 150px;
|
||||
|
||||
@ -32,7 +32,6 @@
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(50% - 100px / 2);
|
||||
@ -49,7 +48,6 @@
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(50% - 100px / 2);
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
&.is-online {
|
||||
.avatar {
|
||||
padding: 2px;
|
||||
box-shadow: inset 0px 0px 0px 1px var(--success),
|
||||
inset 0px 0px 0px 2px var(--secondary);
|
||||
box-shadow: inset 0 0 0 1px var(--success),
|
||||
inset 0 0 0 2px var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,8 +22,8 @@
|
||||
.chat-message & {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.chat-channel-title & {
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
.chat-message-thread-indicator {
|
||||
margin-left: 0;
|
||||
margin-top: 1rem;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -59,9 +60,11 @@
|
||||
//sidebar
|
||||
#sidebar-section-content-user-threads {
|
||||
padding-bottom: 0.35em;
|
||||
|
||||
.sidebar-section-link-content-text {
|
||||
color: var(--d-sidebar-link-color);
|
||||
}
|
||||
|
||||
.active .sidebar-section-link-content-text {
|
||||
color: var(--d-sidebar-active-color);
|
||||
}
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
|
||||
li.user-profile-controls-outlet.chat-button {
|
||||
order: -1;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -36,7 +36,6 @@
|
||||
|
||||
.selected-user {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1px 0.25rem 0.25rem 1px;
|
||||
padding: 0.25rem 0.5rem 0.25rem 0.25rem;
|
||||
background: var(--primary-very-low);
|
||||
@ -166,6 +165,7 @@
|
||||
|
||||
.btn {
|
||||
padding: 0.25em;
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
font-size: var(--font-up-1);
|
||||
}
|
||||
}
|
||||
|
||||
&--controls {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
@ -56,7 +56,6 @@
|
||||
@import "chat-modal-archive-channel";
|
||||
@import "chat-modal-edit-channel-description";
|
||||
@import "chat-modal-create-channel";
|
||||
@import "chat-modal-create-channel";
|
||||
@import "chat-modal-channel-summary";
|
||||
@import "chat-modal-move-message-to-channel";
|
||||
@import "chat-scroll-to-bottom";
|
||||
|
||||
@ -27,10 +27,12 @@
|
||||
|
||||
&.--threads {
|
||||
margin-top: 0.25rem;
|
||||
|
||||
.c-unread-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.chat-channel-title {
|
||||
gap: 0.5rem;
|
||||
color: var(--primary);
|
||||
|
||||
@ -32,9 +32,11 @@
|
||||
height: 2.5em;
|
||||
padding: 0 0.5rem;
|
||||
margin: 0 0.5rem 0.125rem 0.5rem;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: var(--primary-low);
|
||||
|
||||
.chat-channel-title {
|
||||
.category-chat-name,
|
||||
.chat-name,
|
||||
@ -51,9 +53,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.channels-list-container {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.channels-list-container.center-empty-channels-list {
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
@ -15,11 +15,13 @@
|
||||
grid-template-areas:
|
||||
"avatar info info participants"
|
||||
"excerpt excerpt excerpt replies";
|
||||
|
||||
&__replies-count {
|
||||
align-self: center;
|
||||
grid-area: replies;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__last-reply-excerpt {
|
||||
white-space: wrap;
|
||||
display: -webkit-box;
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
--scrollbarBg: transparent;
|
||||
--scrollbarThumbBg: var(--primary-low);
|
||||
--scrollbarWidth: 10px;
|
||||
|
||||
scrollbar-color: transparent var(--scrollbarBg);
|
||||
transition: scrollbar-color 0.25s ease-in-out;
|
||||
|
||||
|
||||
@ -67,6 +67,7 @@ html.has-full-page-chat {
|
||||
&.active .d-icon {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
.chat-channel-unread-indicator {
|
||||
border-color: var(--primary-very-low);
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.c-channel-members {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
:root {
|
||||
--channel-list-avatar-size: 43px;
|
||||
}
|
||||
|
||||
.chat-channel-row {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
@ -15,7 +16,6 @@
|
||||
.chat-channel-row__content {
|
||||
background-color: var(--danger-low);
|
||||
}
|
||||
|
||||
height: 0 !important;
|
||||
overflow: hidden;
|
||||
opacity: 0.5 !important;
|
||||
@ -27,14 +27,16 @@
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
transition: border-radius 0.25s ease-in-out;
|
||||
|
||||
//for sliding delete animation
|
||||
background: var(--primary-very-low);
|
||||
height: 100%;
|
||||
|
||||
&.-animate-reset {
|
||||
transition: margin-right 0.15s ease-out;
|
||||
margin-right: 0px !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
&:not(.-animate-reset) {
|
||||
border-top-right-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
@ -48,6 +50,7 @@
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.is-dm & {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
@ -55,6 +58,7 @@
|
||||
"msg msg";
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
&:has(.chat-channel-unread-indicator) {
|
||||
grid-template-areas:
|
||||
"name metadata"
|
||||
@ -69,10 +73,10 @@
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: var(--danger);
|
||||
color: var(--primary-very-low);
|
||||
|
||||
@ -101,16 +105,20 @@
|
||||
&__channel-info {
|
||||
grid-area: name;
|
||||
}
|
||||
|
||||
&__metadata {
|
||||
grid-area: metadata;
|
||||
|
||||
.chat-channel-unread-indicator {
|
||||
font-size: var(--font-down-2);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__metadata-date {
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
|
||||
&__last-message {
|
||||
@include ellipsis;
|
||||
grid-area: msg;
|
||||
|
||||
@ -2,10 +2,12 @@
|
||||
&__wrapper {
|
||||
padding-top: 0.75rem;
|
||||
background: none;
|
||||
|
||||
.chat-replying-indicator {
|
||||
padding-left: calc(1rem + (2 * 5px) + 0.2rem + (2 * 0.65rem) + 1px);
|
||||
}
|
||||
}
|
||||
|
||||
&__outer-container {
|
||||
padding: 0;
|
||||
align-items: flex-end;
|
||||
@ -14,22 +16,27 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__inner-container {
|
||||
align-self: stretch;
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
&__input-container {
|
||||
padding: 0.15em 0.5em;
|
||||
background: var(--primary-very-low);
|
||||
}
|
||||
|
||||
&__input {
|
||||
.ios-device & {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&-button__wrapper {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
&-button.-send {
|
||||
height: auto;
|
||||
width: auto;
|
||||
@ -42,6 +49,7 @@
|
||||
.is-send-enabled & {
|
||||
background-color: var(--tertiary-high);
|
||||
color: var(--secondary);
|
||||
|
||||
.d-icon {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@ -14,11 +14,13 @@
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__section-title {
|
||||
.chat-form__section:not(:first-of-type) & {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__row-content {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
margin-top: 0.5rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
&__replies-count {
|
||||
grid-area: replies;
|
||||
}
|
||||
|
||||
@ -36,9 +36,11 @@
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
@ -42,8 +42,10 @@
|
||||
.chat__thread-title-container {
|
||||
display: flex;
|
||||
grid-area: title;
|
||||
|
||||
.chat__thread-title {
|
||||
@include ellipsis;
|
||||
|
||||
&__name {
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
@import "chat-thread";
|
||||
@import "chat-threads-list";
|
||||
@import "chat-message-thread-indicator";
|
||||
@import "chat-message-creator";
|
||||
@import "chat-channel-row";
|
||||
@import "chat-channel-members";
|
||||
@import "chat-channel-settings";
|
||||
|
||||
@ -3,18 +3,13 @@ span.chcklst-stroked {
|
||||
}
|
||||
|
||||
@mixin checklist-svg-icon($svg) {
|
||||
&:before {
|
||||
&::before {
|
||||
background-color: var(--primary);
|
||||
content: "";
|
||||
-webkit-mask: svg-uri(
|
||||
'<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 448 512"><path d="#{$svg}"></path></svg>'
|
||||
)
|
||||
no-repeat 50% 50%;
|
||||
mask: svg-uri(
|
||||
'<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 448 512"><path d="#{$svg}"></path></svg>'
|
||||
)
|
||||
no-repeat 50% 50%;
|
||||
-webkit-mask-size: cover;
|
||||
mask-size: cover;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
@ -32,6 +27,7 @@ span.chcklst-box {
|
||||
"M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"
|
||||
);
|
||||
}
|
||||
|
||||
&.fa-square {
|
||||
@include checklist-svg-icon(
|
||||
"M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"
|
||||
@ -80,7 +76,8 @@ ul li.has-checkbox {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
|
||||
100% {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,7 +52,7 @@ summary:first-of-type {
|
||||
display: block;
|
||||
}
|
||||
|
||||
summary:before {
|
||||
summary::before {
|
||||
content: "\25BA";
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
@ -62,8 +62,8 @@ details[open] .lightbox-wrapper {
|
||||
display: block;
|
||||
}
|
||||
|
||||
details[open] > summary:before,
|
||||
details.open > summary:before {
|
||||
details[open] > summary::before,
|
||||
details.open > summary::before {
|
||||
content: "\25BC";
|
||||
}
|
||||
|
||||
@ -99,12 +99,13 @@ summary::-webkit-details-marker {
|
||||
&[open] {
|
||||
background: var(--primary-very-low);
|
||||
padding: 0.5rem 0.75rem;
|
||||
|
||||
summary {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
summary:before {
|
||||
summary::before {
|
||||
content: "" !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -32,12 +32,11 @@
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 5px auto Highlight;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
outline: 0px;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -75,7 +75,7 @@
|
||||
|
||||
// When topic progress is visible in the posts grid area and is sticky,
|
||||
// adjust positioning so presence is on the same line
|
||||
@media screen and (max-width: 924px) {
|
||||
@media screen and (width <= 924px) {
|
||||
body:has(.topic-navigation.with-topic-progress)
|
||||
.topic-above-footer-buttons-outlet.presence {
|
||||
margin-top: -3.2em;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.inline-footnotes {
|
||||
a.expand-footnote {
|
||||
user-select: none;
|
||||
padding: 0px 0.5em;
|
||||
padding: 0 0.5em;
|
||||
margin: 0 0 0 0.25em;
|
||||
color: var(--primary-low-mid-or-secondary-high);
|
||||
background: var(--primary-low);
|
||||
@ -25,6 +25,7 @@
|
||||
.footnotes-list,
|
||||
.footnotes-sep {
|
||||
position: absolute;
|
||||
|
||||
// the left/right positioning prevents overflow issues
|
||||
// with long words causing overflow on small screens
|
||||
left: 0;
|
||||
|
||||
@ -22,6 +22,7 @@ div.poll-outer {
|
||||
color: var(--primary);
|
||||
padding: 0.5em 0;
|
||||
word-break: break-word;
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
@ -55,11 +56,13 @@ div.poll-outer {
|
||||
&.nav-items {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
|
||||
.nav-btn {
|
||||
background-color: var(--secondary);
|
||||
border: none;
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
.active {
|
||||
.nav-btn {
|
||||
color: var(--primary);
|
||||
@ -67,10 +70,12 @@ div.poll-outer {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rank {
|
||||
display: inline-block;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.poll-results-ranked_choice-subtitle-rounds {
|
||||
margin: 0.25em 0 0.67rem;
|
||||
}
|
||||
@ -79,8 +84,8 @@ div.poll-outer {
|
||||
img {
|
||||
// Hacky way to stop images without width/height
|
||||
// from causing abrupt unintended scrolling
|
||||
&:not([width]):not(.emoji),
|
||||
&:not([height]):not(.emoji) {
|
||||
&:not([width], .emoji),
|
||||
&:not([height], .emoji) {
|
||||
width: 200px !important;
|
||||
height: 200px !important;
|
||||
object-fit: contain;
|
||||
@ -97,6 +102,7 @@ div.poll-outer {
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
border-top: 1px solid var(--primary-low);
|
||||
flex-direction: row-reverse;
|
||||
|
||||
&_counts,
|
||||
&_instructions {
|
||||
padding: 1em;
|
||||
@ -153,10 +159,12 @@ div.poll-outer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.info-label,
|
||||
.info-number {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
+ .poll-info_counts-count {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -165,6 +173,7 @@ div.poll-outer {
|
||||
min-width: 0;
|
||||
gap: 0 0.33em;
|
||||
margin: 0.5em;
|
||||
|
||||
.info-number,
|
||||
.info-label {
|
||||
font-size: var(--font-up-1);
|
||||
@ -188,12 +197,14 @@ div.poll-outer {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-self: start;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include breakpoint("mobile-extra-large", min-width) {
|
||||
padding-top: 1.25em;
|
||||
|
||||
&:not(:empty) {
|
||||
border-top: 1px solid var(--primary-low);
|
||||
}
|
||||
@ -203,6 +214,7 @@ div.poll-outer {
|
||||
padding-right: 1em;
|
||||
height: 100%;
|
||||
flex: 1 1 auto;
|
||||
|
||||
&:not(:empty) {
|
||||
border-right: 1px solid var(--primary-low);
|
||||
}
|
||||
@ -211,6 +223,7 @@ div.poll-outer {
|
||||
li {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
@ -219,15 +232,18 @@ div.poll-outer {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
&:not(:first-child:last-child) {
|
||||
// only applied when there are multiple items
|
||||
.d-icon {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
// when there's a single item, it looks better centered
|
||||
display: inline;
|
||||
@ -251,6 +267,7 @@ div.poll-outer {
|
||||
.info-label {
|
||||
font-size: var(--font-up-2);
|
||||
}
|
||||
|
||||
.info-number {
|
||||
font-size: var(--font-up-6);
|
||||
}
|
||||
@ -294,17 +311,20 @@ div.poll-outer {
|
||||
button {
|
||||
white-space: nowrap;
|
||||
align-self: start;
|
||||
|
||||
.d-button-label {
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
@include breakpoint("tablet") {
|
||||
flex: 1 1 0;
|
||||
|
||||
&:first-child:last-child {
|
||||
// if there's only one button,
|
||||
// don't expand the width
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
&.toggle-results:first-child {
|
||||
// don't expand the back button
|
||||
flex: 0 1 auto;
|
||||
@ -360,10 +380,12 @@ div.poll-outer {
|
||||
> li {
|
||||
cursor: default;
|
||||
padding: 0.25em 0;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.option {
|
||||
p {
|
||||
margin: 0;
|
||||
@ -440,7 +462,7 @@ div.poll-outer {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li[data-poll-option-id]:before {
|
||||
li[data-poll-option-id]::before {
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
border: 2px solid var(--primary);
|
||||
@ -461,7 +483,7 @@ div.poll-outer {
|
||||
}
|
||||
|
||||
&[data-poll-type="multiple"] {
|
||||
li[data-poll-option-id]:before {
|
||||
li[data-poll-option-id]::before {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
@ -469,7 +491,8 @@ div.poll-outer {
|
||||
&[data-poll-type="ranked_choice"] {
|
||||
li[data-poll-option-id] {
|
||||
position: relative;
|
||||
&:before {
|
||||
|
||||
&::before {
|
||||
mask-image: svg-uri(
|
||||
'<svg width="0.75em" height="0.75em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>'
|
||||
);
|
||||
@ -481,7 +504,8 @@ div.poll-outer {
|
||||
border-radius: var(--d-button-border-radius);
|
||||
border: none;
|
||||
}
|
||||
&:after {
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 1.125em;
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: inline-block;
|
||||
width: calc(50% - 10px);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.spoiled {
|
||||
cursor: auto;
|
||||
-webkit-transform: translateZ(0); // Safari jitter fix
|
||||
transform: translateZ(0); // Safari jitter fix
|
||||
|
||||
.lightbox .meta {
|
||||
display: none;
|
||||
|
||||
@ -2,141 +2,187 @@
|
||||
.primary-50 {
|
||||
background-color: var(--primary-50);
|
||||
}
|
||||
|
||||
.primary-100 {
|
||||
background-color: var(--primary-100);
|
||||
}
|
||||
|
||||
.primary-200 {
|
||||
background-color: var(--primary-200);
|
||||
}
|
||||
|
||||
.primary-300 {
|
||||
background-color: var(--primary-300);
|
||||
}
|
||||
|
||||
.primary-400 {
|
||||
background-color: var(--primary-400);
|
||||
}
|
||||
|
||||
.primary-500 {
|
||||
background-color: var(--primary-500);
|
||||
}
|
||||
|
||||
.primary-600 {
|
||||
background-color: var(--primary-600);
|
||||
}
|
||||
|
||||
.primary-700 {
|
||||
background-color: var(--primary-700);
|
||||
}
|
||||
|
||||
.primary-800 {
|
||||
background-color: var(--primary-800);
|
||||
}
|
||||
|
||||
.primary-900 {
|
||||
background-color: var(--primary-900);
|
||||
}
|
||||
|
||||
.primary-very-low {
|
||||
background-color: var(--primary-very-low);
|
||||
}
|
||||
|
||||
.primary-low {
|
||||
background-color: var(--primary-low);
|
||||
}
|
||||
|
||||
.primary-low-mid {
|
||||
background-color: var(--primary-low-mid);
|
||||
}
|
||||
|
||||
.primary-medium {
|
||||
background-color: var(--primary-medium);
|
||||
}
|
||||
|
||||
.primary-high {
|
||||
background-color: var(--primary-high);
|
||||
}
|
||||
|
||||
.primary {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
.secondary-low {
|
||||
background-color: var(--secondary-low);
|
||||
}
|
||||
|
||||
.secondary-medium {
|
||||
background-color: var(--secondary-medium);
|
||||
}
|
||||
|
||||
.secondary-high {
|
||||
background-color: var(--secondary-high);
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
.tertiary-low {
|
||||
background-color: var(--tertiary-low);
|
||||
}
|
||||
|
||||
.tertiary-medium {
|
||||
background-color: var(--tertiary-medium);
|
||||
}
|
||||
|
||||
.tertiary-high {
|
||||
background-color: var(--tertiary-high);
|
||||
}
|
||||
|
||||
.tertiary {
|
||||
background-color: var(--tertiary);
|
||||
}
|
||||
|
||||
.tertiary-50 {
|
||||
background-color: var(--tertiary-50);
|
||||
}
|
||||
|
||||
.tertiary-100 {
|
||||
background-color: var(--tertiary-100);
|
||||
}
|
||||
|
||||
.tertiary-200 {
|
||||
background-color: var(--tertiary-200);
|
||||
}
|
||||
|
||||
.tertiary-300 {
|
||||
background-color: var(--tertiary-300);
|
||||
}
|
||||
|
||||
.tertiary-400 {
|
||||
background-color: var(--tertiary-400);
|
||||
}
|
||||
|
||||
.tertiary-500 {
|
||||
background-color: var(--tertiary-500);
|
||||
}
|
||||
|
||||
.tertiary-600 {
|
||||
background-color: var(--tertiary-600);
|
||||
}
|
||||
|
||||
.tertiary-700 {
|
||||
background-color: var(--tertiary-700);
|
||||
}
|
||||
|
||||
.tertiary-800 {
|
||||
background-color: var(--tertiary-800);
|
||||
}
|
||||
|
||||
.tertiary-900 {
|
||||
background-color: var(--tertiary-900);
|
||||
}
|
||||
|
||||
.quaternary-low {
|
||||
background-color: var(--quaternary-low);
|
||||
}
|
||||
|
||||
.quaternary {
|
||||
background-color: var(--quaternary);
|
||||
}
|
||||
|
||||
.highlight-bg {
|
||||
background-color: var(--highlight-bg);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: var(--highlight);
|
||||
}
|
||||
|
||||
.danger-low {
|
||||
background-color: var(--danger-low);
|
||||
}
|
||||
|
||||
.danger-low-mid {
|
||||
background-color: var(--danger-low-mid);
|
||||
}
|
||||
|
||||
.danger-medium {
|
||||
background-color: var(--danger-medium);
|
||||
}
|
||||
|
||||
.danger {
|
||||
background-color: var(--danger);
|
||||
}
|
||||
|
||||
.success-low {
|
||||
background-color: var(--success-low);
|
||||
}
|
||||
|
||||
.success-medium {
|
||||
background-color: var(--success-medium);
|
||||
}
|
||||
|
||||
.success {
|
||||
background-color: var(--success);
|
||||
}
|
||||
|
||||
.love-low {
|
||||
background-color: var(--love-low);
|
||||
}
|
||||
|
||||
.love {
|
||||
background-color: var(--love);
|
||||
}
|
||||
|
||||
@ -106,26 +106,29 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
&.colors-examples {
|
||||
.styleguide-example {
|
||||
display: flex;
|
||||
|
||||
.example-title {
|
||||
min-width: 15%;
|
||||
margin-right: 1em;
|
||||
border-bottom: none;
|
||||
|
||||
&-text {
|
||||
color: var(--primary);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
&-use-case {
|
||||
font-size: var(--font-down-1);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.color-row {
|
||||
display: flex;
|
||||
|
||||
@ -141,6 +144,7 @@
|
||||
flex: 4;
|
||||
border-bottom: 1px solid var(--primary-300);
|
||||
}
|
||||
|
||||
.color-name {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@ -158,13 +162,16 @@
|
||||
pre {
|
||||
background: var(--primary-very-low);
|
||||
white-space: pre-wrap;
|
||||
|
||||
&.pre-inline {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--primary-medium);
|
||||
|
||||
&.hljs-attribute {
|
||||
color: teal;
|
||||
}
|
||||
@ -218,11 +225,13 @@
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
font-size: 3em;
|
||||
margin: 5px auto;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: var(--font-down-1);
|
||||
word-wrap: break-word;
|
||||
|
||||
@ -5,39 +5,51 @@ p[class*="font-"] {
|
||||
.font-up-6 {
|
||||
font-size: var(--font-up-6);
|
||||
}
|
||||
|
||||
.font-up-5 {
|
||||
font-size: var(--font-up-5);
|
||||
}
|
||||
|
||||
.font-up-4 {
|
||||
font-size: var(--font-up-4);
|
||||
}
|
||||
|
||||
.font-up-3 {
|
||||
font-size: var(--font-up-3);
|
||||
}
|
||||
|
||||
.font-up-2 {
|
||||
font-size: var(--font-up-2);
|
||||
}
|
||||
|
||||
.font-up-1 {
|
||||
font-size: var(--font-up-1);
|
||||
}
|
||||
|
||||
.font-0 {
|
||||
font-size: var(--font-0);
|
||||
}
|
||||
|
||||
.font-down-1 {
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
|
||||
.font-down-2 {
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
|
||||
.font-down-3 {
|
||||
font-size: var(--font-down-3);
|
||||
}
|
||||
|
||||
.font-down-4 {
|
||||
font-size: var(--font-down-4);
|
||||
}
|
||||
|
||||
.font-down-5 {
|
||||
font-size: var(--font-down-5);
|
||||
}
|
||||
|
||||
.font-down-6 {
|
||||
font-size: var(--font-down-6);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user