From 7dc22774532872fc99aa7768cf299ab623e9d155 Mon Sep 17 00:00:00 2001 From: tusooa Date: Mon, 9 Jan 2023 13:02:16 -0500 Subject: Use stylelint --- src/components/user_card/user_card.scss | 114 +++++++++++++++++--------------- 1 file changed, 60 insertions(+), 54 deletions(-) (limited to 'src/components/user_card') diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index cdb8cb57..942673c4 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -1,4 +1,4 @@ -@import '../../_variables.scss'; +@import "../../variables"; .user-card { position: relative; @@ -11,7 +11,7 @@ } .panel-heading { - padding: .5em 0; + padding: 0.5em 0; text-align: center; box-shadow: none; background: transparent; @@ -35,17 +35,19 @@ left: 0; right: 0; bottom: 0; - mask: linear-gradient(to top, white, transparent) bottom no-repeat, - linear-gradient(to top, white, white); + mask: + linear-gradient(to top, white, transparent) bottom no-repeat, + linear-gradient(to top, white, white); // Autoprefixer seem to ignore this one, and also syntax is different - -webkit-mask-composite: xor; + mask-composite: xor; mask-composite: exclude; background-size: cover; mask-size: 100% 60%; - border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px); - border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px); - border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px); - border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px); + border-radius: + calc(var(--__roundnessTop, --panelRadius) - 1px) + calc(var(--__roundnessTop, --panelRadius) - 1px) + calc(var(--__roundnessBottom, --panelRadius) - 1px) + calc(var(--__roundnessBottom, --panelRadius) - 1px); background-color: var(--profileBg); z-index: -2; @@ -159,17 +161,17 @@ top: 0; right: 0; bottom: 0; - background-color: rgba(0, 0, 0, 0.3); + background-color: rgb(0 0 0 / 30%); display: flex; justify-content: center; align-items: center; border-radius: $fallback--avatarRadius; border-radius: var(--avatarRadius, $fallback--avatarRadius); opacity: 0; - transition: opacity .2s ease; + transition: opacity 0.2s ease; svg { - color: #FFF; + color: #fff; } } @@ -178,7 +180,8 @@ } } - .external-link-button, .edit-profile-button { + .external-link-button, + .edit-profile-button { cursor: pointer; width: 2.5em; text-align: center; @@ -191,34 +194,6 @@ } } - .user-summary { - display: block; - margin-left: 0.6em; - text-align: left; - text-overflow: ellipsis; - white-space: nowrap; - flex: 1 1 0; - // This is so that text doesn't get overlapped by avatar's shadow if it has - // big one - z-index: 1; - line-height: 2em; - - --emoji-size: 1.7em; - - .top-line, - .bottom-line { - display: flex; - } - } - - .user-name { - text-overflow: ellipsis; - overflow: hidden; - flex: 1 1 auto; - margin-right: 1em; - font-size: 1.1em; - } - .bottom-line { font-weight: light; font-size: 1.1em; @@ -253,8 +228,36 @@ } } + .user-summary { + display: block; + margin-left: 0.6em; + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1 1 0; + // This is so that text doesn't get overlapped by avatar's shadow if it has + // big one + z-index: 1; + line-height: 2em; + + --emoji-size: 1.7em; + + .top-line, + .bottom-line { + display: flex; + } + } + + .user-name { + text-overflow: ellipsis; + overflow: hidden; + flex: 1 1 auto; + margin-right: 1em; + font-size: 1.1em; + } + .user-meta { - margin-bottom: .15em; + margin-bottom: 0.15em; display: flex; align-items: baseline; line-height: 22px; @@ -263,7 +266,7 @@ .following { flex: 1 0 auto; margin: 0; - margin-bottom: .25em; + margin-bottom: 0.25em; text-align: left; } @@ -271,7 +274,7 @@ flex: 0 1 auto; display: flex; flex-wrap: wrap; - margin-right: -.5em; + margin-right: -0.5em; align-self: start; .userHighlightCl { @@ -294,19 +297,20 @@ .userHighlightText, .userHighlightSel { vertical-align: top; - margin-right: .5em; - margin-bottom: .25em; + margin-right: 0.5em; + margin-bottom: 0.25em; } } } + .user-interactions { position: relative; display: flex; flex-flow: row wrap; - margin-right: -.75em; + margin-right: -0.75em; > * { - margin: 0 .75em .6em 0; + margin: 0 0.75em 0.6em 0; white-space: nowrap; min-width: 95px; } @@ -317,7 +321,7 @@ } .user-note { - margin: 0 .75em .6em 0; + margin: 0 0.75em 0.6em 0; } } @@ -327,8 +331,8 @@ .user-counts { display: flex; - line-height:16px; - padding: .5em 1.5em 0em 1.5em; + line-height: 16px; + padding: 0.5em 1.5em 0; text-align: center; justify-content: space-between; color: $fallback--lightText; @@ -338,14 +342,16 @@ .user-count { flex: 1 0 auto; - padding: .5em 0 .5em 0; - margin: 0 .5em; + padding: 0.5em 0; + margin: 0 0.5em; h5 { - font-size:1em; + font-size: 1em; font-weight: bolder; margin: 0 0 0.25em; } + + /* stylelint-disable-next-line no-descending-specificity */ a { text-decoration: none; } -- cgit v1.2.3-70-g09d2 From a28032fa58ff341b8815a0651d621ed358efd168 Mon Sep 17 00:00:00 2001 From: tusooa Date: Fri, 13 Jan 2023 00:37:42 -0500 Subject: Disable no-shorthand for certain props for better readability --- .stylelintrc.json | 17 ++++++++++++++++- src/App.scss | 2 -- src/components/desktop_nav/desktop_nav.scss | 2 -- src/components/user_card/user_card.scss | 9 ++++----- 4 files changed, 20 insertions(+), 10 deletions(-) (limited to 'src/components/user_card') diff --git a/.stylelintrc.json b/.stylelintrc.json index 7517362c..d6689cc0 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -21,6 +21,21 @@ "import-notation": null, "custom-property-pattern": null, "keyframes-name-pattern": null, - "scss/operator-no-newline-after": null + "scss/operator-no-newline-after": null, + "declaration-block-no-redundant-longhand-properties": [ + true, + { + "ignoreShorthands": [ + "grid-template", + "margin", + "padding", + "border", + "border-width", + "border-style", + "border-color", + "border-radius" + ] + } + ] } } diff --git a/src/App.scss b/src/App.scss index 0d2daa7d..be5dce9d 100644 --- a/src/App.scss +++ b/src/App.scss @@ -214,10 +214,8 @@ nav { grid-template-columns: var(--effectiveSidebarColumnWidth) var(--effectiveContentColumnWidth); - /* stylelint-disable declaration-block-no-redundant-longhand-properties */ grid-template-areas: "sidebar content"; grid-template-rows: 1fr; - /* stylelint-enable declaration-block-no-redundant-longhand-properties */ box-sizing: border-box; margin: 0 auto; align-content: flex-start; diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss index 00f434bf..c7e02936 100644 --- a/src/components/desktop_nav/desktop_nav.scss +++ b/src/components/desktop_nav/desktop_nav.scss @@ -14,11 +14,9 @@ .inner-nav { display: grid; - /* stylelint-disable declaration-block-no-redundant-longhand-properties */ grid-template-rows: var(--navbar-height); grid-template-columns: 2fr auto 2fr; grid-template-areas: "sitename logo actions"; - /* stylelint-enable declaration-block-no-redundant-longhand-properties */ box-sizing: border-box; padding: 0 1.2em; margin: auto; diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss index 942673c4..d56b6672 100644 --- a/src/components/user_card/user_card.scss +++ b/src/components/user_card/user_card.scss @@ -43,11 +43,10 @@ mask-composite: exclude; background-size: cover; mask-size: 100% 60%; - border-radius: - calc(var(--__roundnessTop, --panelRadius) - 1px) - calc(var(--__roundnessTop, --panelRadius) - 1px) - calc(var(--__roundnessBottom, --panelRadius) - 1px) - calc(var(--__roundnessBottom, --panelRadius) - 1px); + border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px); + border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px); + border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px); + border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px); background-color: var(--profileBg); z-index: -2; -- cgit v1.2.3-70-g09d2