WebDev/spacedeck-open
1
0
Fork 0
Code Issues Pull Requests 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

10
styles/artifact.scss
View File

@@ -26,12 +26,12 @@
}
}
/*&.artifact-text.text-blank [contentEditable=true]:not(.text-editing) p:first-child::after {
&.artifact-text.text-blank [contentEditable=true]:not(.text-editing) p:first-child::after {
content: "Double click to edit";
opacity: 0.25;
}
&.artifact-text.text-blank [contentEditable=true].text-editing p:first-child::after {
/*&.artifact-text.text-blank [contentEditable=true].text-editing p:first-child::after {
content: "Type here";
opacity: 0.25;
}*/
@@ -469,7 +469,7 @@
color: black;
//@include user-select(none);
white-space: normal;
font-size: 18px;
font-size: 36px;
&.artifact-zone {
border: 1px solid rgba(46,204,113,1);
@@ -553,6 +553,10 @@ body:not(.present-mode) {
cursor: grab !important;
}
.tool-note {
cursor: crosshair !important;
}
.artifact.state-idle {
.progress, .progress-text {
display: none;

86
styles/button.scss
View File

@@ -7,12 +7,6 @@
.btn-group.colors {
.btn {
// padding: 4px;
// background-clip: content-box;
// padding-right: 2px;
// &:last-child {
// padding-right: 4px;
// }
box-shadow: inset 0 0 30px 0px rgba(40,40,40,0.1);
}
}
@@ -64,7 +58,7 @@
backface-visibility: hidden;
cursor: pointer;
background-color: $light;
color: $medium;;
color: $black;
@include user-select(none);
&:last-child {border: none;}
@@ -82,12 +76,9 @@
&.btn-link {
background-color: transparent;
color: $medium;;
color: $medium;
}
&.facebook {background-color: $facebook !important; color: white !important;}
&.twitter {background-color: $twitter !important; color: white !important; }
&.btn-round {
border-radius: 100px !important;
}
@@ -96,21 +87,10 @@
border-radius: 6px !important;
}
// &.close {
// position: absolute;
// top: 15px;
// right: 15px;
// z-index: 4000;
// font-size: 40px;
// }
&.btn-nude {
min-width: 0 !important;
// font-size: inherit !important;
padding: 0 !important;
// height: auto !important;
background-color: transparent;
color: $medium;
}
&.btn-nude + .btn-nude {
@@ -123,7 +103,7 @@
&.btn-stroke {
box-shadow: inset 0 0 0 1px $dark;
color: $dark !important;
color: $black;
background-color: transparent;
&:active {
box-shadow: inset 0 0 0 1px white;
@@ -132,9 +112,8 @@
}
&.btn-stroke-darken {
//box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
border: 1px solid rgba(0,0,0,0.1);
color: $medium;
border: 1px solid $black;
color: $black;
background-color: transparent;
&:active {
//box-shadow: inset 0 0 0 1px $dark;
@@ -263,9 +242,18 @@
&.btn-transparent {
background-color: transparent;
color: $medium;
&.active {color: $darker !important; }
&.open {color: white !important; }
color: $dark;
&.active {
//color: $black !important;
color: $white;
background-color: $black;
}
&.open {
//color: $black !important;
color: $white;
background-color: $black;
border-radius: 0;
}
}
&.btn-transparent-medium {
@@ -714,7 +702,6 @@
}
> * {
border-radius: 0 !important;
background-clip: padding-box;
width: 100%;
float: left;
@@ -775,7 +762,7 @@
}
}
.btn-group {
@include scale(0,0);
//@include scale(0,0);
//@include transition( all 0.1s 0s ease-in-out);
position: absolute;
@@ -787,7 +774,7 @@
margin-left: -12px;
.btn {
@include scale(0,0);
//@include scale(0,0);
//@include transition( all 0.1s 0.05s ease-in-out);
@@ -979,31 +966,7 @@
}
}
.btn-group.bottom-left > .btn {
border-radius: 0px;
&:first-child{
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
&.last,
&:last-child{
border-top-right-radius: 3px;
border-bottom-right-radius: 0px;
}
}
.btn-xyz {
position: relative;
display: inline-block;
line-height: 0px;
padding: 0px;
font-size: 0px;
vertical-align: middle;
white-space: nowrap;
@include clearfix;
min-height: 44px;
}
// !btn-group
.btn-group {
position: relative;
@@ -1014,13 +977,16 @@
vertical-align: middle;
white-space: nowrap;
border: 1px solid $dark;
border-radius: 5px;
&.dark {
border-radius: $radius;
background-color: $dark;
color: $lighter;
color: $white;
.btn {
color: $lighter;
color: $white;
}
}
@@ -1159,4 +1125,4 @@
margin: 4px;
z-index: 100;
border-radius: 50px;
}
}

8
styles/dialog.scss
View File

@@ -125,8 +125,10 @@
@include transition( all 0.125s ease-in-out);
pointer-events: none;
background-color: $light;
color: $medium;
&.dark {background-color: $dark; }
color: $dark;
&.dark {
background-color: $dark;
}
border-radius: $radius*3;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1);
@@ -228,4 +230,4 @@
h4 .icon {
height: 38px;
}
}
}

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;
}
}
}*/
}

3
styles/form-checkbox.scss
View File

@@ -28,7 +28,6 @@
line-height: 1.5;
width: 100%;
text-align: left;
color: $medium;
font-weight: normal;
cursor: pointer;
border-radius: $radius;
@@ -139,4 +138,4 @@
display: inline-block !important;
width: auto !important;
padding-right: 15px !important;
}
}

14
styles/form-select.scss
View File

@@ -2,24 +2,14 @@
@import "mixins";
.input-select {
// background-color: rgba(255,255,255,0.04);
// background-image: url('images/select_arrow.gif');
background-color: rgba(255,255,255,0.04);
background-image: url('images/select_arrow.gif');
border-radius: $radius;
display: inline-block;
width: 100%;
}
@-moz-document url-prefix() {
select.input{
background-repeat: no-repeat;
background-position: right center;
cursor: pointer;
}
}
select {
-webkit-appearance:none;
// -moz-appearance:window;
appearance:none;
padding-left: 0px;
width: 100%;

17
styles/form.scss
View File

@@ -113,43 +113,26 @@ select {
&.input-white {
background-color: white;
color: $medium;
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.05), inset 0 0px 4px rgba(0, 0, 0, 0.1);
}
&.input-light {
background-color: $light;
color: $medium;
}
&.input-dark {
background-color: $darker;
color: $medium;
}
&.input-lighten {
background-color: rgba(255,255,255,0.05);
color: $medium !important;
}
&.input-darken {
background-color: rgba(0,0,0,0.05);
color: $medium;
}
&.input-transparent {
background-color: transparent;
color: $medium;
}
// &:focus {color: white; }
&:invalid {
// background-color: rgba(198,101,84,0.05);
// color: rgba(198,101,84,0.75)
&:after {
}
}
@include input-focus();

41
styles/handles.scss
View File

@@ -69,26 +69,27 @@
}
.handles {
// background-color: rgba(40,140,215,0.45);
border: 1px solid rgba(255,255,255,0.5);
//border: 1px solid rgba(255,255,255,0.5);
position: absolute;
left: 0;
top: 0;
bottom: 0;
bottom: -1;
right: 0;
z-index: 800;
pointer-events: none;
background: rgba(255,255,255,0.1);
&:after{
border: 1px dotted rgba(40,140,215,1);
border: 4px dotted #000000;
content: "";
display: block;
position: absolute;
height: auto;
width: auto;
top: -1px;
left: -1px;
right: -1px;
top: 0px;
left: 0px;
right: 0px;
bottom: -1px;
}
}
@@ -97,7 +98,7 @@
border: 8px solid rgba(255,255,255,0.5);
&:after{
border: 8px dotted rgba(40,140,215,1);
border: 8px dotted #000000;
top: -4px;
left: -4px;
right: -4px;
@@ -332,16 +333,15 @@
pointer-events:auto;
z-index: 2000;
position: absolute;
width: 30px !important;
height: 30px !important;
border-radius: 100%;
margin: -15px;
border: 1px solid rgba(0,0,0,0.25);
border: 1px solid black;
margin: -5px;
padding: 4px;
&:hover {
background-color: rgba(255,255,255,0.5);
cursor: move;
background-color: black;
cursor: move;
}
}
@@ -428,15 +428,8 @@
border-style: solid;
border-width: 10px;
border-color: transparent;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all .05s ease-in-out;
-moz-transition: all .05s ease-in-out;
-ms-transition: all .05s ease-in-out;
-o-transition: all .05s ease-in-out;
transition: all .05s ease-in-out;
background-clip: padding-box;
transition: all .05s ease-in-out;
}
div {

7
styles/header.scss
View File

@@ -31,17 +31,14 @@
}
.header-left {
@include transform-origin(center left);
left: 0;
padding-left: 10px;
}
.header-right {
@include transform-origin(center right);
.header-right {
right: 0;
padding-right: 10px;
padding-right: 20px;
}
.header-center {
@include transform-origin(center center);
width: 100%;
left: 0;
right: 0;

1
styles/main.scss
View File

@@ -2,7 +2,6 @@
@import "mixins";
.wrapper {
//@include transition( all 0.25s ease-in-out);
position: relative;
margin: auto;
max-width: 1160px;

9
styles/modal.scss
View File

@@ -59,9 +59,9 @@
}
.close {
position: fixed;
margin: 44px 44px;
.icon {display: block; }
margin-left: 44px;
margin-bottom: 44px;
.icon {display: block; }
}
figure {
@@ -146,7 +146,6 @@
.modal-header {
padding: 30px 40px;
position: relative;
color: $medium;
}
.close-search {
@@ -300,4 +299,4 @@
// .btn-block + .btn-block {
// margin-left: 0;
// }
}
}

14
styles/normalize.scss vendored
View File

@@ -1,17 +1,5 @@
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
//
// 1. Set default font family to sans-serif.
// 2. Prevent iOS text size adjust after orientation change, without disabling
// user zoom.
//
html {
font-family: sans-serif; // 1
-ms-text-size-adjust: 100%; // 2
-webkit-text-size-adjust: 100%; // 2
}
//
// Remove default margin.
//
@@ -420,4 +408,4 @@ table {
td,
th {
padding: 0;
}
}

39
styles/space-sections.scss
View File

@@ -118,7 +118,7 @@
padding: 0 !important;
.wrapper {
border: 1px dotted rgba(128,128,128,0.5);
border: 4px solid black;
transition-duration: 0.25s;
transition-property: width, height, background-color;
@@ -132,32 +132,27 @@
max-height: 100%;
position: relative;
overflow: scroll;
/** {
-moz-user-select: none !important; // firefox has selection problems
}*/
}
.snap-ruler-h {
pointer-events: none;
position: fixed;
z-index: 0;
z-index: 2000;
right: 0px;
height: 1px;
background-color: rgba(0,0,0,0.5);
background-color: black;
left: 0px;
}
.snap-ruler-v {
pointer-events: none;
position: fixed;
z-index: 0;
z-index: 2000;
top: 0px;
bottom: 0px;
width: 1px;
background-color: rgba(0,0,0,0.5);
background-color: black;
}
.cursor {
@@ -227,30 +222,12 @@
}
#space {
/*-webkit-user-select: all;
-ms-user-select: all;
-moz-user-select: all;
user-select: all;*/
// user-select: all;
position: relative;
height: 100% !important;
//padding-top: 64px !important;
background-color: #eee;
}
#made-with {
position: fixed;
width: 100%;
bottom: 0;
padding: 12px;
opacity: 0.25;
a {color: $dark; }
p {
text-align: center;
font-size: 11px;
}
}
#baseline {
position: absolute;
width: 100%;
@@ -298,8 +275,8 @@
.space-bounds {
position: absolute;
left: 0px;
top: 0px;
left: 0;
top: 0;
pointer-events: none;
background-size: cover;
background-repeat: no-repeat;

51
styles/style.scss
View File

@@ -65,10 +65,8 @@
html,
body {
height:100%;
-webkit-tap-highlight-color: transparent;
background-color: white;
background-color: $light;
color: $darker;
color: $black;
}
*[contenteditable="true"] {
@@ -89,60 +87,21 @@ body {
cursor: default;
}
#home {
background-color: white;
}
.img img {
max-width: 100%;
height: auto;
}
.plan {
color: $medium;
border-radius: $radius;
display: inline-block;
padding: 30px;
background-color: transparent;
border: 2px solid rgba(0,0,0,0.05);
width: 100%;
&.active {
background-color: white;
border: none;
}
h4 {
color: black;
margin-bottom: 0px;
}
p {
font-size: 13px;
line-height: 1.4;
margin-top: 5px;
margin-bottom: 5px;
}
ul {
list-style: none;
font-size: 10px;
margin: 0px;
padding: 0px;
border-top: 2px solid rgba(0,0,0,0.05);
padding-top: 20px;
margin-top: 20px;
margin-bottom: 20px;
li {padding-top: 2px; }
}
}
#startup {
background-position: center;
background-image:url(/images/diamond.svg);
background-repeat: no-repeat;
}
#home {
background-color: white;
}
.layer {
@include transition( all 0.2s ease-in-out);

5
styles/table.scss
View File

@@ -8,10 +8,9 @@
}
.table {
width: 100%;
color: $medium;;
font-family: $main-font;
// border-radius: $radius;
// border: 2px solid rgba(0,0,0,0.0125) !important;
border-radius: $radius;
border: 2px solid rgba(0,0,0,0.0125);
}
.table thead > tr > th:first-child,

54
styles/toolbar.scss
View File

@@ -19,50 +19,19 @@
}
margin: auto;
//text-align: center;
position: fixed;
bottom: 0px;
//width: 100%;
top: 10px;
z-index: 3000;
padding: $gutter-b;
padding: 0;
font-size: 0;
line-height: 0;
transition-duration: 0.15s;
transition-timing-function: ease-in-out;
transition-delay: initial;
transition-property: opacity, transform;
@include backface-visibility(hidden);
// FIXME questionable?
@include translate3d(0, 10px, 0);
pointer-events: none !important;
opacity: 0;
&.out {
@include translate3d(0, 10px, 0);
* {pointer-events: none !important; }
button, input, .dialog {
display: none;
}
}
&.in {
@include translate3d(0, 0, 0);
&.out {
@include translate3d(0, 10px, 0);
* {pointer-events: none !important; }
}
}
> * {
margin: 0 2px;
margin-top: 4px;
pointer-events: auto !important;
&.out {
margin: 0;
opacity: 0;
}
}
&.toolbar-vertical {
@@ -187,7 +156,6 @@
}
.toolbar-properties {
bottom: 64px;
z-index: 0;
&.in {
@@ -196,12 +164,12 @@
.icon-sm {
z-index: 110;
background-color: #222;
//background-color: #222;
border-radius: 50px;
}
.jewel {
border: 2px solid rgba(255,255,255,0.5);
border: 2px solid #888;
background-color: transparent;
color: #989898;
width: 36px;
@@ -228,5 +196,15 @@
.toolbar-elements > .btn-group,
.toolbar-properties > .btn-group {
box-shadow: 0 0 30px rgba(0,0,0,0.5);
//box-shadow: 0 0 30px rgba(0,0,0,0.5);
background-color: $white;
}
.toolbar-elements {
left: 10px;
}
.toolbar-properties {
right: 20px;
}

10
styles/tools.scss
View File

@@ -33,10 +33,7 @@
@include translate3d(0, 0, 0);
// @include backface-visibility(hidden);
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
perspective: 1000;
.panel-toggles {
@include transition( all 0.15s ease-in-out);
@@ -99,10 +96,7 @@
display: table-cell;
vertical-align: middle;
// @include backface-visibility(hidden);
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
perspective: 1000;
z-index: 1000;

20
styles/vars.scss
View File

@@ -9,13 +9,6 @@ $green: #2ecc71;
$red: #ff5955;
$yellow: #f1c40f;
$light: #f5f5f5;
$lightish: #eee;
$facebook: #3e5b97;
$twitter: #2aa7de;
$color-1 : #4a2f7e; // purple
$color-2 : #9b59b6; // lilac
$color-3 : #3498db; // blue
@@ -32,15 +25,18 @@ $black: #111; // black
$darker: #292929;
$dark: #222; // dark
$medium: #888; // medium
$light: #f5f5f5;
$lightish: #eee; // fixme
$lighter: #989898;
$white: #ffffff;
$sidebar-width: 280px;
$main-font: Avenir W01;
$sec-font: Avenir W01;
$main-font: Inter;
$sec-font: Inter;
$font-size: 18px;
$line-height: 24px;
$font-size: 12pt;
$line-height: 1.5em;
$gutter-a: 10px;
$gutter-b: 20px;
@@ -48,4 +44,4 @@ $gutter-c: 40px;
$gutter-d: 60px;
$gutter-e: 80px;
$folder-gutter: 20px;
$folder-gutter: 20px;