LBRYCommunity/components
1
0
Fork 0
Code Issues 1 Pull requests 7 Projects Releases Packages Wiki Activity

Updated drawer-navigation

Browse source
This commit is contained in:
ポール ウェッブ 2019-03-05 15:02:41 -06:00
parent 2940659d1d
commit 6fb7c3e321
6 changed files with 40 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/index.css vendored
View file

File diff suppressed because one or more lines are too long

2
dist/index.css.map vendored
View file

File diff suppressed because one or more lines are too long

24
docs/index.html
View file

@ -6,8 +6,8 @@
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tonsky/FiraCode@master/distr/fira_code.css"/>
<!-- <link rel="stylesheet" href="../dist/index.css"/> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lbryio/components@master/dist/index.css"/>
<link rel="stylesheet" href="../dist/index.css"/>
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lbryio/components@master/dist/index.css"/> -->
<style>
body {
@ -108,7 +108,10 @@
<drawer-navigation>
<drawer-section>
<drawer-title>Link I</drawer-title>
<drawer-title>
Link I
<drawer-navigation-helper/>
</drawer-title>
<drawer-wrap>
<drawer-children>
@ -171,7 +174,10 @@
</drawer-section>
<drawer-section>
<drawer-title>Link II</drawer-title>
<drawer-title>
Link II
<drawer-navigation-helper/>
</drawer-title>
<drawer-wrap>
<drawer-children>
@ -207,7 +213,10 @@
</drawer-section>
<drawer-section>
<drawer-title>Link III</drawer-title>
<drawer-title>
Link III
<drawer-navigation-helper/>
</drawer-title>
<drawer-wrap>
<drawer-children>
@ -243,7 +252,10 @@
</drawer-section>
<drawer-section>
<drawer-title>Link IV</drawer-title>
<drawer-title>
Link IV
<drawer-navigation-helper/>
</drawer-title>
<drawer-wrap>
<drawer-children>

2
package.json
View file

@ -22,7 +22,7 @@
"homepage": "https://github.com/lbryio/components#readme",
"husky": {
"hooks": {
"pre-commit": "npm run test:sass && npm run sass:prod && git add -A :/"
"pre-commit": "npm run test:sass; npm run sass:prod"
}
},
"license": "BSD-3-Clause",

1
sass/button/_index.scss
View file

@ -1,6 +1,7 @@
.button {
fill: currentColor;
position: relative;
white-space: nowrap;
}
.button--alt {

22
sass/navigation/_index.scss
View file

@ -1,29 +1,42 @@
drawer-navigation {
// @include navigation(800);
width: 100%; height: 5rem;
display: inline-flex;
flex: 1;
font-size: inherit;
justify-content: center;
position: relative;
z-index: 10;
}
drawer-navigation-helper { // This is to make mouse movement forgiving
width: 0; height: 0;
top: 3rem; left: -5rem;
border-left: 8rem solid transparent;
border-right: 8rem solid transparent;
border-bottom: 5rem solid transparent;
position: absolute;
}
drawer-section {
&:not(:last-of-type) {
padding-right: 1rem;
}
padding-right: 1rem;
padding-left: 1rem;
&:not(:hover) {
drawer-title::after {
background-color: transparent;
}
drawer-navigation-helper,
drawer-wrap {
display: none;
}
}
&:hover {
z-index: 3;
drawer-title::after {
background-color: $lbry-teal-4;
}
@ -37,6 +50,7 @@ drawer-title {
display: flex;
line-height: 3;
position: relative;
z-index: 1;
&::after {
width: 100%; height: 1px;