shiran/discourse_theme_ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Button styling and states (#35)

Browse Source
This commit is contained in:
chapoi
2025-03-12 01:01:18 +08:00
committed by GitHub
parent a90b691505
commit cdf49bd516
4 changed files with 49 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/buttons.scss
+22 -42
View File
@@ -10,13 +10,14 @@
.btn-primary,
.btn-danger,
.select-kit .select-kit-header {
padding: var(--spacing-block-s) var(--spacing-inline-m);
// font-size: var(--font-up-1-rem);
// border-radius: var(--d-button-border-radius);
//using this hard coded value to make standalone icon-only btns perfect circles; I can't target the class no-text see below line 18
padding: var(--spacing-block-s) 0.665rem;
&.no-text {
padding-inline: 0.665rem;
}
//theres buttons with text hidden that dont have the no-text class, and my :has workaround for some reason refuses to work
// &.no-text,
// .btn-icon-text:has(.d-button-label) {
// padding-inline: 0.665rem;
// }
}
.sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text {
@@ -37,20 +38,18 @@
.discourse-no-touch .btn-default.sidebar-new-topic-button,
.discourse-no-touch .interface-color-selector-content,
.btn-default,
.select-kit .select-kit-header {
border: 1px solid var(--accent-color);
//id like to use rgba of the accent colour but how to derive that?
// box-shadow: 0px 0px 8px 2px oklch(from (var(--accent-color)) calc(l * 2) calc(c * 0.125) h);
background: var(--d-content-background);
.btn-icon-text,
.select-kit .select-kit-header.btn-default {
background: var(--primary-100);
.d-icon {
color: var(--accent-color);
color: var(--tertiary);
}
&:hover {
.discourse-no-touch & {
border: 1px solid transparent;
box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
box-shadow: 0px 0px 8px 1px var(--button-box-shadow);
background: var(--d-content-background);
color: var(--accent-color);
.d-icon {
@@ -62,24 +61,22 @@
.discourse-no-touch & {
background: var(--d-content-background);
color: var(--accent-color);
box-shadow: 0px 0px 0px 2px var(--d-content-background),
0px 0px 0px 4px var(--button-box-shadow);
box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
.d-icon {
color: var(--accent-color);
}
}
}
}
//not shared with select-kit
.btn-default {
&:active {
color: var(--d-content-background);
background: oklch(from var(--accent-color) 30% c h) !important;
&:active:not(:hover, :focus) {
color: var(--primary);
background: var(--tertiary-300);
background-image: none;
.d-icon {
color: var(--d-content-background);
color: var(--tertiary-high);
}
}
}
.btn-primary,
#create-topic.btn {
background-color: var(--accent-color);
@@ -89,34 +86,17 @@
}
&:hover {
.discourse-no-touch & {
background: radial-gradient(
90% 110% at 50% 50%,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0) 100%
),
var(--accent-color);
background: oklch(from var(--accent-color) 40% c h) !important;
box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
}
}
&:focus-visible {
.discourse-no-touch & {
background: radial-gradient(
90% 110% at 50% 50%,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0) 100%
),
var(--accent-color);
box-shadow: 0px 0px 0px 2px var(--d-content-background),
0px 0px 0px 4px var(--button-box-shadow);
background: oklch(from var(--accent-color) 40% c h) !important;
box-shadow: 0px 0px 0px 4px var(--button-box-shadow);
}
}
&:active {
// background: radial-gradient(
// 65% 95% at 50% 50%,
// rgba(0, 0, 0, 0.4) 0%,
// rgba(0, 0, 0, 0) 100%
// ),
// var(--accent-color) !important;
background: oklch(from var(--accent-color) 30% c h) !important;
}
}
scss/color-exploration.scss
+1 -1
View File
@@ -42,7 +42,7 @@
oklch(from var(--accent-color) calc(l * 0.2) calc(c * 0.01) h / 0.25)
);
--button-box-shadow: light-dark(
oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h),
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.35) h),
oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
);
--d-selected: light-dark(
scss/mobile-stuff.scss
+4 -1
View File
@@ -66,7 +66,9 @@
}
}
.navigation-controls {
gap: var(--spacing-inline-s);
@include breakpoint(mobile-extra-large) {
gap: var(--spacing-inline-s);
}
}
}
}
@@ -201,6 +203,7 @@
}
.topic-admin-menu-trigger {
border-radius: 0;
background: var(--secondary);
border: 1px solid var(--tertiary-low);
}
}
scss/nav-pills.scss
+22 -11
View File
@@ -20,7 +20,16 @@
// font-size: var(--font-up-1-rem);
&:hover {
border: 1px solid var(--accent-color);
box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
}
&:focus-visible {
.discourse-no-touch & {
background: var(--secondary);
color: var(--accent-color);
box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
.d-icon {
color: var(--accent-color);
}
}
}
}
.select-kit.combo-box.category-drop.has-selection
@@ -36,15 +45,17 @@
.nav-pills > li > a:hover,
.nav-pills > li button:hover {
background: transparent;
color: var(--accent-color);
&::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: var(--d-nav-underline-height);
background: var(--accent-color);
.discourse-no-touch & {
background: transparent;
color: var(--accent-color);
&::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: var(--d-nav-underline-height);
background: var(--accent-color);
}
}
}