mirror/spacedeck-open
1
0
Fork 0
mirror of https://github.com/spacedeck/spacedeck-open.git synced 2025-12-16 01:47:30 +01:00
Code Issues Projects Releases Wiki Activity

WIP MNT design/UX cleanup

Browse Source
This commit is contained in:
mntmn
2020-04-07 20:37:41 +02:00
parent d19d02220e
commit 58250a72ad
36 changed files with 485 additions and 1030 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
styles/dropdown.scss
View File

@@ -43,9 +43,6 @@ $predelay: 0;
&.hover:hover,
&.open {
// &:before {opacity: 0.125; }
// pointer-events: auto;
background-color: $dark;
background-color: $light;
> * {
@@ -111,8 +108,8 @@ $predelay: 0;
}
&:last-child > .btn{
border-top-right-radius: $radius ;
border-bottom-right-radius: $radius ;
border-top-right-radius: $radius;
border-bottom-right-radius: $radius;
}
}
}
@@ -143,8 +140,7 @@ $predelay: 0;
&.light > .dropdown-menu,
&.light > .dialog {
background: $light;
color: $medium;
background: white;
}
> .dropdown-menu {
@@ -189,8 +185,6 @@ $predelay: 0;
}
}
&.hover:hover > .dialog,
&.hover:hover > .dropdown-menu,
@@ -206,9 +200,7 @@ $predelay: 0;
&.open {
> .dialog,
> .dropdown-menu {
-webkit-transform: translate3d(-50%, -50%, 100px) scale(1);
-ms-transform: translate3d(-50%, -50%, 100px) scale(1);
transform: translate3d(-50%, -50%, 100px) scale(1);
//transform: translate3d(-50%, -50%, 100px) scale(1);
}
}
@@ -217,10 +209,8 @@ $predelay: 0;
left: 50%;
top: 50%;
margin-top: 0px;
@include transform-origin(center center);
-webkit-transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8);
-ms-transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8);
transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8);
//@include transform-origin(center center);
//transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8);
}
}
@@ -230,10 +220,8 @@ $predelay: 0;
top: auto;
bottom: 100%;
margin-bottom: 16px;
@include transform-origin(bottom left);
-webkit-transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8);
-ms-transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8);
transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8);
//@include transform-origin(bottom left);
//transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8);
}
}
@@ -243,10 +231,8 @@ $predelay: 0;
top: auto;
bottom: 100%;
margin-bottom: 16px;
@include transform-origin(bottom center);
-webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
-ms-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
//@include transform-origin(bottom center);
//transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
}
}
@@ -257,33 +243,37 @@ $predelay: 0;
top: 100%;
bottom: auto;
margin-top: -16px;
@include transform-origin(top center);
-webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
-ms-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
//@include transform-origin(top center);
//transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
}
}
&.top.left {
> .dialog,
> .dropdown-menu {
left: 70px;
margin-top: -60px;
}
}
&.top.right {
> .dialog,
> .dropdown-menu {
top: 100%;
bottom: auto;
left: auto;
right: 0;
margin-top: 16px;
@include transform-origin(top right);
-webkit-transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
-ms-transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
right: 70px;
margin-top: -60px;
//@include transform-origin(top right);
//transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
}
&.hover:hover,
&.open {
> .dialog,
> .dropdown-menu {
-webkit-transform: translate3d(0%, 0%, 100px) scale(1);
-ms-transform: translate3d(0%, 0%, 100px) scale(1);
transform: translate3d(0%, 0%, 100px) scale(1);
//transform: translate3d(0%, 0%, 100px) scale(1);
}
}
@@ -312,9 +302,7 @@ $predelay: 0;
> .dialog,
> .dropdown-menu {
-webkit-transform: translate3d(-50%, 0%, 100px) scale(1);
-ms-transform: translate3d(-50%, 0%, 100px) scale(1);
transform: translate3d(-50%, 0%, 100px) scale(1);
//transform: translate3d(-50%, 0%, 100px) scale(1);
}
}
}
@@ -324,9 +312,7 @@ $predelay: 0;
&.open {
> .dialog,
> .dropdown-menu {
-webkit-transform: translate3d(-33%, 0%, 100px) scale(1) !important;
-ms-transform: translate3d(-33%, 0%, 100px) scale(1) !important;
transform: translate3d(-33%, 0%, 100px) scale(1) !important;
//transform: translate3d(-33%, 0%, 100px) scale(1) !important;
}
}
}
@@ -334,7 +320,7 @@ $predelay: 0;
.dropdown {
&.options-3 {
/*&.options-3 {
&.option-1:after { margin-left: -68px;}
&.option-2:after { margin-left: -8px;}
&.option-3:after { margin-left: 52px;}
@@ -348,8 +334,9 @@ $predelay: 0;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}*/
/*
&:after {
@include transition( all 0.1s ease-in-out 0s);
content: "";
@@ -362,26 +349,24 @@ $predelay: 0;
margin-left: -8px;
pointer-events: none !important;
left: 50%;
-webkit-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0);
//transform: scale(0,0);
}
&.bottom:after, &.bottomleft:after {
@include transform-origin(bottom center);
//@include transform-origin(bottom center);
bottom: 100%;
border-bottom: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #303030;
border-left: 8px solid transparent;
}
&.top:after {
*/
/*&.top:after {
@include transform-origin(top center);
top: 100%;
border-bottom: 8px solid #303030;
border-right: 8px solid transparent;
border-top: 8px solid transparent;
border-left: 8px solid transparent;
}
}
}*/
}