Skip to content

Commit

Permalink
feat: reworked navbar according to new design (#3668)
Browse files Browse the repository at this point in the history
  • Loading branch information
berezinant committed Sep 20, 2024
1 parent 7733051 commit 29999ba
Show file tree
Hide file tree
Showing 40 changed files with 1,449 additions and 339 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,27 @@
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
*/

@import '../../ui-kit/tokens/index';

$font-color: hsla(0deg, 0%, 100%, 0.8);
$secondary-font-color: hsla(0deg, 0%, 100%, 0.6);

#pages-search {
padding: 0;

cursor: pointer;

border: none;
border-radius: 50%;
background: transparent;
fill: #fff;
fill: var(--dark-mode-and-search-icon-color);

&:hover {
background: var(--white-10);
}
font-size: 0;
}

.search {
&,
[data-test='ring-select'],
[data-test='ring-tooltip'],
[data-test='ring-select_focus'],
#pages-search {
[data-test='ring-select_focus'] {
display: inline-block;

margin: 0;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
/*
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
*/

@import 'tabs/styles';
import './styles.scss';
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/*!
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
*/
@import '../tokens/index';

.filter-section {
z-index: 0;

display: flex;
align-items: center;
flex-wrap: wrap;

margin-right: 12px;
gap: 2px;

@media (width <= $breakpoint-desktop-min) {
display: none;
}
}

.no-js .filter-section {
display: none;
}
17 changes: 17 additions & 0 deletions dokka-subprojects/plugin-base-frontend/src/main/ui-kit/global.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/*!
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
*/
@import 'tokens/index';

:root {
--color-background: var(--color-background-page);
}

.theme-dark {
--color-background: var(--color-background-page-dt);
}

body,
table {
background-color: var(--color-background);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/*!
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
*/
@import 'tokens/index';

.ui-kit_desktop-only {
@media (width < $breakpoint-desktop-min) {
display: none;
}
}

.ui-kit_mobile-only {
@media (width >= $breakpoint-desktop-min) {
display: none;
}
}
11 changes: 10 additions & 1 deletion dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
/*
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
*/
import * as filterSection from './filter-section/index';
import * as libraryName from './library-name/index';
import * as libraryVersion from './library-version/index';
import * as navbar from './navbar/index';
import * as navbarButton from './navbar-button/index';
import * as platformTag from './platform-tag/index';
import * as platformTags from './platform-tags/index';
import * as tabs from './tabs/index';
import './helpers.scss';
import './global.scss';

export { tabs };
export { filterSection, libraryName, libraryVersion, navbar, navbarButton, platformTag, platformTags, tabs };
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/*
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
*/

import './styles.scss';
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/*!
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
*/
@import '../tokens/index';

:root {
--dokka-logo-height: 28px;
--dokka-logo-width: 28px;
}

.library-name--link {
display: flex;
align-items: center;

margin-right: var(--size-s2);

white-space: nowrap;

color: var(--color-text-dt);

font: var(--font-h4);

@media (width <= $breakpoint-desktop-min) {
height: 52px;

margin-left: 12px;
}
}

.library-name--link::before {
width: var(--dokka-logo-height);
height: var(--dokka-logo-width);
margin-right: var(--size-s2);

content: '';

background: var(--dokka-logo-image-url) center no-repeat;
background-size: var(--dokka-logo-height) var(--dokka-logo-width);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/*
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
*/

import './styles.scss';
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/*!
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
*/

@import '../tokens/index';

.library-version {
color: var(--color-text-dt);

font: var(--font-text-s);

@media (width <= $breakpoint-desktop-min) {
display: flex;
align-items: center;

height: 52px;

background-color: var(--color-text);
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/*
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
*/

import './styles.scss';
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/*!
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
*/

@import '../tokens/index';

.navigation-controls {
display: flex;
align-items: center;
gap: var(--size-s1);

margin-left: auto;

@media (width <= $breakpoint-desktop-min) {
flex-grow: 1;
justify-content: flex-end;

background-color: var(--color-text);
gap: 0;
}
}

.no-js .navigation-controls {
display: none;
}

.navigation-controls--btn {
display: inline-flex;
align-items: center;
justify-content: center;

width: 40px;
height: 40px;
padding: 0;

cursor: pointer;
transition: var(--hover-transition);

border: none;
border-radius: var(--size-s1);
background-color: inherit;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 24px 24px;

font-size: 0;
line-height: 0;
will-change: background-color;

&:hover {
background-color: var(--color-w10);
}

@media (width <= $breakpoint-desktop-min) {
width: 52px;
height: 52px;
}
}

.navigation-controls--break {
flex-basis: 100%;
}

.navigation-controls--btn_theme {
background-image: url('./assets/theme-toggle.svg');
}

.navigation-controls--btn_homepage {
background-image: url('./assets/homepage.svg');
}

.navigation-controls--btn_menu {
margin-left: auto;

background-image: url('./assets/burger.svg');
}

.navigation-controls--btn_filter {
background-image: url('./assets/filter.svg');
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/*
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
*/

import './styles.scss';
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/*!
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
*/
@import '../tokens/index';

.navigation {
z-index: 4;

display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;

box-sizing: border-box;
height: var(--size-l1);
padding: 12px var(--size-m1);

color: var(--color-text-dt);
background-color: var(--color-background-nav);

@media (width <= $breakpoint-desktop-min) {
height: auto;
padding: 0;
}

.theme-dark & {
background-color: var(--color-background-nav-dt);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/*
* Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
*/

import './styles.scss';
Loading

0 comments on commit 29999ba

Please sign in to comment.