Skip to content

P
purescript-gargantext
Commit a9c140b9 authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski
Browse files
Options

[tree] style fixes for left/right handed

parent 727ea08d
Show whitespace changes
Inline Side-by-side
Showing with 238 additions and 194 deletions
dist/index.html
View file @ a9c140b9
......@@ -20,46 +20,6 @@
<link href="styles/range-slider.css" rel="stylesheet" type="text/css" />
<style>
* {margin: 0; padding: 0; list-style: none;}
.tree ul li {
margin-left: 15px;
position: relative;
padding-left: 5px;
}
#toolbar {display : inline;}
#toolbar ul li {display : inline }
#toolbar ul li form {display : inline}
.tree { margin-top : 20px;}
.tree ul li::before {
content: " ";
position: absolute;
width: 1px;
background-color: #000;
top: 5px;
bottom: -12px;
left: -10px;
}
body > .tree ul > li:first-child::before {top: 12px;}
.tree ul li:not(:first-child):last-child::before {display: none;}
.tree ul li:only-child::before {
display: list-item;
content: " ";
position: absolute;
width: 1px;
background-color: "#000";
top: 5px;
bottom: 7px;
height: 7px;
left: -10px;
}
.tree ul li::after {
content: " ";
position: absolute;
left: -10px;
width: 10px;
height: 1px;
background-color: "#000";
top: 12px;
}
</style>
</head>
<body>
......
dist/styles/Login.css
View file @ a9c140b9
......@@ -32,9 +32,16 @@
color: white;
}
#toolbar {
display: inline;
}
#toolbar ul li {
display: inline;
margin-right: 19px;
}
#toolbar ul li form {
display: inline;
}
#horizontal-checkbox ul li {
display: inline;
......@@ -110,26 +117,6 @@ li#rename #rename-a {
min-width: 200px;
}
li .leaf {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
li .leaf .folder-icon {
padding: 0 2 0 2;
}
li .leaf a.settings {
cursor: pointer;
display: block;
padding: 0 2 0 2;
text-decoration: none;
visibility: hidden;
z-index: 1;
}
li .leaf:hover a.settings {
visibility: visible;
}
.glyphitem {
top: 0;
display: inline-block;
......
dist/styles/Login.sass
View file @ a9c140b9
......@@ -26,9 +26,13 @@
#toolbar
display: inline
ul
li
display: inline
margin-right : 19px
form
display: inline
#horizontal-checkbox
ul
......@@ -101,28 +105,6 @@ li#rename
select
min-width: 200px
li
.leaf
display: flex
flex-direction: row
justify-content: flex-start
.folder-icon
padding: 0 2 0 2
a.settings
cursor: pointer
display: block
padding: 0 2 0 2
text-decoration: none
visibility: hidden
z-index: 1
&:hover
a.settings
visibility: visible
.glyphitem
top: 0
display: inline-block
......
dist/styles/Tree.css
View file @ a9c140b9
body > .tree ul > li:first-child::before {
top: 12px;
}
li .leaf {
display: flex;
flex-direction: row;
}
li .leaf .folder-icon {
padding: 0 2 0 2;
}
li .leaf a.settings {
cursor: pointer;
display: block;
padding: 0 2 0 2;
text-decoration: none;
visibility: hidden;
z-index: 1;
}
li .leaf:hover a.settings {
visibility: visible;
}
.tree {
margin-top: 10px;
margin-top: 20px;
}
.tree ul li {
position: relative;
}
.tree ul li::after {
content: " ";
height: 1px;
position: absolute;
top: 12px;
}
.tree ul li::before {
bottom: -12px;
content: " ";
position: absolute;
top: 5px;
}
.tree ul li:not(:first-child):last-child::before {
display: none;
}
.tree ul li:only-child::before {
bottom: 7px;
content: " ";
display: list-item;
position: absolute;
width: 1px;
top: 5px;
}
.tree .lefthanded ul {
margin-right: 19px;
}
.tree .lefthanded ul li {
margin-right: 15px;
padding-right: 5px;
}
.tree .lefthanded ul li::after {
background-color: #000;
right: -10px;
width: 10px;
}
.tree .lefthanded ul li::before {
background-color: #000;
right: -10px;
width: 1px;
}
.tree .lefthanded ul li .leaf {
justify-content: flex-end;
}
.tree .righthanded ul {
margin-left: 19px;
}
.tree .righthanded ul li {
margin-left: 15px;
padding-left: 5px;
}
.tree .righthanded ul li::after {
background-color: #000;
left: -10px;
width: 10px;
}
.tree .righthanded ul li::before {
background-color: #000;
left: -10px;
width: 1px;
}
.tree .righthanded ul li:only::before {
background-color: #000;
right: 10px;
}
.tree .righthanded ul li .leaf {
justify-content: flex-start;
}
.tree .file-dropped {
background-color: #d8dfe5;
......@@ -20,15 +113,6 @@
color: blue;
text-decoration: underline;
}
.tree .lefthanded ul {
margin-right: 19px;
}
.tree .lefthanded li .leaf {
justify-content: flex-end;
}
.tree .righthanded li .leaf {
justify-content: flex-start;
}
.progress-pie {
background: rgba(51, 122, 183, 0.1);
......
dist/styles/Tree.sass
View file @ a9c140b9
body > .tree ul > li:first-child::before
top: 12px
li
.leaf
display: flex
flex-direction: row
.folder-icon
padding: 0 2 0 2
a.settings
cursor: pointer
display: block
padding: 0 2 0 2
text-decoration: none
visibility: hidden
z-index: 1
&:hover
a.settings
visibility: visible
.tree
margin-top: 10px
margin-top: 20px
ul
li
position: relative
&::after
content: " "
height: 1px
position: absolute
top: 12px
&::before
bottom: -12px
content: " "
position: absolute
top: 5px
&:not(:first-child):last-child::before
display: none
&:only-child::before
bottom: 7px
content: " "
display: list-item
//height: 7px
position: absolute
width: 1px
top: 5px
.lefthanded
ul
margin-right : 19px
li
margin-right: 15px
padding-right: 5px
&::after
background-color: #000
right: -10px
width: 10px
&::before
background-color: #000
right: -10px
width: 1px
&:only-child::before
//right: 1px
.leaf
justify-content : flex-end
.righthanded
ul
margin-left : 19px
li
margin-left: 15px
padding-left: 5px
&::after
background-color: #000
left: -10px
width: 10px
&::before
background-color: #000
left: -10px
width: 1px
&:only::before
background-color: #000
right: 10px
.leaf
justify-content : flex-start
.file-dropped
background-color: #d8dfe5
.node-actions
......@@ -15,17 +97,6 @@
.text
color: blue
text-decoration: underline
.lefthanded
ul
margin-right : 19px
li
.leaf
justify-content : flex-end
.righthanded
li
.leaf
justify-content : flex-start
// based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e
.progress-pie
......
src/index.html
View file @ a9c140b9
......@@ -20,46 +20,6 @@
<link href="styles/range-slider.css" rel="stylesheet" type="text/css" />
<style>
* {margin: 0; padding: 0; list-style: none;}
.tree ul li {
margin-left: 15px;
position: relative;
padding-left: 5px;
}
#toolbar {display : inline;}
#toolbar ul li {display : inline }
#toolbar ul li form {display : inline}
.tree { margin-top : 20px;}
.tree ul li::before {
content: " ";
position: absolute;
width: 1px;
background-color: #000;
top: 5px;
bottom: -12px;
left: -10px;
}
body > .tree ul > li:first-child::before {top: 12px;}
.tree ul li:not(:first-child):last-child::before {display: none;}
.tree ul li:only-child::before {
display: list-item;
content: " ";
position: absolute;
width: 1px;
background-color: "#000";
top: 5px;
bottom: 7px;
height: 7px;
left: -10px;
}
.tree ul li::after {
content: " ";
position: absolute;
left: -10px;
width: 10px;
height: 1px;
background-color: "#000";
top: 12px;
}
</style>
</head>
<body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment