maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Topbar icons states (#7012)

Browse source 
* topbar

* little update

* whoops

* gitattributes
This commit is contained in:
ludwiczakpawel 2020-04-02 11:50:05 +02:00 • committed by GitHub
parent 3a17fd2aa9
commit e16d13f5f8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 49 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitattributes vendored
View file

@ -2,4 +2,4 @@
# On Windows, the default git setting for `core.autocrlf`
# means that when checking out code, LF endings get converted
# to CRLF.
*.svg text eol=lf
# *.svg text eol=lf

2
app/assets/stylesheets/config/_colors.scss
View file

@ -68,6 +68,8 @@
// Header
--header-bg: var(--base-inverted);
--header-bg-hover: var(--base-10);
--header-bg-current: var(--base-20);
--header-shadow: rgba(0, 0, 0, 0.1);
--header-icons-color: var(--base-70);
--header-icons-color-hover: var(--base-100);

2
app/assets/stylesheets/themes/hacker.scss
View file

@ -56,6 +56,8 @@
// Header
--header-bg: var(--base-10);
--header-bg-hover: var(--base-20);
--header-bg-current: var(--base-0);
--header-shadow: rgba(0, 0, 0, 0.1);
--header-icons-color: var(--base-70);
--header-icons-color-hover: var(--base-100);

2
app/assets/stylesheets/themes/minimal.scss
View file

@ -56,6 +56,8 @@
// Header
--header-bg: var(--base-0);
--header-bg-hover: var(--base-10);
--header-bg-current: var(--base-20);
--header-shadow: rgba(0, 0, 0, 0.1);
--header-icons-color: #0a0a0a;
--header-icons-color-hover: #000;

2
app/assets/stylesheets/themes/night.scss
View file

@ -56,6 +56,8 @@
// Header
--header-bg: var(--base-10);
--header-bg-hover: var(--base-0);
--header-bg-current: var(--base-20);
--header-shadow: rgba(0, 0, 0, 0.3);
--header-icons-color: rgba(255, 255, 255, 0.8);
--header-icons-color-hover: #fff;

2
app/assets/stylesheets/themes/pink.scss
View file

@ -56,6 +56,8 @@
// Header
--header-bg: var(--base-40);
--header-bg-hover: var(--base-50);
--header-bg-current: var(--base-50);
--header-shadow: transparent;
--header-icons-color: var(--base-10);
--header-icons-color-hover: var(--base-0);

65
app/assets/stylesheets/top-bar.scss
View file

@ -3,6 +3,9 @@
@import 'mixins';
.top-bar {
--indicator-outline: var(--header-bg);
--dropdown-display: none;
position: fixed;
top: 0px;
left: 0px;
@ -31,9 +34,9 @@
.crayons-indicator {
position: absolute;
top: $su-1;
right: $su-1;
box-shadow: 0 0 0 2px var(--header-bg);
top: -$su-1;
right: 0;
box-shadow: 0 0 0 2px var(--indicator-outline);
}
}
@ -77,51 +80,58 @@
.top-bar__link {
position: relative;
display: flex;
padding: 0 $su-3;
height: 100%;
padding: $su-2;
margin: 0 $su-1;
border-radius: 50%;
align-items: center;
color: var(--header-icons-color);
outline: 0;
transition: background $transition-props;
&:hover,
&:focus {
--indicator-outline: var(--header-bg-hover);
&:hover {
color: var(--header-icons-color-hover);
background: var(--header-bg-hover);
}
&--current {
--indicator-outline: var(--header-bg-current);
color: var(--header-icons-color-hover);
background: var(--header-bg-current);
}
}
// Dropdown under profile picture / hamburger icon
.top-bar__menu {
height: 100%;
display: flex;
align-items: center;
&__trigger {
all: unset;
display: flex;
height: 100%;
padding: 0 $su-2;
align-items: center;
cursor: pointer;
padding: $su-1;
margin: 0 $su-1;
border-radius: 50%;
color: var(--header-icons-color);
&:hover {
color: var(--header-icons-color-hover);
}
cursor: pointer;
}
&__dropdown {
display: var(--dropdown-display);
top: $header-height;
}
&.showing {
.top-bar__menu__dropdown {
display: block;
}
}
&.showing,
&.desktop:hover,
&.desktop:focus {
--dropdown-display: block;
&.desktop {
&:hover,
&:active,
&:focus {
.top-bar__menu__dropdown {
display: block;
}
.top-bar__menu__trigger {
color: var(--header-icons-color-hover);
background: var(--header-bg-hover);
}
}
}
@ -138,6 +148,7 @@
pointer-events: none;
opacity: 0;
border-radius: $br-default;
outline: 0;
&:focus {
pointer-events: auto;