Skip to content

Commit

Permalink
improve app settings design
Browse files Browse the repository at this point in the history
Signed-off-by: szaimen <szaimen@e.mail.de>
  • Loading branch information
szaimen committed Sep 5, 2022
1 parent f496e47 commit 5696eaa
Showing 1 changed file with 42 additions and 42 deletions.
84 changes: 42 additions & 42 deletions core/css/apps.scss
Original file line number Diff line number Diff line change
Expand Up @@ -814,52 +814,52 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
border-radius: calc(var(--default-clickable-area) / 2);
padding: calc(var(--default-grid-baseline) * 2);
padding-top: 0;
}


#app-settings-header .settings-button {
display: flex;
align-items: center;
height: 44px;
width: 100%;
padding: 0;
margin: 0;
background-color: var(--color-main-background);
box-shadow: none;
border: 0;
border-radius: calc(var(--default-clickable-area) / 2);
text-align: left;
font-weight: normal;
font-size: 100%;
opacity: 0.8;

/* like app-navigation a */
color: var(--color-main-text);

&.opened {
border-top: solid 1px var(--color-border);
.settings-button {
display: flex;
align-items: center;
height: 44px;
width: 100%;
padding: 0;
margin: 0;
background-color: var(--color-main-background);
}
&:hover,
&:focus {
background-color: var(--color-background-hover);
}
box-shadow: none;
border: 0;
border-radius: calc(var(--default-clickable-area) / 2);
text-align: left;
font-weight: normal;
font-size: 100%;
opacity: 0.8;

/* like app-navigation a */
color: var(--color-main-text);

&.opened {
border-top: solid 1px var(--color-border);
background-color: var(--color-main-background);
margin-top: 8px;
}
&:hover,
&:focus {
background-color: var(--color-background-hover);
}

&::before {
background-image: var(--icon-settings-dark);
background-position: 14px center;
background-repeat: no-repeat;
content: '';
width: 44px;
height: 44px;
top: 0;
left: 0;
display: block;
}
&::before {
background-image: var(--icon-settings-dark);
background-position: 14px center;
background-repeat: no-repeat;
content: '';
width: 44px;
height: 44px;
top: 0;
left: 0;
display: block;
}

&:focus-visible {
box-shadow: 0 0 0 2px inset var(--color-primary) !important;
background-position: 12px center;
&:focus-visible {
box-shadow: 0 0 0 2px inset var(--color-primary) !important;
background-position: 12px center;
}
}
}

Expand Down

0 comments on commit 5696eaa

Please sign in to comment.