_grid
This commit is contained in:
parent
c79119d27b
commit
72de700ffb
|
|
@ -21,15 +21,6 @@
|
|||
"function-url-quotes": null,
|
||||
"keyframes-name-pattern": null,
|
||||
"no-descending-specificity": null,
|
||||
"order/order": [
|
||||
{
|
||||
"type": "at-rule",
|
||||
"name": "include"
|
||||
},
|
||||
"custom-properties",
|
||||
"declarations",
|
||||
"rules"
|
||||
],
|
||||
"property-no-vendor-prefix": [
|
||||
true,
|
||||
{
|
||||
|
|
@ -40,12 +31,6 @@
|
|||
"scss/at-mixin-pattern": null,
|
||||
"scss/dollar-variable-colon-space-after": "always-single-line",
|
||||
"scss/dollar-variable-colon-space-before": "never",
|
||||
"scss/dollar-variable-pattern": [
|
||||
"^[a-z][a-zA-Z]+$",
|
||||
{
|
||||
"ignore": "global"
|
||||
}
|
||||
],
|
||||
"scss/double-slash-comment-empty-line-before": [
|
||||
"always",
|
||||
{
|
||||
|
|
@ -68,6 +53,8 @@
|
|||
{
|
||||
"ignorePseudoClasses": ["global", "export"]
|
||||
}
|
||||
]
|
||||
],
|
||||
"scss/at-if-no-null": true,
|
||||
"media-query-no-invalid": true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@
|
|||
"@graphql-codegen/typescript-urql": "^4.0.0",
|
||||
"@hocuspocus/provider": "^2.13.6",
|
||||
"@playwright/test": "^1.47.2",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@solid-primitives/media": "^2.2.9",
|
||||
"@solid-primitives/memo": "^1.3.9",
|
||||
"@solid-primitives/pagination": "^0.3.0",
|
||||
|
|
@ -88,7 +87,6 @@
|
|||
"@types/throttle-debounce": "^5.0.2",
|
||||
"@urql/core": "^5.0.6",
|
||||
"axe-playwright": "^2.0.3",
|
||||
"bootstrap": "^5.3.3",
|
||||
"clsx": "^2.1.1",
|
||||
"cookie": "^0.6.0",
|
||||
"cookie-signature": "^1.2.1",
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
h1 {
|
||||
@include font-size(4rem);
|
||||
|
||||
font-size:4rem;
|
||||
line-height: 1.1;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include font-size(4rem);
|
||||
|
||||
font-size:4rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
|
|
@ -96,12 +94,11 @@ img {
|
|||
|
||||
&[data-float='left'],
|
||||
&[data-float='right'] {
|
||||
@include font-size(2.2rem);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
font-size:2.2rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
|
|
@ -114,13 +111,12 @@ img {
|
|||
ta-sub,
|
||||
ta-selection-frame,
|
||||
ta-border-sub {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin: 3.2rem -8.3333%;
|
||||
padding: 3.2rem 8.3333%;
|
||||
}
|
||||
|
||||
font-size:1.4rem;
|
||||
background: #f1f2f3;
|
||||
clear: both;
|
||||
display: block;
|
||||
|
|
@ -243,7 +239,7 @@ img {
|
|||
|
||||
.shoutAuthor,
|
||||
.shoutDate {
|
||||
@include font-size(1.5rem);
|
||||
font-size:1.5rem;
|
||||
}
|
||||
|
||||
.shoutAuthor {
|
||||
|
|
@ -282,8 +278,7 @@ img {
|
|||
}
|
||||
|
||||
.writeComment {
|
||||
@include font-size(1.7rem);
|
||||
|
||||
font-size:1.7rem;
|
||||
border: 2px solid #f6f6f6;
|
||||
outline: none;
|
||||
padding: 0.2em 0.4em;
|
||||
|
|
@ -295,8 +290,7 @@ img {
|
|||
}
|
||||
|
||||
.commentWarning {
|
||||
@include font-size(2.2rem);
|
||||
|
||||
font-size:2.2rem;
|
||||
background: #f6f6f6;
|
||||
margin-bottom: 1em;
|
||||
padding: 2.4rem 1.8rem;
|
||||
|
|
@ -325,12 +319,11 @@ img {
|
|||
}
|
||||
|
||||
.shoutStatsItem {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
margin-right: 3.2rem;
|
||||
}
|
||||
|
||||
font-size:1.5rem;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
|
|
@ -487,8 +480,7 @@ img {
|
|||
}
|
||||
|
||||
.topicsList {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
letter-spacing: 0.08em;
|
||||
margin-top: 1.6rem;
|
||||
|
|
@ -535,8 +527,7 @@ img {
|
|||
}
|
||||
|
||||
.commentsHeader {
|
||||
@include font-size(2.4rem);
|
||||
|
||||
font-size: 2.4rem;
|
||||
margin-bottom: 1em;
|
||||
|
||||
.newReactions {
|
||||
|
|
@ -569,8 +560,7 @@ img {
|
|||
padding-bottom: 3.2rem;
|
||||
|
||||
button {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
border-radius: 0.8rem;
|
||||
margin-right: 1.2rem;
|
||||
padding: 0.9rem 1.2rem;
|
||||
|
|
@ -620,8 +610,7 @@ a[data-toggle='tooltip'] {
|
|||
}
|
||||
|
||||
.tooltip {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
|
|
@ -658,8 +647,7 @@ a[data-toggle='tooltip'] {
|
|||
}
|
||||
|
||||
.lead {
|
||||
@include font-size(1.8rem);
|
||||
|
||||
font-size:1.8rem;
|
||||
font-weight: 600;
|
||||
|
||||
b,
|
||||
|
|
|
|||
|
|
@ -15,8 +15,7 @@
|
|||
flex-direction: row;
|
||||
|
||||
.item {
|
||||
@include font-size(1.6rem);
|
||||
|
||||
font-size:1.6rem;
|
||||
font-weight: 500;
|
||||
padding: 2px 12px;
|
||||
border-left: 2px solid #e9e9ee;
|
||||
|
|
|
|||
|
|
@ -236,8 +236,7 @@ $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thum
|
|||
}
|
||||
|
||||
.playlistItemText {
|
||||
@include font-size(1.6rem);
|
||||
|
||||
font-size:1.6rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
|
|
@ -249,8 +248,7 @@ $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thum
|
|||
|
||||
.artist,
|
||||
.title {
|
||||
@include font-size(1.6rem);
|
||||
|
||||
font-size:1.6rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0;
|
||||
|
|
@ -335,7 +333,7 @@ $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thum
|
|||
|
||||
.description,
|
||||
.lyrics {
|
||||
@include font-size(1.4rem);
|
||||
font-size:1.4rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
|
|
|
|||
|
|
@ -46,8 +46,7 @@
|
|||
}
|
||||
|
||||
.shout-body {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
margin-bottom: 1em;
|
||||
|
||||
*:last-child {
|
||||
|
|
@ -155,8 +154,7 @@
|
|||
}
|
||||
|
||||
.commentBody {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
line-height: 1.47;
|
||||
|
||||
blockquote {
|
||||
|
|
@ -176,7 +174,7 @@
|
|||
|
||||
.commentAuthor,
|
||||
.commentRating {
|
||||
@include font-size(1.2rem);
|
||||
font-size:1.2rem;
|
||||
}
|
||||
|
||||
.commentAuthor {
|
||||
|
|
@ -184,15 +182,12 @@
|
|||
}
|
||||
|
||||
.articleAuthor {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
color: var(--blue-500);
|
||||
margin: 0.3rem 1rem 0;
|
||||
}
|
||||
|
||||
.articleLink {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
margin: 0.3em 0 0.5em;
|
||||
}
|
||||
|
|
@ -206,6 +201,7 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
font-size:1.2rem;
|
||||
flex: 0 0 50%;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
|
@ -222,8 +218,6 @@
|
|||
}
|
||||
|
||||
.commentDates {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
.commentDates {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
color: var(--secondary-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { AuthToken } from '@authorizerdev/authorizer-js'
|
||||
import { createPopper } from '@popperjs/core'
|
||||
import { Link } from '@solidjs/meta'
|
||||
import { A, useSearchParams } from '@solidjs/router'
|
||||
import { clsx } from 'clsx'
|
||||
|
|
@ -13,6 +12,7 @@ import { DEFAULT_HEADER_OFFSET, useUI } from '~/context/ui'
|
|||
import type { Author, Maybe, Shout, Topic } from '~/graphql/schema/core.gen'
|
||||
import { processPrepositions } from '~/intl/prepositions'
|
||||
import { isCyrillic } from '~/intl/translate'
|
||||
import { createTooltip } from '~/lib/createTooltip'
|
||||
import { getImageUrl } from '~/lib/getThumbUrl'
|
||||
import { MediaItem } from '~/types/mediaitem'
|
||||
import { capitalize } from '~/utils/capitalize'
|
||||
|
|
@ -215,7 +215,7 @@ export const FullArticle = (props: Props) => {
|
|||
element.setAttribute('href', 'javascript: void(0)')
|
||||
}
|
||||
|
||||
const popperInstance = createPopper(element, tooltip, {
|
||||
const popperInstance = createTooltip(element, tooltip, {
|
||||
placement: 'top',
|
||||
modifiers: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -39,12 +39,11 @@
|
|||
}
|
||||
|
||||
.authImage {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
font-size:1.5rem;
|
||||
background: var(--background-color-invert)
|
||||
url('https://images.discours.io/unsafe/1600x/production/image/auth-page.jpg') center no-repeat;
|
||||
background-size: cover;
|
||||
|
|
@ -88,8 +87,7 @@
|
|||
}
|
||||
|
||||
.disclaimer {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
color: #9fa1a7;
|
||||
margin-bottom: 0;
|
||||
|
||||
|
|
@ -103,8 +101,7 @@
|
|||
}
|
||||
|
||||
.authActions {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
margin-top: 1.6rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
|
|
@ -142,15 +139,13 @@
|
|||
}
|
||||
|
||||
.authLink {
|
||||
@include font-size(1.6rem);
|
||||
|
||||
font-size:1.6rem;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.authSubtitle {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@
|
|||
}
|
||||
|
||||
.text {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 1em;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -29,12 +29,11 @@
|
|||
}
|
||||
|
||||
.info {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
flex: 1 100%;
|
||||
}
|
||||
|
||||
font-size:1.4rem;
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -46,8 +45,7 @@
|
|||
}
|
||||
|
||||
.name {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
color: var(--default-color);
|
||||
font-weight: 500;
|
||||
|
||||
|
|
@ -58,8 +56,7 @@
|
|||
}
|
||||
|
||||
.bio {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
color: var(--black-400);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
|
|
@ -21,15 +21,13 @@
|
|||
}
|
||||
|
||||
.authorName {
|
||||
@include font-size(4rem);
|
||||
|
||||
font-size:4rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.authorAbout {
|
||||
@include font-size(2rem);
|
||||
|
||||
font-size:2rem;
|
||||
color: #696969;
|
||||
font-weight: 500;
|
||||
margin-top: 1.5rem;
|
||||
|
|
@ -142,8 +140,7 @@
|
|||
}
|
||||
|
||||
.authorName {
|
||||
@include font-size(4rem);
|
||||
|
||||
font-size:4rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
|
|
@ -206,8 +203,7 @@
|
|||
}
|
||||
|
||||
.authorSubscribeSocialLabel {
|
||||
@include font-size(1.6rem);
|
||||
|
||||
font-size:1.6rem;
|
||||
color: #000;
|
||||
display: block;
|
||||
left: 100%;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.discoursFooter {
|
||||
@include font-size(1.7rem);
|
||||
|
||||
font-size:1.7rem;
|
||||
background: #000;
|
||||
color: rgb(255 255 255 / 64%);
|
||||
padding: 2.4rem 0 4.2rem;
|
||||
|
|
@ -51,8 +50,7 @@
|
|||
}
|
||||
|
||||
.footerCopyright {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
border-top: 5px solid #404040;
|
||||
color: #696969;
|
||||
padding-top: 1.6rem;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.aboutDiscours {
|
||||
@include font-size(1.6rem);
|
||||
|
||||
font-size:1.6rem;
|
||||
background: #fef2f2;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6.4rem;
|
||||
|
|
@ -8,8 +7,7 @@
|
|||
text-align: center;
|
||||
|
||||
h4 {
|
||||
@include font-size(4rem);
|
||||
|
||||
font-size:4rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 2rem;
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
}
|
||||
|
||||
.created {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
line-height: 1.5rem;
|
||||
margin-bottom: 20px;
|
||||
|
||||
|
|
@ -16,8 +15,7 @@
|
|||
}
|
||||
|
||||
.titleContainer {
|
||||
@include font-size(2.6rem);
|
||||
|
||||
font-size:2.6rem;
|
||||
line-height: 3.2rem;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
|
@ -27,8 +25,7 @@
|
|||
}
|
||||
|
||||
.actions {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
.PublishSettings {
|
||||
.goBack {
|
||||
@include font-size(1.8rem);
|
||||
|
||||
font-size:1.8rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -33,7 +32,7 @@
|
|||
.settingInput {
|
||||
&::after,
|
||||
textarea {
|
||||
@include font-size(1.6rem);
|
||||
font-size:1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -98,24 +97,21 @@
|
|||
color: var(--default-color);
|
||||
|
||||
.mainTopic {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
margin: auto 0 1.6rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.shoutCardTitle {
|
||||
@include font-size(2.4rem);
|
||||
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.shoutCardSubtitle {
|
||||
@include font-size(2.2rem);
|
||||
|
||||
font-size:2.2rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 0.8rem;
|
||||
|
|
@ -126,7 +122,7 @@
|
|||
}
|
||||
|
||||
.shoutAuthor {
|
||||
@include font-size(1.6rem);
|
||||
font-size:1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.AutoSaveNotice {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -114,8 +114,7 @@ mark.highlight {
|
|||
}
|
||||
|
||||
&[data-type='quote'] {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
border: solid #000;
|
||||
border-width: 0 0 0 2px;
|
||||
margin: 1.6rem 0;
|
||||
|
|
@ -137,8 +136,6 @@ mark.highlight {
|
|||
}
|
||||
|
||||
&[data-type='punchline'] {
|
||||
@include font-size(3.2rem);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
&[data-float='left'] {
|
||||
margin-right: 1.5em;
|
||||
|
|
@ -151,6 +148,7 @@ mark.highlight {
|
|||
}
|
||||
}
|
||||
|
||||
font-size:3.2rem;
|
||||
border: solid #000;
|
||||
border-width: 2px 0;
|
||||
font-weight: 700;
|
||||
|
|
@ -160,16 +158,13 @@ mark.highlight {
|
|||
|
||||
&[data-float='left'],
|
||||
&[data-float='right'] {
|
||||
@include font-size(2.2rem);
|
||||
|
||||
font-size:2.2rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ProseMirror article[data-type='incut'] {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-left: -2rem;
|
||||
margin-right: -2rem;
|
||||
|
|
@ -186,6 +181,7 @@ mark.highlight {
|
|||
margin-right: -3em;
|
||||
}
|
||||
|
||||
font-size:1.4rem;
|
||||
background: #f1f2f3;
|
||||
margin: 1em -1rem;
|
||||
padding: 2em 2rem;
|
||||
|
|
|
|||
|
|
@ -8,13 +8,11 @@
|
|||
position: relative;
|
||||
|
||||
.compactEditor {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
min-height: 100px;
|
||||
|
||||
.emptyNode:first-child::before {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
height: 0;
|
||||
|
|
@ -154,8 +152,7 @@
|
|||
}
|
||||
|
||||
.label {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 12px;
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@
|
|||
}
|
||||
|
||||
.typographStatus {
|
||||
@include font-size(1.2rem);
|
||||
font-size:1.2rem;
|
||||
}
|
||||
|
||||
.typographStatusSuccess {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,8 @@ export const MicroBubbleMenu = (props: MicroBubbleMenuProps) => {
|
|||
|
||||
const isActive = (name: string, attributes?: Record<string, string | number>) =>
|
||||
createEditorTransaction(
|
||||
() => props.editor,
|
||||
// biome-ignore lint/suspicious/noExplicitAny: tiptap 2.8.0 typing issue
|
||||
() => props.editor as any,
|
||||
(editor) => editor?.isActive(name, attributes)
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -133,8 +133,7 @@
|
|||
}
|
||||
|
||||
.shoutAuthor {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
font-weight: 500;
|
||||
margin-right: 1.6rem;
|
||||
|
||||
|
|
@ -151,8 +150,7 @@
|
|||
}
|
||||
|
||||
.shoutDate {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
color: #9fa1a7;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -167,19 +165,18 @@
|
|||
justify-content: space-between;
|
||||
|
||||
.shoutAuthor {
|
||||
@include font-size(1.2rem);
|
||||
font-size:1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.shoutCardTitle {
|
||||
@include font-size(2.2rem);
|
||||
|
||||
font-size:2.2rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.8rem;
|
||||
|
||||
:global(.col-md-12) & {
|
||||
@include font-size(2.6rem);
|
||||
font-size:2.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -193,22 +190,19 @@
|
|||
}
|
||||
|
||||
.shoutCardTitlesContainerFeedMode & {
|
||||
@include font-size(3.2rem);
|
||||
|
||||
font-size:3.2rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
}
|
||||
|
||||
.shoutCardDescription {
|
||||
@include font-size(1.6rem);
|
||||
|
||||
font-size:1.6rem;
|
||||
color: var(--default-color);
|
||||
margin-bottom: 1.4rem;
|
||||
}
|
||||
|
||||
.shoutCardSubtitle {
|
||||
@include font-size(1.8rem);
|
||||
|
||||
font-size:1.8rem;
|
||||
color: #141414;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
|
|
@ -369,8 +363,7 @@
|
|||
|
||||
.shoutCardTitle,
|
||||
.shoutCardSubtitle {
|
||||
@include font-size(2.6rem);
|
||||
|
||||
font-size:2.6rem;
|
||||
display: inline;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
|
@ -528,7 +521,7 @@
|
|||
}
|
||||
|
||||
.shoutCardTitle {
|
||||
@include font-size(3.2rem);
|
||||
font-size:3.2rem;
|
||||
}
|
||||
|
||||
.shoutTopic a {
|
||||
|
|
@ -571,8 +564,7 @@
|
|||
}
|
||||
|
||||
.shoutCardDetails {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
align-items: flex-start;
|
||||
border-top: 2px solid var(--black-500);
|
||||
display: flex;
|
||||
|
|
@ -723,22 +715,20 @@
|
|||
|
||||
.shoutCardBigTitle {
|
||||
.shoutCardTitle {
|
||||
@include font-size(3.2rem);
|
||||
|
||||
font-size:3.2rem;
|
||||
display: block;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.shoutCardSubtitle {
|
||||
@include font-size(2.6rem);
|
||||
font-size:2.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.shoutCardCompact {
|
||||
.shoutCardTitle,
|
||||
.shoutCardSubtitle {
|
||||
@include font-size(2.2rem);
|
||||
|
||||
font-size:2.2rem;
|
||||
display: inline;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
|
@ -765,8 +755,7 @@
|
|||
|
||||
.shoutCardTitle,
|
||||
.shoutCardSubtitle {
|
||||
@include font-size(1.8rem);
|
||||
|
||||
font-size:1.8rem;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
|
@ -836,15 +825,13 @@
|
|||
}
|
||||
|
||||
.shoutCardTitle {
|
||||
@include font-size(4rem);
|
||||
|
||||
font-size:4rem;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.shoutCardSubtitle {
|
||||
@include font-size(2.4rem);
|
||||
|
||||
font-size: 2.4rem;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -106,8 +106,7 @@
|
|||
}
|
||||
|
||||
a:link {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
padding-right: 0.3em;
|
||||
|
|
@ -125,8 +124,7 @@
|
|||
}
|
||||
|
||||
h4 {
|
||||
@include font-size(2.6rem);
|
||||
|
||||
font-size:2.6rem;
|
||||
font-weight: bold;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,8 +12,7 @@
|
|||
|
||||
button,
|
||||
.button {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
align-items: center;
|
||||
border-radius: 1.2rem;
|
||||
display: flex;
|
||||
|
|
@ -119,7 +118,7 @@
|
|||
}
|
||||
|
||||
h3 {
|
||||
@include font-size(3.8rem);
|
||||
font-size:3.8rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
|
|
@ -233,13 +232,12 @@
|
|||
}
|
||||
|
||||
.bottomLinks {
|
||||
@include font-size(1.6rem);
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
flex-direction: column;
|
||||
gap: 1.4rem;
|
||||
}
|
||||
|
||||
font-size:1.6rem;
|
||||
display: flex;
|
||||
gap: 4rem;
|
||||
|
||||
|
|
|
|||
|
|
@ -38,8 +38,7 @@
|
|||
}
|
||||
|
||||
.counter {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
background: #f6f6f6;
|
||||
|
|
@ -131,8 +130,7 @@
|
|||
}
|
||||
|
||||
h4 {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
font-weight: bold;
|
||||
color: #9fa1a7;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -122,12 +122,11 @@
|
|||
}
|
||||
|
||||
.mainNavigationWrapper {
|
||||
@include font-size(1.7rem);
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
font-size:1.7rem;
|
||||
position: relative;
|
||||
|
||||
.fixed & {
|
||||
|
|
@ -380,12 +379,11 @@
|
|||
}
|
||||
|
||||
.articleHeader {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
font-size:1.4rem;
|
||||
left: $container-padding-x;
|
||||
margin: 0.2em 0;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include font-size(1.4rem);
|
||||
font-size:1.4rem;
|
||||
}
|
||||
|
||||
font-size: 1.6rem;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
justify-content: space-around;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.chatTitleInput {
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
|
|
@ -17,7 +18,7 @@
|
|||
&:focus {
|
||||
border-color: #80bdff;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||||
box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,13 +92,7 @@ const CreateModalContent = (props: Props) => {
|
|||
</div>
|
||||
|
||||
<div class={styles.footer}>
|
||||
<Button
|
||||
type="button"
|
||||
value={t('Cancel')}
|
||||
variant="danger"
|
||||
size="L"
|
||||
onClick={reset}
|
||||
/>
|
||||
<Button type="button" value={t('Cancel')} variant="danger" size="L" onClick={reset} />
|
||||
<Button
|
||||
type="button"
|
||||
value={usersId().length > 1 ? t('New group') : t('Create Chat')}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.NotificationView {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
min-height: 72px;
|
||||
|
|
|
|||
|
|
@ -30,8 +30,7 @@ $transition-duration: 200ms;
|
|||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
@include font-size(2rem);
|
||||
|
||||
font-size:2rem;
|
||||
color: var(--black-500);
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
|
|
@ -47,8 +46,7 @@ $transition-duration: 200ms;
|
|||
padding: 0 38px 1rem;
|
||||
|
||||
.loading {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: var(--black-300);
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
.navigationHeader {
|
||||
@include font-size(1.8rem);
|
||||
|
||||
font-size:1.8rem;
|
||||
font-weight: bold;
|
||||
margin-top: 1.1em;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
display: flex;
|
||||
|
||||
|
|
@ -16,6 +13,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
font-size:1.4rem;
|
||||
|
||||
a {
|
||||
border: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
@mixin search-filter-control {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
height: 4rem;
|
||||
padding: 0 2rem;
|
||||
background: rgb(64 64 64 / 50%);
|
||||
|
|
@ -23,8 +22,7 @@
|
|||
}
|
||||
|
||||
.searchInput {
|
||||
@include font-size(4.8rem);
|
||||
|
||||
font-size:4.8rem;
|
||||
width: 100%;
|
||||
padding: 0 0 0.5rem;
|
||||
background: none;
|
||||
|
|
@ -60,8 +58,7 @@
|
|||
}
|
||||
|
||||
.searchDescription {
|
||||
@include font-size(1.6rem);
|
||||
|
||||
font-size:1.6rem;
|
||||
margin-bottom: 44px;
|
||||
color: rgb(255 255 255 / 64%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,8 +55,7 @@
|
|||
}
|
||||
|
||||
.topicTitle {
|
||||
@include font-size(2.2rem);
|
||||
|
||||
font-size:2.2rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1.2rem;
|
||||
margin-top: 0.5rem !important;
|
||||
|
|
@ -84,8 +83,7 @@
|
|||
}
|
||||
|
||||
.topicDescription {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
font-weight: 500;
|
||||
color: #696969;
|
||||
line-height: 1.3;
|
||||
|
|
@ -113,7 +111,7 @@
|
|||
margin-top: 2.4rem;
|
||||
|
||||
.topicTitle {
|
||||
@include font-size(1.6rem);
|
||||
font-size:1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,16 +4,14 @@
|
|||
text-align: center;
|
||||
|
||||
h1 {
|
||||
@include font-size(2rem);
|
||||
|
||||
font-size:2rem;
|
||||
color: #2638d9;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.topicDescription {
|
||||
@include font-size(1.8rem);
|
||||
|
||||
font-size:1.8rem;
|
||||
line-height: 1.4;
|
||||
margin: 1rem 0 2rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,8 +44,7 @@
|
|||
}
|
||||
|
||||
.info {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
border: none;
|
||||
|
||||
// display: flex;
|
||||
|
|
@ -62,14 +61,12 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
@include font-size(2.2rem);
|
||||
|
||||
font-size:2.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.description {
|
||||
@include font-size(1.6rem);
|
||||
|
||||
font-size:1.6rem;
|
||||
line-height: 1.4;
|
||||
margin: 0.8rem 0;
|
||||
line-clamp: 2;
|
||||
|
|
@ -106,8 +103,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
font-weight: 500;
|
||||
line-height: 1em;
|
||||
color: var(--blue-500);
|
||||
|
|
@ -115,8 +111,7 @@
|
|||
}
|
||||
|
||||
.description {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
color: var(--black-400);
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
|
|
@ -137,8 +132,6 @@
|
|||
}
|
||||
|
||||
.stats {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
|
@ -147,12 +140,12 @@
|
|||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
font-size:1.5rem;
|
||||
color: var(--secondary-color);
|
||||
display: flex;
|
||||
|
||||
.statsItem {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
font-weight: 500;
|
||||
margin-right: 1.6rem;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -3,12 +3,11 @@
|
|||
position: relative;
|
||||
|
||||
.confirmModalTitle {
|
||||
@include font-size(3.2rem);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin: 0 10%;
|
||||
}
|
||||
|
||||
font-size: 3.2rem;
|
||||
color: var(--default-color);
|
||||
font-weight: 700;
|
||||
margin: 0 3rem;
|
||||
|
|
|
|||
|
|
@ -43,16 +43,14 @@
|
|||
}
|
||||
|
||||
.description {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size: 1.2rem;
|
||||
margin-top: 1.6rem;
|
||||
text-align: center;
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.error {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size: 1.4rem;
|
||||
color: var(--danger-color);
|
||||
margin-top: 1.6rem;
|
||||
text-align: center;
|
||||
|
|
@ -61,8 +59,7 @@
|
|||
|
||||
&.square {
|
||||
.field {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
width: 228px;
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@
|
|||
position: relative;
|
||||
|
||||
.toggler {
|
||||
@include font-size(1.3rem);
|
||||
|
||||
font-size: 1.3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -43,15 +42,13 @@
|
|||
transition: 0.3s ease-in-out;
|
||||
|
||||
.title {
|
||||
@include font-size(1.6rem);
|
||||
|
||||
font-size:1.6rem;
|
||||
font-weight: 700 !important;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
color: var(--default-color);
|
||||
opacity: 0.5;
|
||||
margin: 6px 0;
|
||||
|
|
|
|||
|
|
@ -75,8 +75,7 @@
|
|||
}
|
||||
|
||||
.moreUsers {
|
||||
@include font-size(0.75rem);
|
||||
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
position: absolute;
|
||||
width: 19px;
|
||||
|
|
|
|||
|
|
@ -17,8 +17,7 @@
|
|||
}
|
||||
|
||||
.fieldName {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size: 1.2rem;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 12px;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import 'cropperjs/dist/cropper.css'
|
||||
|
||||
import { UploadFile } from '@solid-primitives/upload'
|
||||
import Cropper from 'cropperjs'
|
||||
import { Show, createSignal, onMount } from 'solid-js'
|
||||
|
||||
import { useLocalize } from '~/context/localize'
|
||||
import { Button } from '../Button'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.InlineLoader {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -16,8 +16,7 @@
|
|||
}
|
||||
|
||||
.input {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -16,8 +16,6 @@
|
|||
width: 100%;
|
||||
|
||||
.input {
|
||||
@include font-size(2rem);
|
||||
|
||||
@include media-breakpoint-up(xxl) {
|
||||
border-right: none;
|
||||
}
|
||||
|
|
@ -26,6 +24,7 @@
|
|||
border-bottom: none;
|
||||
}
|
||||
|
||||
font-size:2rem;
|
||||
background: none;
|
||||
color: #fff;
|
||||
font-family: inherit;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
}
|
||||
|
||||
&.tiny {
|
||||
@include font-size(1.4rem);
|
||||
font-size:1.4rem;
|
||||
|
||||
.action {
|
||||
padding: 0.5rem 1rem;
|
||||
|
|
|
|||
|
|
@ -68,8 +68,7 @@
|
|||
}
|
||||
|
||||
.isCopied {
|
||||
@include font-size(1.6rem);
|
||||
|
||||
font-size:1.6rem;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 1.2rem;
|
||||
|
|
|
|||
|
|
@ -17,8 +17,7 @@
|
|||
}
|
||||
|
||||
.input {
|
||||
@include font-size(1.7rem);
|
||||
|
||||
font-size:1.7rem;
|
||||
margin: 0 16px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -19,8 +19,7 @@
|
|||
}
|
||||
|
||||
.sliderTitle {
|
||||
@include font-size(4.5rem);
|
||||
|
||||
font-size:4.5rem;
|
||||
text-align: center;
|
||||
padding: 4rem 0 0;
|
||||
}
|
||||
|
|
@ -133,12 +132,11 @@
|
|||
width: 100%;
|
||||
|
||||
.counter {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
top: 477px;
|
||||
}
|
||||
|
||||
font-size:1.2rem;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 276px;
|
||||
|
|
@ -218,23 +216,21 @@
|
|||
align-self: flex-start;
|
||||
|
||||
.articleTitle {
|
||||
@include font-size(1.4rem);
|
||||
font-size:1.4rem;
|
||||
}
|
||||
|
||||
.source {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.body {
|
||||
@include font-size(1.7rem);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
// margin-left: calc((100% + 130px) * 0.15);
|
||||
margin-left: calc(15% + 24px);
|
||||
}
|
||||
|
||||
font-size:1.7rem;
|
||||
margin-top: 24px;
|
||||
|
||||
* {
|
||||
|
|
@ -339,8 +335,7 @@
|
|||
margin: 1em 0;
|
||||
|
||||
.input {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.SoonChip {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
80
src/lib/createTooltip.ts
Normal file
80
src/lib/createTooltip.ts
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
export function createTooltip(referenceElement?: Element, tooltipElement?: HTMLElement, options = {}) {
|
||||
const defaultOptions = {
|
||||
placement: 'top',
|
||||
offset: [0, 8]
|
||||
}
|
||||
const config = { ...defaultOptions, ...options }
|
||||
|
||||
function updatePosition() {
|
||||
if (!(referenceElement && tooltipElement)) return
|
||||
|
||||
const rect = referenceElement.getBoundingClientRect()
|
||||
const tooltipRect = tooltipElement.getBoundingClientRect()
|
||||
const offsetX = config.offset[0]
|
||||
const offsetY = config.offset[1]
|
||||
|
||||
let top = 0
|
||||
let left = 0
|
||||
|
||||
switch (config.placement) {
|
||||
case 'top': {
|
||||
top = rect.top - tooltipRect.height - offsetY
|
||||
left = rect.left + (rect.width - tooltipRect.width) / 2 + offsetX
|
||||
break
|
||||
}
|
||||
case 'bottom': {
|
||||
top = rect.bottom + offsetY
|
||||
left = rect.left + (rect.width - tooltipRect.width) / 2 + offsetX
|
||||
break
|
||||
}
|
||||
case 'left': {
|
||||
top = rect.top + (rect.height - tooltipRect.height) / 2 + offsetY
|
||||
left = rect.left - tooltipRect.width - offsetX
|
||||
break
|
||||
}
|
||||
case 'right': {
|
||||
top = rect.top + (rect.height - tooltipRect.height) / 2 + offsetY
|
||||
left = rect.right + offsetX
|
||||
break
|
||||
}
|
||||
default: {
|
||||
top = rect.top - tooltipRect.height - offsetY
|
||||
left = rect.left + (rect.width - tooltipRect.width) / 2 + offsetX
|
||||
}
|
||||
}
|
||||
|
||||
tooltipElement.style.position = 'absolute'
|
||||
tooltipElement.style.top = `${top}px`
|
||||
tooltipElement.style.left = `${left}px`
|
||||
}
|
||||
|
||||
function showTooltip() {
|
||||
if (tooltipElement) tooltipElement.style.visibility = 'visible'
|
||||
updatePosition()
|
||||
}
|
||||
|
||||
function hideTooltip() {
|
||||
if (tooltipElement) tooltipElement.style.visibility = 'hidden'
|
||||
}
|
||||
|
||||
referenceElement?.addEventListener('mouseenter', showTooltip)
|
||||
referenceElement?.addEventListener('mouseleave', hideTooltip)
|
||||
window.addEventListener('resize', updatePosition)
|
||||
|
||||
return {
|
||||
update: updatePosition,
|
||||
destroy() {
|
||||
referenceElement?.removeEventListener('mouseenter', showTooltip)
|
||||
referenceElement?.removeEventListener('mouseleave', hideTooltip)
|
||||
window.removeEventListener('resize', updatePosition)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Usage example
|
||||
const referenceElement = document.querySelector('#reference')
|
||||
const tooltipElement = document.querySelector('#tooltip')
|
||||
createTooltip(referenceElement as HTMLElement, tooltipElement as HTMLElement, {
|
||||
placement: 'top',
|
||||
offset: [0, 8]
|
||||
})
|
||||
65
src/styles/README.md
Normal file
65
src/styles/README.md
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
# _grid.scss - a Minimalistic Bootstrap-Compatible Grid System
|
||||
|
||||
This grid system is a lightweight alternative to Bootstrap's grid, providing essential features for responsive design. It includes a set of SCSS mixins and classes to create flexible layouts.
|
||||
|
||||
## Supported Classes in _grid.scss
|
||||
|
||||
### Container
|
||||
|
||||
- **`.container`**: Creates a fixed-width container and centers it on the page.
|
||||
- **`.container-fluid`**: Creates a full-width container that spans the entire width of the viewport.
|
||||
|
||||
### Row
|
||||
|
||||
- **`.row`**: Creates a flexbox container for columns, with negative margins to offset column padding.
|
||||
|
||||
### Columns
|
||||
|
||||
- **`.col-xx-#`**: Defines the width of a column for a specific breakpoint (`xx` can be `xs`, `sm`, `md`, `lg`, `xl`, `xxl`). Replace `#` with a number from 1 to 24 (based on `$grid-columns`).
|
||||
|
||||
### Offsets
|
||||
|
||||
- **`.offset-xx-#`**: Adds left margin to a column, effectively moving it to the right by the specified number of columns. Replace `xx` with the breakpoint and `#` with the number of columns to offset.
|
||||
|
||||
## Mixins
|
||||
|
||||
### `media-breakpoint-up($breakpoint)`
|
||||
|
||||
Applies styles at a minimum width of the specified breakpoint.
|
||||
|
||||
### `media-breakpoint-down($breakpoint)`
|
||||
|
||||
Applies styles at a maximum width of the specified breakpoint.
|
||||
|
||||
### `media-breakpoint-between($lower, $upper)`
|
||||
|
||||
Applies styles between two breakpoints.
|
||||
|
||||
### `make-container($max-widths, $gutter)`
|
||||
|
||||
Creates a container with specified maximum widths and gutter.
|
||||
|
||||
### `make-row($gutter)`
|
||||
|
||||
Creates a flexbox row with specified gutter.
|
||||
|
||||
### `make-col($size, $columns)`
|
||||
|
||||
Defines a column with a specific size and total number of columns.
|
||||
|
||||
### `make-col-offset($size, $columns)`
|
||||
|
||||
Offsets a column by a specific size.
|
||||
|
||||
### `row-cols($count)`
|
||||
|
||||
Sets the number of columns in a row, each taking an equal width.
|
||||
|
||||
## Customization
|
||||
|
||||
You can customize the grid system by modifying the variables in `_globals.scss`:
|
||||
|
||||
- **`$grid-columns`**: Total number of columns in the grid.
|
||||
- **`$grid-gutter-width`**: Width of the gutter between columns.
|
||||
- **`$grid-breakpoints`**: Map of breakpoints for responsive design.
|
||||
- **`$container-max-widths`**: Maximum widths for containers at each breakpoint.
|
||||
145
src/styles/_grid.scss
Normal file
145
src/styles/_grid.scss
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
// Миксин для media-breakpoint-up
|
||||
@mixin media-breakpoint-up($breakpoint, $breakpoints: $grid-breakpoints) {
|
||||
$min-width: map-get($breakpoints, $breakpoint);
|
||||
|
||||
@if $min-width {
|
||||
@media (min-width: #{$min-width}) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn "Нет валидного брейкпоинта для '#{$breakpoint}'.";
|
||||
}
|
||||
}
|
||||
|
||||
// Миксин для media-breakpoint-down
|
||||
@mixin media-breakpoint-down($breakpoint, $breakpoints: $grid-breakpoints) {
|
||||
$max-width: map-get($breakpoints, $breakpoint) - 0.02px;
|
||||
|
||||
@if $max-width {
|
||||
@media (max-width: #{$max-width}) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn "Нет валидного брейкпоинта для '#{$breakpoint}'.";
|
||||
}
|
||||
}
|
||||
|
||||
// Миксин для media-breakpoint-between
|
||||
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
|
||||
$min-width: map-get($breakpoints, $lower);
|
||||
$max-width: map-get($breakpoints, $upper) - 0.02px;
|
||||
|
||||
@if $min-width and $max-width {
|
||||
@media (min-width: #{$min-width}) and (max-width: #{$max-width}) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@warn "Нет валидных брейкпоинтов для '#{$lower}' или '#{$upper}'.";
|
||||
}
|
||||
}
|
||||
|
||||
// Миксин make-container
|
||||
@mixin make-container($max-widths: $container-max-widths, $gutter: $grid-gutter-width) {
|
||||
width: 100%;
|
||||
padding-right: $gutter;
|
||||
padding-left: $gutter;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
||||
@each $breakpoint, $max-width in $max-widths {
|
||||
@include media-breakpoint-up($breakpoint, $grid-breakpoints) {
|
||||
max-width: #{$max-width};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Миксин make-row
|
||||
@mixin make-row($gutter: $grid-gutter-width) {
|
||||
--gutter-x: #{$gutter};
|
||||
--gutter-y: 0;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(-1 * var(--gutter-y));
|
||||
margin-right: calc(-0.5 * var(--gutter-x));
|
||||
margin-left: calc(-0.5 * var(--gutter-x));
|
||||
}
|
||||
|
||||
// Миксин make-col-ready
|
||||
@mixin make-col-ready() {
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-right: calc(var(--gutter-x) * 0.5);
|
||||
padding-left: calc(var(--gutter-x) * 0.5);
|
||||
margin-top: var(--gutter-y);
|
||||
}
|
||||
|
||||
// Миксин make-col
|
||||
@mixin make-col($size: false, $columns: $grid-columns) {
|
||||
@if $size {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% * #{calc($size / $columns)});
|
||||
} @else {
|
||||
flex: 1 1 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Миксин make-col-auto
|
||||
@mixin make-col-auto() {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Миксин make-col-offset
|
||||
@mixin make-col-offset($size, $columns: $grid-columns) {
|
||||
$num: calc($size / $columns);
|
||||
|
||||
margin-left: if($num == 0, 0, calc(100% * #{$num}));
|
||||
}
|
||||
|
||||
// Миксин row-cols
|
||||
@mixin row-cols($count) {
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
width: 100% / $count;
|
||||
}
|
||||
}
|
||||
|
||||
// Миксин make-grid-columns
|
||||
@mixin make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
|
||||
@each $breakpoint, $value in $breakpoints {
|
||||
$infix: if($breakpoint == 'xs', '', "-#{$breakpoint}");
|
||||
|
||||
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
||||
@for $i from 1 through $columns {
|
||||
.col#{$infix}-#{$i} {
|
||||
@include make-col($i, $columns);
|
||||
}
|
||||
|
||||
.offset#{$infix}-#{$i} {
|
||||
@include make-col-offset($i, $columns);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Генерация классов контейнера и ряда
|
||||
.container,
|
||||
.container-fluid {
|
||||
@include make-container($container-max-widths, $grid-gutter-width);
|
||||
}
|
||||
|
||||
.row {
|
||||
@include make-row;
|
||||
|
||||
> * {
|
||||
@include make-col-ready;
|
||||
}
|
||||
}
|
||||
|
||||
// Генерация классов столбцов и смещений
|
||||
@include make-grid-columns($grid-columns, $grid-breakpoints);
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
@import 'globals';
|
||||
@import 'bootstrap/scss/functions';
|
||||
@import 'bootstrap/scss/variables';
|
||||
@import 'bootstrap/scss/variables-dark';
|
||||
@import 'bootstrap/scss/maps';
|
||||
@import 'bootstrap/scss/vendor/rfs';
|
||||
@import 'bootstrap/scss/mixins/breakpoints';
|
||||
@import 'bootstrap/scss/mixins/grid';
|
||||
2
src/styles/_inject.scss
Normal file
2
src/styles/_inject.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import 'vars';
|
||||
@import 'grid';
|
||||
|
|
@ -15,3 +15,16 @@ $grid-breakpoints: (
|
|||
$default-color: #141414;
|
||||
$link-color: #2638d9;
|
||||
$container-padding-x: $grid-gutter-width * 0.5 !default;
|
||||
|
||||
// Additional variables needed
|
||||
$container-max-widths: $grid-breakpoints;
|
||||
$gutters: (
|
||||
0: 0,
|
||||
1: 0.25rem,
|
||||
2: 0.5rem,
|
||||
3: 1rem,
|
||||
4: 1.5rem,
|
||||
5: 3rem
|
||||
) !default;
|
||||
$grid-row-columns: 6 !default;
|
||||
$prefix: '' !default;
|
||||
|
|
@ -1,12 +1,4 @@
|
|||
@import 'fonts';
|
||||
@import 'bootstrap/scss/mixins/lists';
|
||||
@import 'bootstrap/scss/mixins/container';
|
||||
@import 'bootstrap/scss/mixins/utilities';
|
||||
@import 'bootstrap/scss/containers';
|
||||
@import 'bootstrap/scss/grid';
|
||||
@import 'bootstrap/scss/bootstrap-utilities';
|
||||
@import 'bootstrap/scss/forms';
|
||||
@import 'bootstrap/scss/buttons';
|
||||
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
|
|
@ -148,35 +140,31 @@ h2 {
|
|||
}
|
||||
|
||||
h1 {
|
||||
@include font-size(4.8rem);
|
||||
|
||||
font-size:4.8rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include font-size(4rem);
|
||||
|
||||
font-size:4rem;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include font-size(3.2rem);
|
||||
|
||||
font-size:3.2rem;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include font-size(2.6rem);
|
||||
|
||||
font-size:2.6rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include font-size(2.2rem);
|
||||
font-size:2.2rem;
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -293,8 +281,7 @@ button {
|
|||
}
|
||||
|
||||
.button--light {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 0.8rem;
|
||||
color: #000;
|
||||
|
|
@ -393,8 +380,7 @@ button {
|
|||
|
||||
.button--submit,
|
||||
.button--outline {
|
||||
@include font-size(2rem);
|
||||
|
||||
font-size:2rem;
|
||||
padding: 1.6rem 2rem;
|
||||
}
|
||||
|
||||
|
|
@ -479,8 +465,7 @@ form {
|
|||
&:-webkit-autofill,
|
||||
&:not(:placeholder-shown) {
|
||||
& ~ label {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
color: var(--black-400);
|
||||
transform: translateY(-1.8em) !important;
|
||||
}
|
||||
|
|
@ -495,7 +480,7 @@ form {
|
|||
}
|
||||
|
||||
.form-message {
|
||||
@include font-size(1.2rem);
|
||||
font-size:1.2rem;
|
||||
}
|
||||
|
||||
.pretty-form__item {
|
||||
|
|
@ -595,20 +580,18 @@ figure {
|
|||
.ta-video-container,
|
||||
figure {
|
||||
figcaption {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
color: rgb(0 0 0 / 60%);
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.view-switcher {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
font-size:1.4rem;
|
||||
display: flex;
|
||||
font-weight: 500;
|
||||
list-style: none;
|
||||
|
|
@ -782,8 +765,7 @@ figure {
|
|||
}
|
||||
|
||||
h2 {
|
||||
@include font-size(4.4rem);
|
||||
|
||||
font-size:4.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -871,8 +853,6 @@ figure {
|
|||
}
|
||||
|
||||
.container--static-page {
|
||||
@include font-size(1.7rem);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-top: 1.5em;
|
||||
|
||||
|
|
@ -883,6 +863,7 @@ figure {
|
|||
}
|
||||
}
|
||||
|
||||
font-size:1.7rem;
|
||||
color: #404040;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -916,11 +897,11 @@ figure {
|
|||
}
|
||||
|
||||
.mode-switcher {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
font-size:1.5rem;
|
||||
}
|
||||
|
||||
.mode-switcher__control {
|
||||
|
|
@ -930,13 +911,12 @@ figure {
|
|||
}
|
||||
|
||||
.content-index {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
position: sticky;
|
||||
top: 14rem;
|
||||
}
|
||||
|
||||
font-size:1.4rem;
|
||||
line-height: 1.4;
|
||||
margin: 0 3.6rem 2em 0;
|
||||
|
||||
|
|
@ -953,7 +933,7 @@ figure {
|
|||
}
|
||||
|
||||
h4 {
|
||||
@include font-size(1.6rem);
|
||||
font-size:1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1011,14 +991,13 @@ details {
|
|||
display: -webkit-box !important;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.description {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
color: rgba(0 0 0 / 40%);
|
||||
|
||||
.pretty-form__item + & {
|
||||
|
|
@ -1061,8 +1040,7 @@ iframe {
|
|||
}
|
||||
|
||||
.lead {
|
||||
@include font-size(2rem);
|
||||
|
||||
font-size:2rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
.group {
|
||||
@include font-size(1.6rem);
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-bottom: 6.4rem;
|
||||
}
|
||||
|
||||
font-size:1.6rem;
|
||||
margin: 3em 0 9.6rem;
|
||||
|
||||
h2 {
|
||||
|
|
@ -45,8 +44,7 @@
|
|||
}
|
||||
|
||||
.alphabet {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
color: rgba(0 0 0 / 20%);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -65,8 +63,7 @@
|
|||
}
|
||||
|
||||
.articlesCounter {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
margin-left: 0.5em;
|
||||
vertical-align: super;
|
||||
}
|
||||
|
|
@ -90,8 +87,7 @@
|
|||
}
|
||||
|
||||
.loading {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
.group {
|
||||
@include font-size(1.6rem);
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-bottom: 6.4rem;
|
||||
}
|
||||
|
||||
font-size:1.6rem;
|
||||
margin: 3em 0 9.6rem;
|
||||
|
||||
h2 {
|
||||
|
|
@ -46,8 +45,7 @@
|
|||
}
|
||||
|
||||
.alphabet {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
color: rgba(0 0 0 / 20%);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -66,8 +64,7 @@
|
|||
}
|
||||
|
||||
.articlesCounter {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
margin-left: 0.5em;
|
||||
vertical-align: super;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,15 +29,13 @@
|
|||
}
|
||||
|
||||
.ratingContainer {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
display: inline-flex;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ratingControl {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
display: inline-flex;
|
||||
margin-left: 1em;
|
||||
vertical-align: middle;
|
||||
|
|
@ -105,8 +103,7 @@
|
|||
}
|
||||
|
||||
.longBioExpandedControl {
|
||||
@include font-size(1.6rem);
|
||||
|
||||
font-size:1.6rem;
|
||||
border-radius: 1.2rem;
|
||||
display: block;
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@
|
|||
position: relative;
|
||||
|
||||
.headingActions {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -48,8 +47,7 @@
|
|||
margin-top: auto;
|
||||
|
||||
.additionalInput {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
appearance: textfield;
|
||||
font-weight: 600;
|
||||
padding: 0;
|
||||
|
|
@ -170,8 +168,7 @@
|
|||
}
|
||||
|
||||
.scrollTopButtonLabel {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
display: none;
|
||||
font-weight: bold;
|
||||
left: 100%;
|
||||
|
|
|
|||
|
|
@ -9,8 +9,7 @@
|
|||
}
|
||||
|
||||
.feedNavigation {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
font-weight: 500;
|
||||
|
||||
h4 {
|
||||
|
|
@ -46,8 +45,7 @@
|
|||
margin-top: -1.1em;
|
||||
|
||||
h4 {
|
||||
@include font-size(2.2rem);
|
||||
|
||||
font-size:2.2rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
|
@ -60,8 +58,7 @@
|
|||
}
|
||||
|
||||
.topic {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
background: transparentize(#2638d9, 0.95);
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
|
|
@ -97,8 +94,7 @@
|
|||
}
|
||||
|
||||
ul {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
font-weight: bold;
|
||||
margin: 1rem 0 0;
|
||||
line-height: 1.3;
|
||||
|
|
@ -136,8 +132,7 @@
|
|||
}
|
||||
|
||||
.comment {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 2.4rem;
|
||||
|
||||
|
|
@ -158,8 +153,7 @@
|
|||
}
|
||||
|
||||
.commentBody {
|
||||
@include font-size(1.4rem);
|
||||
|
||||
font-size:1.4rem;
|
||||
margin-bottom: 1.2rem;
|
||||
line-clamp: 3;
|
||||
-webkit-line-clamp: 3;
|
||||
|
|
@ -190,8 +184,7 @@
|
|||
|
||||
.commentArticleTitle,
|
||||
.commentAuthor {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -41,14 +41,13 @@
|
|||
}
|
||||
|
||||
.errorText {
|
||||
@include font-size(3rem);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
left: 80px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
font-size:3rem;
|
||||
font-weight: 300;
|
||||
left: 52px;
|
||||
margin: 0 60px 1em 0;
|
||||
|
|
@ -56,8 +55,7 @@
|
|||
top: -2.25em;
|
||||
|
||||
.big {
|
||||
@include font-size(7rem);
|
||||
|
||||
font-size:7rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ main {
|
|||
flex-direction: column;
|
||||
padding: 10px;
|
||||
|
||||
$fadeHeight: 10px;
|
||||
$fade-height: 10px;
|
||||
|
||||
.sidebarHeader {
|
||||
display: flex;
|
||||
|
|
@ -49,7 +49,7 @@ main {
|
|||
overflow: hidden;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding: $fadeHeight 0;
|
||||
padding: $fade-height 0;
|
||||
|
||||
.dialogs {
|
||||
scroll-behavior: smooth;
|
||||
|
|
@ -138,8 +138,7 @@ main {
|
|||
}
|
||||
|
||||
time {
|
||||
@include font-size(1.5rem);
|
||||
|
||||
font-size:1.5rem;
|
||||
background: #fff;
|
||||
color: #9fa1a7;
|
||||
padding: 0 0.5em;
|
||||
|
|
|
|||
|
|
@ -4,12 +4,11 @@ h5 {
|
|||
}
|
||||
|
||||
h4 {
|
||||
@include font-size(2.4rem);
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include font-size(1.7rem);
|
||||
|
||||
font-size:1.7rem;
|
||||
margin: 0 0 0.8rem;
|
||||
}
|
||||
|
||||
|
|
@ -18,8 +17,7 @@ h5 {
|
|||
}
|
||||
|
||||
.error {
|
||||
@include font-size(1.6rem);
|
||||
|
||||
font-size: 1.6rem;
|
||||
text-align: center;
|
||||
color: var(--danger-color);
|
||||
margin-top: 1.6rem;
|
||||
|
|
@ -118,7 +116,7 @@ h5 {
|
|||
|
||||
.topicsList {
|
||||
label {
|
||||
@include font-size(1.7rem);
|
||||
font-size:1.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -206,8 +204,7 @@ h5 {
|
|||
}
|
||||
|
||||
.userpic {
|
||||
@include font-size(1.2rem);
|
||||
|
||||
font-size:1.2rem;
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
|
|
|
|||
|
|
@ -15,16 +15,14 @@
|
|||
}
|
||||
|
||||
input {
|
||||
@include font-size(4rem);
|
||||
|
||||
font-size:4rem;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ccc;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
@include font-size(2rem);
|
||||
|
||||
font-size:2rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@ export default {
|
|||
'~': path.resolve('./src'),
|
||||
'@': path.resolve('./public'),
|
||||
'/icons': path.resolve('./public/icons'),
|
||||
'/fonts': path.resolve('./public/fonts'),
|
||||
bootstrap: path.resolve('./node_modules/bootstrap')
|
||||
'/fonts': path.resolve('./public/fonts')
|
||||
// bootstrap: path.resolve('./node_modules/bootstrap')
|
||||
}
|
||||
},
|
||||
envPrefix: 'PUBLIC_',
|
||||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
preprocessorOptions: {
|
||||
scss: {
|
||||
silenceDeprecations: ['mixed-decls'],
|
||||
additionalData: '@import "~/styles/imports";\n',
|
||||
additionalData: '@import "~/styles/inject";\n',
|
||||
includePaths: ['./public', './src/styles', './node_modules']
|
||||
}
|
||||
} as CSSOptions['preprocessorOptions']
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user