sjw
/
pleroma-fe
mirror of https://git.pleroma.social/sjw/pleroma-fe.git
1
0
Fork 0
Code Issues Releases Wiki Activity

add roundness, fix inputs

This commit is contained in:
Henry Jameson 2024-02-13 02:09:43 +02:00
parent 17b25ef0e0
commit bcc5084409
33 changed files with 150 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/App.scss
View File

@ -355,8 +355,7 @@ nav {
user-select: none;
color: var(--text);
border: none;
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
border-radius: var(--roundness);
cursor: pointer;
box-shadow: var(--shadow);
font-size: 1em;
@ -380,6 +379,16 @@ nav {
font-family: inherit;
cursor: pointer;
color: inherit;
&:first-child {
border-top-right-radius: var(--roundness);
border-top-left-radius: var(--roundness);
}
&:last-child {
border-bottom-right-radius: var(--roundness);
border-bottom-left-radius: var(--roundness);
}
}
.button-unstyled {
@ -423,8 +432,7 @@ textarea {
--_padding: 0.5em;
border: none;
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
border-radius: var(--roundness);
box-shadow: var(--shadow);
font-family: sans-serif;
font-family: var(--inputFont, sans-serif);
@ -511,8 +519,7 @@ textarea {
transition: color 200ms;
width: 1.1em;
height: 1.1em;
border-radius: $fallback--checkboxRadius;
border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
border-radius: var(--roundness);
box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow);
margin-right: 0.5em;
@ -562,7 +569,7 @@ option {
li {
border: 1px solid var(--border);
border-radius: var(--inputRadius);
border-radius: var(--roundness);
padding: 0.5em;
margin: 0.25em;
}
@ -634,8 +641,7 @@ option {
.alert {
margin: 0 0.35em;
padding: 0 0.25em;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
border-radius: var(--roundness);
&.error {
background-color: $fallback--alertError;
@ -682,8 +688,7 @@ option {
padding: 0.5em;
border: 1px solid $fallback--faint;
border: 1px solid var(--faint, $fallback--faint);
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
border-radius: var(--roundness);
}
.notice-dismissible {

10
src/components/autosuggest/autosuggest.vue
View File

@ -1,3 +1,4 @@
<!-- FIXME THIS NEEDS TO BE REFACTORED TO USE POPOVER -->
<template>
<div
v-click-outside="onClickOutside"
@ -11,7 +12,7 @@
>
<div
v-if="resultsVisible && filtered.length > 0"
class="autosuggest-results"
class="panel autosuggest-results"
>
<slot
v-for="item in filtered"
@ -45,13 +46,12 @@
border-style: solid;
border-width: 1px;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
border-color: var(--border);
border-radius: var(--roundness);
border-top-left-radius: 0;
border-top-right-radius: 0;
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
box-shadow: var(--panelShadow);
box-shadow: var(--shadow);
overflow-y: auto;
z-index: 1;
}

6
src/components/avatar.style.js
View File

@ -1,11 +1,13 @@
export default {
name: 'Avatar',
selector: '.Avatar',
variants: {
compact: '.-compact'
},
defaultRules: [
{
directives: {
background: '--bg',
opacity: 0,
roundness: 3,
shadow: [{
x: 0,
y: 1,

3
src/components/button.style.js
View File

@ -64,7 +64,8 @@ export default {
// like within it
directives: {
background: '--fg',
shadow: [buttonOuterShadow, ...buttonInsetFakeBorders]
shadow: [buttonOuterShadow, ...buttonInsetFakeBorders],
roundness: 3
}
},
{

4
src/components/button_unstyled.style.js
View File

@ -15,9 +15,7 @@ export default {
defaultRules: [
{
directives: {
background: '--fg',
shadow: [],
opacity: 0
shadow: []
}
},
{

5
src/components/chat/chat.scss
View File

@ -18,8 +18,9 @@
overflow: visible;
min-height: calc(100vh - var(--navbar-height));
margin: 0;
border-radius: 10px 10px 0 0;
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
border-radius: var(--roundness);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
&::after {
border-radius: 0;

19
src/components/emoji_input/emoji_input.vue
View File

@ -1,7 +1,7 @@
<template>
<div
ref="root"
class="emoji-input"
class="input emoji-input"
:class="{ 'with-picker': !hideEmojiButton }"
>
<slot
@ -68,9 +68,9 @@
v-for="(suggestion, index) in suggestions"
:id="suggestionItemId(index)"
:key="index"
class="autocomplete-item"
class="menu-item autocomplete-item"
role="option"
:class="{ highlighted: index === highlighted }"
:class="{ active: index === highlighted }"
:aria-label="autoCompleteItemLabel(suggestion)"
:aria-selected="index === highlighted"
@click.stop.prevent="onClick($event, suggestion)"
@ -145,7 +145,9 @@
textarea {
flex: 1 0 auto;
color: inherit;
padding: 0;
background: none;
box-shadow: none;
border: none;
outline: none;
}
@ -186,7 +188,6 @@
display: flex;
cursor: pointer;
padding: 0.2em 0.4em;
border-bottom: 1px solid rgb(0 0 0 / 40%);
height: 32px;
.image {
@ -219,16 +220,6 @@
line-height: 9px;
}
}
&.highlighted {
background-color: $fallback--fg;
background-color: var(--selectedMenuPopover, $fallback--fg);
color: var(--selectedMenuPopoverText, $fallback--text);
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
}
}
}
</style>

1
src/components/input.style.js
View File

@ -34,6 +34,7 @@ export default {
{
directives: {
background: '--fg, -5',
roundness: 3,
shadow: [{
x: 0,
y: 0,

6
src/components/link-preview/link-preview.vue
View File

@ -51,8 +51,7 @@
width: 100%;
height: 100%;
object-fit: cover;
border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
border-radius: var(--roundness);
}
}
@ -86,8 +85,7 @@
color: var(--text, $fallback--text);
border-style: solid;
border-width: 1px;
border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
border-radius: var(--roundness);
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
}

9
src/components/menu_item.style.js
View File

@ -9,7 +9,7 @@ export default {
],
states: {
hover: ':hover',
active: 'active'
active: '.active'
},
defaultRules: [
{
@ -25,6 +25,13 @@ export default {
opacity: 1
}
},
{
state: ['active'],
directives: {
background: '$mod(--bg, 5)',
opacity: 1
}
},
{
component: 'Text',
variant: 'normal',

4
src/components/mobile_nav/mobile_nav.vue
View File

@ -20,7 +20,7 @@
/>
<div
v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
class="alert-dot"
class="badge alert-dot"
/>
</button>
<NavigationPins class="pins" />
@ -37,7 +37,7 @@
/>
<div
v-if="unseenNotificationsCount"
class="alert-dot"
class="badge alert-dot"
/>
</button>
</div>

14
src/components/moderation_tools/moderation_tools.vue
View File

@ -54,7 +54,7 @@
@click="toggleTag(tags.FORCE_NSFW)"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
/>
{{ $t('user_card.admin_menu.force_nsfw') }}
@ -64,7 +64,7 @@
@click="toggleTag(tags.STRIP_MEDIA)"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
/>
{{ $t('user_card.admin_menu.strip_media') }}
@ -74,7 +74,7 @@
@click="toggleTag(tags.FORCE_UNLISTED)"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
/>
{{ $t('user_card.admin_menu.force_unlisted') }}
@ -84,7 +84,7 @@
@click="toggleTag(tags.SANDBOX)"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
/>
{{ $t('user_card.admin_menu.sandbox') }}
@ -95,7 +95,7 @@
@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
/>
{{ $t('user_card.admin_menu.disable_remote_subscription') }}
@ -106,7 +106,7 @@
@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
/>
{{ $t('user_card.admin_menu.disable_any_subscription') }}
@ -117,7 +117,7 @@
@click="toggleTag(tags.QUARANTINE)"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
/>
{{ $t('user_card.admin_menu.quarantine') }}

12
src/components/nav_panel/nav_panel.vue
View File

@ -126,17 +126,13 @@
> li {
&:first-child.menu-item {
border-top-right-radius: $fallback--panelRadius;
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
border-top-left-radius: $fallback--panelRadius;
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
border-top-right-radius: var(--roundness);
border-top-left-radius: var(--roundness);
}
&:last-child.menu-item {
border-bottom-right-radius: $fallback--panelRadius;
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
border-bottom-left-radius: $fallback--panelRadius;
border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
border-bottom-right-radius: var(--roundness);
border-bottom-left-radius: var(--roundness);
}
}

2
src/components/navigation/navigation_pins.vue
View File

@ -19,7 +19,7 @@
>{{ item.iconLetter }}</span>
<div
v-if="item.badgeGetter && getters[item.badgeGetter]"
class="alert-dot"
class="badge alert-dot"
/>
</router-link>
</span>

14
src/components/notifications/notification_filters.vue
View File

@ -12,7 +12,7 @@
@click="toggleNotificationFilter('likes')"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.likes }"
/>{{ $t('settings.notification_visibility_likes') }}
</button>
@ -21,7 +21,7 @@
@click="toggleNotificationFilter('repeats')"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.repeats }"
/>{{ $t('settings.notification_visibility_repeats') }}
</button>
@ -30,7 +30,7 @@
@click="toggleNotificationFilter('follows')"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.follows }"
/>{{ $t('settings.notification_visibility_follows') }}
</button>
@ -39,7 +39,7 @@
@click="toggleNotificationFilter('mentions')"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.mentions }"
/>{{ $t('settings.notification_visibility_mentions') }}
</button>
@ -48,7 +48,7 @@
@click="toggleNotificationFilter('emojiReactions')"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.emojiReactions }"
/>{{ $t('settings.notification_visibility_emoji_reactions') }}
</button>
@ -57,7 +57,7 @@
@click="toggleNotificationFilter('moves')"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.moves }"
/>{{ $t('settings.notification_visibility_moves') }}
</button>
@ -66,7 +66,7 @@
@click="toggleNotificationFilter('polls')"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': filters.polls }"
/>{{ $t('settings.notification_visibility_polls') }}
</button>

1
src/components/panel.style.js
View File

@ -17,6 +17,7 @@ export default {
{
directives: {
background: '--bg',
roundness: 3,
shadow: [{
x: 1,
y: 1,

1
src/components/popover.style.js
View File

@ -9,6 +9,7 @@ export default {
'Text',
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'Input',

15
src/components/popover/popover.vue
View File

@ -69,13 +69,15 @@
pointer-events: none;
}
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
border-radius: var(--roundness);
border-color: var(--border);
border-style: solid;
border-width: 1px;
}
.dropdown-menu {
display: block;
padding: 0.5rem 0;
padding: 0;
font-size: 1em;
text-align: left;
list-style: none;
@ -108,8 +110,6 @@
height: 100%;
box-sizing: border-box;
--btnText: var(--popoverText, $fallback--text);
&-icon {
svg {
width: 22px;
@ -134,10 +134,7 @@
line-height: 22px;
text-align: center;
border-radius: 0;
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow);
box-shadow: var(--shadow);
margin-right: 0.75em;
&.menu-checkbox-checked::after {

12
src/components/quick_filter_settings/quick_filter_settings.vue
View File

@ -22,7 +22,7 @@
@click="replyVisibilityAll = true"
>
<span
class="menu-checkbox -radio"
class="input menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilityAll }"
:aria-hidden="true"
/>{{ $t('settings.reply_visibility_all') }}
@ -35,7 +35,7 @@
@click="replyVisibilityFollowing = true"
>
<span
class="menu-checkbox -radio"
class="input menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
:aria-hidden="true"
/>{{ $t('settings.reply_visibility_following_short') }}
@ -48,7 +48,7 @@
@click="replyVisibilitySelf = true"
>
<span
class="menu-checkbox -radio"
class="input menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
:aria-hidden="true"
/>{{ $t('settings.reply_visibility_self_short') }}
@ -66,7 +66,7 @@
@click="muteBotStatuses = !muteBotStatuses"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': muteBotStatuses }"
:aria-hidden="true"
/>{{ $t('settings.mute_bot_posts') }}
@ -78,7 +78,7 @@
@click="hideMedia = !hideMedia"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hideMedia }"
:aria-hidden="true"
/>{{ $t('settings.hide_media_previews') }}
@ -90,7 +90,7 @@
@click="hideMutedPosts = !hideMutedPosts"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': hideMutedPosts }"
:aria-hidden="true"
/>{{ $t('settings.hide_all_muted_posts') }}

10
src/components/quick_view_settings/quick_view_settings.vue
View File

@ -18,7 +18,7 @@
@click="conversationDisplay = 'tree'"
>
<span
class="menu-checkbox -radio"
class="input menu-checkbox -radio"
:aria-hidden="true"
:class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
/><FAIcon
@ -33,7 +33,7 @@
@click="conversationDisplay = 'linear'"
>
<span
class="menu-checkbox -radio"
class="input menu-checkbox -radio"
:class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
:aria-hidden="true"
/><FAIcon
@ -53,7 +53,7 @@
@click="showUserAvatars = !showUserAvatars"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': showUserAvatars }"
:aria-hidden="true"
/>{{ $t('settings.mention_link_show_avatar_quick') }}
@ -66,7 +66,7 @@
@click="autoUpdate = !autoUpdate"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': autoUpdate }"
:aria-hidden="true"
/>{{ $t('settings.auto_update') }}
@ -79,7 +79,7 @@
@click="collapseWithSubjects = !collapseWithSubjects"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': collapseWithSubjects }"
:aria-hidden="true"
/>{{ $t('settings.collapse_subject') }}

8
src/components/root.style.js
View File

@ -6,13 +6,5 @@ export default {
'Modals',
'Popover',
'TopBar'
],
defaultRules: [
{
directives: {
background: '--bg',
opacity: 0
}
}
]
}

3
src/components/settings_modal/tabs/profile_tab.scss
View File

@ -43,8 +43,7 @@
display: block;
width: 100%;
height: 100%;
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
border-radius: var(--roundness);
}
.reset-button {

6
src/components/shadow_control/shadow_control.vue
View File

@ -293,16 +293,14 @@
linear-gradient(-45deg, transparent 75%, #666 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
border-radius: var(--roundness);
.preview-block {
width: 33%;
height: 33%;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
border-radius: var(--roundness);
}
}
}

3
src/components/shout_panel/shout_panel.vue
View File

@ -128,8 +128,7 @@
img {
height: 24px;
width: 24px;
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
border-radius: var(--roundness);
margin-right: 0.5em;
margin-top: 0.25em;
}

5
src/components/status/status.scss
View File

@ -247,7 +247,7 @@
}
.repeater-avatar {
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
border-radius: var(--roundness);
margin-left: 28px;
width: 20px;
height: 20px;
@ -363,7 +363,6 @@
.avatar-row {
flex: 1;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
@ -421,7 +420,7 @@
.quoted-status {
margin-top: 0.5em;
border: 1px solid var(--border, $fallback--border);
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
border-radius: var(--roundness);
&.-unavailable-prompt {
padding: 0.5em;

5
src/components/status_popover/status_popover.vue
View File

@ -47,12 +47,9 @@
font-size: 1rem;
min-width: 15em;
max-width: 95%;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-color: var(--border);
border-style: solid;
border-width: 1px;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
/* TODO cleanup this */
.Status.Status {

5
src/components/timeline/timeline.scss
View File

@ -10,22 +10,19 @@
top: calc(50% - 4px);
margin-left: 6px;
margin-top: -6px;
background-color: var(--badgeNeutral);
}
.alert-badge {
font-size: 0.75em;
line-height: 1;
text-align: right;
border-radius: var(--tooltipRadius);
border-radius: var(--roundness);
position: absolute;
left: calc(50% - 0.5em);
top: calc(50% - 0.4em);
padding: 0.2em;
margin-left: 0.7em;
margin-top: -1em;
background-color: var(--badgeNeutral);
color: var(--badgeNeutralText);
}
.loadmore-button {

14
src/components/user_avatar/user_avatar.vue
View File

@ -43,16 +43,14 @@
&.-compact {
width: 32px;
height: 32px;
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
border-radius: var(--roundness);
}
.avatar {
width: 100%;
height: 100%;
box-shadow: var(--_avatarShadowBox);
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
border-radius: var(--roundness);
&.-better-shadow {
box-shadow: var(--_avatarShadowInset);
@ -64,13 +62,11 @@
}
&.-compact {
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
border-radius: var(--roundness);
}
&.-placeholder {
background-color: $fallback--fg;
background-color: var(--fg, $fallback--fg);
background-color: var(--background);
}
}
@ -87,7 +83,7 @@
padding: 0.2em;
background: rgb(127 127 127 / 50%);
color: #fff;
border-radius: var(--tooltipRadius);
border-radius: var(--roundness);
}
}
</style>

3
src/components/user_card/user_card.scss
View File

@ -153,8 +153,7 @@
display: flex;
justify-content: center;
align-items: center;
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
border-radius: var(--roundness);
opacity: 0;
transition: opacity 0.2s ease;

2
src/components/user_list_menu/user_list_menu.vue
View File

@ -14,7 +14,7 @@
@click="toggleList(list.id)"
>
<span
class="menu-checkbox"
class="input menu-checkbox"
:class="{ 'menu-checkbox-checked': list.inList }"
/>
{{ list.title }}

17
src/panel.scss
View File

@ -10,8 +10,7 @@
&::after,
& {
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
border-radius: var(--roundness);
}
&::after {
@ -77,8 +76,7 @@
&.-stub {
&,
&::after {
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
border-radius: var(--roundness);
}
}
@ -126,16 +124,15 @@
// TODO Should refactor panels into separate component and utilize slots
.panel-heading {
border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
border-radius: var(--roundness) var(--roundness) 0 0;
border-width: 0 0 1px;
align-items: start;
&::after {
background-color: var(--background);
z-index: -2;
border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: var(--shadow);
}
@ -179,8 +176,8 @@
}
.panel-footer {
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
border-top-left-radius: 0;
border-top-right-radius: 0;
align-items: center;
border-width: 1px 0 0;
border-style: solid;

2
src/services/style_setter/style_setter.js
View File

@ -24,7 +24,7 @@ export const applyTheme = (input) => {
const styleSheet = styleEl.sheet
styleSheet.toString()
styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
// styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
// styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
// styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')

52
src/services/theme_data/theme_data_3.service.js
View File

@ -484,9 +484,20 @@ export const init = (extraRuleset, palette) => {
})
} else {
computed[selector] = computed[selector] || {}
let addRuleNeeded = false
// TODO: DEFAULT TEXT COLOR
const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
if (
computedDirectives.shadow != null ||
computedDirectives.roundness != null
) {
addRuleNeeded = true
}
// TODO make background non-mandatory
if (computedDirectives.background) {
addRuleNeeded = true
let inheritRule = null
const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent }))
const lastVariantRule = variantRules[variantRules.length - 1]
@ -501,9 +512,6 @@ export const init = (extraRuleset, palette) => {
const inheritSelector = ruleToSelector({ ...inheritRule, parent }, true)
const inheritedBackground = computed[inheritSelector].background
// TODO: DEFAULT TEXT COLOR
const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
dynamicVars.inheritedBackground = inheritedBackground
const rgb = convert(findColor(computedDirectives.background, dynamicVars)).rgb
@ -520,16 +528,25 @@ export const init = (extraRuleset, palette) => {
}
stacked[selector] = blend
computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
addRule({
selector,
component: component.name,
...combination,
parent,
directives: computedDirectives
})
}
}
if (!stacked[selector]) {
computedDirectives.background = 'transparent'
computedDirectives.opacity = 0
stacked[selector] = lowerLevelComputedBackground
computed[selector].background = { ...lowerLevelComputedBackground, a: 0 }
}
if (addRuleNeeded) {
addRule({
selector,
component: component.name,
...combination,
parent,
directives: computedDirectives
})
}
}
innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
@ -566,6 +583,11 @@ export const init = (extraRuleset, palette) => {
if (rule.component !== 'Root') {
directives = Object.entries(rule.directives).map(([k, v]) => {
switch (k) {
case 'roundness': {
return ' ' + [
'--roundness: ' + v + 'px'
].join(';\n ')
}
case 'shadow': {
return ' ' + [
'--shadow: ' + getCssShadow(v),
@ -574,6 +596,12 @@ export const init = (extraRuleset, palette) => {
].join(';\n ')
}
case 'background': {
if (v === 'transparent') {
return [
'background-color: ' + v,
' --background: ' + v
].join(';\n')
}
const color = cssColorString(computed[ruleToSelector(rule, true)].background, rule.directives.opacity)
return [
'background-color: ' + color,