bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improved my folders display on header

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2020-11-20 10:39:19 +01:00
parent ce31859bb6
commit ffc4a88094
6 changed files with 172 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@@ -1179,6 +1179,14 @@ main[role="main"] {
main[role="main"] > .wrapper {
width: 100vw; }
@keyframes rotating {
from {
transform: rotate(0deg);
transform-origin: center; }
to {
transform: rotate(360deg);
transform-origin: center; } }
body {
font-size: 16px;
font-family: "Ubuntu",Arial,"MS Trebuchet",sans-serif;
@@ -1271,23 +1279,26 @@ header[role="banner"] {
position: relative; }
header[role="banner"] #user-flags h2 {
cursor: pointer; }
header[role="banner"] #user-flags h2:before {
padding-right: 0.2em; }
header[role="banner"] #user-flags ul {
position: absolute;
width: 8em;
left: 0;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
padding: 0.3em 0.3em 0.5em;
opacity: 0;
overflow: hidden;
width: 11em;
max-height: 1px;
transition: opacity,max-height 0.3s ease-in-out;
overflow: hidden; }
padding: 0.01em 1em;
box-sizing: content-box;
transition: all 0.4s ease-in-out;
transition-delay: 2s;
position: absolute;
right: 0;
top: 1.7em;
box-sizing: content-box; }
header[role="banner"] #user-flags:hover ul {
opacity: 1;
max-height: 100px;
transition: opacity,max-height 0.2s ease-in-out; }
transition-delay: 0s;
max-height: 12em;
padding: 1em 1em;
box-shadow: 0 0 10px #ccc; }
header[role="banner"] #user-flags li {
width: 100%;
display: flex;
@@ -1302,17 +1313,32 @@ header[role="banner"] {
opacity: 0;
transition: opacity 0.3s ease-in-out;
padding-left: 0.5em; }
header[role="banner"] #user-flags li div.actions span.mdi {
cursor: pointer;
color: #4e4d4d; }
header[role="banner"] #user-flags li div.actions span.delete-btn.loading:before {
animation: rotating 2s linear infinite; }
header[role="banner"] #user-flags li:hover div.actions {
opacity: 1; }
header[role="banner"] #user-flags li input {
border: 1px solid #bbb;
border-radius: 5px;
width: calc(100% - 2em);
font-size: 0.8em; }
header[role="banner"] #user-flags li span.mdi-plus-box,
header[role="banner"] #user-flags li span.mdi-trash-can-outline {
cursor: pointer;
color: #4e4d4d; }
header[role="banner"] #user-flags li.create-flag {
margin-top: 0.2em; }
header[role="banner"] #user-flags li.create-flag input {
align-self: flex-end;
border: 1px solid #bbb;
border-radius: 5px;
width: calc(100% - 2em);
font-size: 0.8em; }
header[role="banner"] #user-flags li.create-flag span.add-btn {
align-self: flex-end;
color: #bbb;
font-size: 1em;
padding: 0 0 0 .5em;
transition: all 0.2s ease-in-out; }
header[role="banner"] #user-flags li.create-flag span.add-btn.active {
cursor: pointer;
color: #1a1a1a; }
header[role="banner"] #user-flags li.create-flag span.add-btn.loading:before {
animation: rotating 2s linear infinite; }
header[role="banner"] #block-header {
margin-right: 1em;
padding-left: 1em;

6
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

11
web/themes/custom/materiotheme/assets/styles/base/_animations.scss Normal file
View File

@@ -0,0 +1,11 @@
@keyframes rotating {
from {
transform: rotate(0deg);
transform-origin: center;
}
to {
transform: rotate(360deg);
transform-origin: center;
}
}

71
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@@ -11,8 +11,7 @@
@import './base/colors';
@import './base/grid';
@import './base/layout';
// $mdi-font-path: "./mdi/fonts";
// @import './mdi/scss/materialdesignicons.scss';
@import './base/animations';
@import './base/fonts';
@@ -156,26 +155,30 @@ header[role="banner"]{
h2{
@extend %header-fs;
cursor: pointer;
&:before{padding-right: 0.2em;}
}
ul{
position: absolute;
width:8em;
left:0;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
padding:0.3em 0.3em 0.5em;
opacity:0;
max-height:1px;
transition: opacity,max-height 0.3s ease-in-out;
overflow: hidden;
width:11em;
max-height:1px;
padding:0.01em 1em;
// margin:0 0 0 -1em;
box-sizing:content-box;
transition: all 0.4s ease-in-out;
// outline: 1px solid blue;
transition-delay: 2s;
position: absolute;
right:0;
top:1.7em;
box-sizing: content-box;
}
&:hover{
ul{
opacity:1;
max-height:100px;
transition: opacity,max-height 0.2s ease-in-out;
transition-delay: 0s;
max-height:12em;
padding:1em 1em;
box-shadow: 0 0 10px #ccc;
}
}
li{
@@ -196,6 +199,16 @@ header[role="banner"]{
opacity:0;
transition: opacity 0.3s ease-in-out;
padding-left:0.5em;
span.mdi{
cursor: pointer;
color: #4e4d4d;
}
span.delete-btn{
&.loading:before{
animation: rotating 2s linear infinite;
}
}
}
&:hover{
div.actions{
@@ -203,19 +216,29 @@ header[role="banner"]{
}
}
input{
&.create-flag{
margin-top: 0.2em;
input{
align-self: flex-end;
border: 1px solid #bbb;
border-radius:5px;
width: calc(100% - 2em);
font-size:0.8em;
// border: none;
// background-color:rgb(201, 201, 201);
// width:100%;
}
span.mdi-plus-box,
span.mdi-trash-can-outline{
cursor: pointer;
color: #4e4d4d;
}
span.add-btn{
align-self: flex-end;
color: #bbb;
font-size: 1em;
padding: 0 0 0 .5em;
transition: all 0.2s ease-in-out;
&.active{
cursor: pointer;
color:#1a1a1a;
}
&.loading:before{
animation: rotating 2s linear infinite;
}
}
}
}
}