Skip to content
GitLab
Commit 58250a72 authored by mntmn's avatar mntmn
Browse files

WIP MNT design/UX cleanup

parent d19d0222
Hide whitespace changes
Inline Side-by-side
.gitignore
View file @ 58250a72
node_modules node_modules
javascripts/maps javascripts/maps
javascripts/spacedeck.js javascripts/spacedeck.js
public/stylesheets/*.css
database.sqlite
*.swp *.swp
*~ *~
public/javascripts/spacedeck_sections.js
View file @ 58250a72
...@@ -63,8 +63,8 @@ var SpacedeckSections = { ...@@ -63,8 +63,8 @@ var SpacedeckSections = {
active_style: { active_style: {
border_radius: 0, border_radius: 0,
stroke: 0, stroke: 0,
font_family: "Avenir W01", font_family: "Inter",
font_size: 18, font_size: 36,
line_height: 1.5, line_height: 1.5,
letter_spacing: 0, letter_spacing: 0,
...@@ -136,18 +136,8 @@ var SpacedeckSections = { ...@@ -136,18 +136,8 @@ var SpacedeckSections = {
], ],
fonts: [ fonts: [
"Arial", "Inter",
"Courier", "Courier"
"Georgia",
"Verdana",
"Comic Sans MS",
"Montserrat",
"Lato",
"Roboto",
"Crimson Text",
"EB Garamond",
"Vollkorn",
"Avenir W01"
], ],
detected_text_formats: {}, detected_text_formats: {},
...@@ -180,7 +170,7 @@ var SpacedeckSections = { ...@@ -180,7 +170,7 @@ var SpacedeckSections = {
toolbar_props_in: false, toolbar_props_in: false,
toolbar_artifacts_x: "-1000px", toolbar_artifacts_x: "-1000px",
toolbar_artifacts_y: "-1000px", toolbar_artifacts_y: "-1000px",
toolbar_artifacts_in: false toolbar_artifacts_in: true
}, },
methods: { methods: {
...@@ -1057,7 +1047,7 @@ var SpacedeckSections = { ...@@ -1057,7 +1047,7 @@ var SpacedeckSections = {
this.toolbar_props_x = pp.x+"px"; this.toolbar_props_x = pp.x+"px";
this.toolbar_props_y = pp.y+"px"; this.toolbar_props_y = pp.y+"px";
this.hide_toolbar_artifacts(); //this.hide_toolbar_artifacts();
} }
this.selection_metrics.x1 = sr.x1; this.selection_metrics.x1 = sr.x1;
...@@ -1125,9 +1115,12 @@ var SpacedeckSections = { ...@@ -1125,9 +1115,12 @@ var SpacedeckSections = {
var er = this.enclosing_rect(this.active_space_artifacts); var er = this.enclosing_rect(this.active_space_artifacts);
if (!er) return; if (!er) return;
this.active_space.width =Math.max(er.x2+100, window.innerWidth); // resize space
this.active_space.height=Math.max(er.y2+100, window.innerHeight); this.active_space.width =Math.max((parseInt(er.x2/window.innerWidth)+2)*window.innerWidth, window.innerWidth);
this.active_space.height=Math.max((parseInt(er.y2/window.innerHeight)+2)*window.innerHeight, window.innerHeight);
console.log("bounds: ",this.active_space.width,this.active_space.height);
if (this._last_bounds_width != this.active_space.width || if (this._last_bounds_width != this.active_space.width ||
this._last_bounds_height != this.active_space.height) { this._last_bounds_height != this.active_space.height) {
this._last_bounds_width = this.active_space.width; this._last_bounds_width = this.active_space.width;
...@@ -1544,7 +1537,7 @@ var SpacedeckSections = { ...@@ -1544,7 +1537,7 @@ var SpacedeckSections = {
add_artifact: function (space, item_type, url, evt) { add_artifact: function (space, item_type, url, evt) {
this.active_tool = "pointer"; this.active_tool = "pointer";
this.mouse_state = "idle"; this.mouse_state = "idle";
this.hide_toolbar_artifacts(); //this.hide_toolbar_artifacts();
if (!url && (item_type == 'image' || item_type == 'video' || item_type == 'embed')) { if (!url && (item_type == 'image' || item_type == 'video' || item_type == 'embed')) {
url = prompt("URL?"); url = prompt("URL?");
...@@ -1788,9 +1781,7 @@ var SpacedeckSections = { ...@@ -1788,9 +1781,7 @@ var SpacedeckSections = {
if (this.active_space_role=="viewer") { if (this.active_space_role=="viewer") {
return false; return false;
} }
this.hide_toolbar_artifacts();
// 1. create placeholder artifact // 1. create placeholder artifact
var w=300,h=150; var w=300,h=150;
var fill="transparent"; var fill="transparent";
...@@ -2578,12 +2569,11 @@ var SpacedeckSections = { ...@@ -2578,12 +2569,11 @@ var SpacedeckSections = {
}, },
hide_toolbar_props: function() { hide_toolbar_props: function() {
this.toolbar_props_in = false; // FIXME test
//this.toolbar_props_in = false;
}, },
show_toolbar_artifacts: function(x,y) { show_toolbar_artifacts: function(x,y) {
this.toolbar_artifacts_x = (x-175)+"px";
this.toolbar_artifacts_y = y+"px";
this.toolbar_artifacts_in = true; this.toolbar_artifacts_in = true;
}, },
...@@ -2593,29 +2583,19 @@ var SpacedeckSections = { ...@@ -2593,29 +2583,19 @@ var SpacedeckSections = {
start_adding_artifact: function(evt) { start_adding_artifact: function(evt) {
evt = fixup_touches(evt); evt = fixup_touches(evt);
// toggle
if (this.toolbar_artifacts_in) {
this.hide_toolbar_artifacts();
return;
}
this.show_toolbar_artifacts(evt.pageX,evt.pageY);
}, },
start_drawing_scribble: function(evt) { start_drawing_scribble: function(evt) {
this.hide_toolbar_artifacts();
this.active_tool = "scribble"; this.active_tool = "scribble";
this.opened_dialog = "none"; this.opened_dialog = "none";
}, },
start_drawing_arrow: function(evt) { start_drawing_arrow: function(evt) {
this.hide_toolbar_artifacts();
this.active_tool = "arrow"; this.active_tool = "arrow";
this.opened_dialog = "none"; this.opened_dialog = "none";
}, },
start_drawing_line: function(evt) { start_drawing_line: function(evt) {
this.hide_toolbar_artifacts();
this.active_tool = "line"; this.active_tool = "line";
this.opened_dialog = "none"; this.opened_dialog = "none";
}, },
......
public/javascripts/spacedeck_spaces.js
View file @ 58250a72
...@@ -273,9 +273,9 @@ var SpacedeckSpaces = { ...@@ -273,9 +273,9 @@ var SpacedeckSpaces = {
this.discover_zones(); this.discover_zones();
//window.setTimeout(function() { window.setTimeout(function() {
// this.zoom_to_fit(); this.zoom_to_fit();
//}.bind(this),10); }.bind(this),10);
if (on_success) { if (on_success) {
on_success(); on_success();
...@@ -876,10 +876,6 @@ var SpacedeckSpaces = { ...@@ -876,10 +876,6 @@ var SpacedeckSpaces = {
}.bind(this)); }.bind(this));
}, },
emojified_comment: function(comment) {
return twemoji.parse(comment);
},
set_folder_sorting: function(key,reverse) { set_folder_sorting: function(key,reverse) {
this.folder_sorting = key; this.folder_sorting = key;
this.folder_reverse = reverse?-1:1; this.folder_reverse = reverse?-1:1;
......
public/javascripts/spacedeck_whiteboard.js
View file @ 58250a72
...@@ -80,10 +80,16 @@ function setup_whiteboard_directives() { ...@@ -80,10 +80,16 @@ function setup_whiteboard_directives() {
evt.stopPropagation(); evt.stopPropagation();
} }
var a = $scope.find_artifact_by_id(evt.currentTarget.id.replace("artifact-",""));
if ($scope.active_tool == "zoom") return; if ($scope.active_tool == "zoom") return;
if (evt.which == 2) {
// middle mouse button
this.handle_mouse_down_space(evt);
return;
}
var a = $scope.find_artifact_by_id(evt.currentTarget.id.replace("artifact-",""));
if ($scope.active_tool == "eyedrop") { if ($scope.active_tool == "eyedrop") {
var arts = $scope.selected_artifacts(); var arts = $scope.selected_artifacts();
if (!$scope.is_selected(a) && arts.length > 0) { if (!$scope.is_selected(a) && arts.length > 0) {
...@@ -196,8 +202,10 @@ function setup_whiteboard_directives() { ...@@ -196,8 +202,10 @@ function setup_whiteboard_directives() {
}, },
handle_mouse_down_space: function(evt) { handle_mouse_down_space: function(evt) {
if (evt.target != evt.currentTarget && !_.include(["wrapper"],evt.target.className)) return; if (evt.which != 2) {
if (evt.target != evt.currentTarget && !_.include(["wrapper"],evt.target.className)) return;
}
var $scope = this.vm.$root; var $scope = this.vm.$root;
$scope.opened_dialog="none"; $scope.opened_dialog="none";
...@@ -214,7 +222,7 @@ function setup_whiteboard_directives() { ...@@ -214,7 +222,7 @@ function setup_whiteboard_directives() {
this.deselect(); this.deselect();
this.mouse_state = "transform"; this.mouse_state = "transform";
$scope.mouse_state = this.mouse_state; $scope.mouse_state = this.mouse_state;
this.start_adding_note(evt); this.start_drawing_note(evt);
return; return;
} else if ($scope.active_tool=="arrow") { } else if ($scope.active_tool=="arrow") {
...@@ -492,6 +500,7 @@ function setup_whiteboard_directives() { ...@@ -492,6 +500,7 @@ function setup_whiteboard_directives() {
if (!xdists[0] || xdists[0][0]>TOL) { if (!xdists[0] || xdists[0][0]>TOL) {
results.snapx = [0,x]; // distance, coordinate results.snapx = [0,x]; // distance, coordinate
} else { } else {
// FIXME snap rulers are broken
//$scope.snap_ruler_x = xdists[0][1]; //$scope.snap_ruler_x = xdists[0][1];
} }
if (!ydists[0] || ydists[0][0]>TOL) { if (!ydists[0] || ydists[0][0]>TOL) {
...@@ -516,6 +525,41 @@ function setup_whiteboard_directives() { ...@@ -516,6 +525,41 @@ function setup_whiteboard_directives() {
return point; return point;
}, },
start_drawing_note: function(evt) {
evt.preventDefault();
evt.stopPropagation();
var $scope = this.vm.$root;
var point = this.cursor_point_to_space(evt);
this.offset_point_in_wrapper(point);
var z = $scope.highest_z()+1;
var a = {
space_id: $scope.active_space._id,
mime: "text/html",
description: "<p>Text</p>",
x: point.x,
y: point.y,
z: z,
w: 64,
h: 64,
align: "center",
valign: "middle",
stroke_color: "#000000",
fill_color: "rgb(241, 196, 15)",
stroke: 0
};
$scope.save_artifact(a, function(saved_a) {
$scope.update_board_artifact_viewmodel(saved_a);
$scope.active_space_artifacts.push(saved_a);
$scope.select(evt,a);
$scope.transform_ox = 0;
$scope.transform_oy = 0;
$scope.begin_transaction();
}.bind(this));
},
start_drawing_scribble: function(evt) { start_drawing_scribble: function(evt) {
evt.preventDefault(); evt.preventDefault();
evt.stopPropagation(); evt.stopPropagation();
...@@ -851,7 +895,7 @@ function setup_whiteboard_directives() { ...@@ -851,7 +895,7 @@ function setup_whiteboard_directives() {
var scale_x = lead_x ? (moved_x)/lead_x : 1; var scale_x = lead_x ? (moved_x)/lead_x : 1;
var scale_y = lead_y ? (moved_y)/lead_y : 1; var scale_y = lead_y ? (moved_y)/lead_y : 1;
if (!$scope.transform_lock) scale_y = scale_x; if ($scope.transform_lock) scale_y = scale_x;
$scope.update_selected_artifacts(function(a) { $scope.update_selected_artifacts(function(a) {
var old_a = $scope.find_artifact_before_transaction(a); var old_a = $scope.find_artifact_before_transaction(a);
......
public/stylesheets/style.css
View file @ 58250a72
...@@ -1995,11 +1995,6 @@ ...@@ -1995,11 +1995,6 @@
content: "\E275"; } content: "\E275"; }
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */ /*! normalize.css v3.0.0 | MIT License | git.io/normalize */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; }
body { body {
margin: 0; } margin: 0; }
...@@ -2692,7 +2687,7 @@ body { ...@@ -2692,7 +2687,7 @@ body {
color: #888; color: #888;
font-weight: 300; font-weight: 300;
font-weight: 400; font-weight: 400;
font-family: Avenir W01, sans-serif; font-family: Inter, sans-serif;
font-weight: 300; font-weight: 300;
font-size: 15px; font-size: 15px;
line-height: 1.6; } line-height: 1.6; }
...@@ -2842,8 +2837,8 @@ select { ...@@ -2842,8 +2837,8 @@ select {
max-width: 100%; max-width: 100%;
vertical-align: middle; vertical-align: middle;
font-weight: 300; font-weight: 300;
font-family: Avenir W01; font-family: Inter;
font-size: 18px; font-size: 12pt;
line-height: normal; line-height: normal;
color: #222; color: #222;
background-color: rgba(0, 0, 0, 0.01); background-color: rgba(0, 0, 0, 0.01);
...@@ -2885,23 +2880,17 @@ select { ...@@ -2885,23 +2880,17 @@ select {
padding-left: 0 !important; } padding-left: 0 !important; }
.input.input-white { .input.input-white {
background-color: white; background-color: white;
color: #888;
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.05), inset 0 0px 4px rgba(0, 0, 0, 0.1); } box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.05), inset 0 0px 4px rgba(0, 0, 0, 0.1); }
.input.input-light { .input.input-light {
background-color: #f5f5f5; background-color: #f5f5f5; }
color: #888; }
.input.input-dark { .input.input-dark {
background-color: #292929; background-color: #292929; }
color: #888; }
.input.input-lighten { .input.input-lighten {
background-color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05); }
color: #888 !important; }
.input.input-darken { .input.input-darken {
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05); }
color: #888; }
.input.input-transparent { .input.input-transparent {
background-color: transparent; background-color: transparent; }
color: #888; }
.input:focus { .input:focus {
outline: 0; } outline: 0; }
.input:-moz-placeholder { .input:-moz-placeholder {
...@@ -3296,7 +3285,7 @@ form .alert { ...@@ -3296,7 +3285,7 @@ form .alert {
font-size: 13px; font-size: 13px;
line-height: 1; line-height: 1;
color: #222; color: #222;
font-family: Avenir W01; font-family: Inter;
width: 100%; width: 100%;
white-space: nowrap; } white-space: nowrap; }
.label.label-sm { .label.label-sm {
...@@ -3358,7 +3347,7 @@ form .alert { ...@@ -3358,7 +3347,7 @@ form .alert {
padding-left: 20px; padding-left: 20px;
max-width: 100%; max-width: 100%;
font-weight: 300; font-weight: 300;
font-family: Avenir W01; font-family: Inter;
font-size: 22px; font-size: 22px;
line-height: 60px; line-height: 60px;
color: #888; color: #888;
...@@ -5390,7 +5379,6 @@ form .alert { ...@@ -5390,7 +5379,6 @@ form .alert {
line-height: 1.5; line-height: 1.5;
width: 100%; width: 100%;
text-align: left; text-align: left;
color: #888;
font-weight: normal; font-weight: normal;
cursor: pointer; cursor: pointer;
border-radius: 3px; border-radius: 3px;
...@@ -5678,18 +5666,13 @@ output { ...@@ -5678,18 +5666,13 @@ output {
letter-spacing: 0.1em; } letter-spacing: 0.1em; }
.input-select { .input-select {
background-color: rgba(255, 255, 255, 0.04);
background-image: url("images/select_arrow.gif");
border-radius: 3px; border-radius: 3px;
display: inline-block; display: inline-block;
width: 100%; } width: 100%; }
@-moz-document url-prefix() {
select.input {
background-repeat: no-repeat;
background-position: right center;
cursor: pointer; } }
select { select {
-webkit-appearance: none;
appearance: none; appearance: none;
padding-left: 0px; padding-left: 0px;
width: 100%; } width: 100%; }
...@@ -5699,8 +5682,9 @@ select { ...@@ -5699,8 +5682,9 @@ select {
.table { .table {
width: 100%; width: 100%;
color: #888; font-family: Inter;
font-family: Avenir W01; } border-radius: 3px;
border: 2px solid rgba(0, 0, 0, 0.0125); }
.table thead > tr > th:first-child, .table thead > tr > th:first-child,
.table tbody > tr > th:first-child, .table tbody > tr > th:first-child,
...@@ -5784,7 +5768,7 @@ select { ...@@ -5784,7 +5768,7 @@ select {
height: 60px; height: 60px;
width: 60px; width: 60px;
display: inline-block; display: inline-block;
font-family: Avenir W01; font-family: Inter;
font-size: 30px; font-size: 30px;
font-size: 25px; font-size: 25px;
line-height: 60px; line-height: 60px;
...@@ -7948,14 +7932,14 @@ select { ...@@ -7948,14 +7932,14 @@ select {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
border-radius: 3px; border-radius: 3px;
font-family: Avenir W01; font-family: Inter;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden; -moz-backface-visibility: hidden;
-ms-backface-visibility: hidden; -ms-backface-visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden;
cursor: pointer; cursor: pointer;
background-color: #f5f5f5; background-color: #f5f5f5;
color: #888; color: #111;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
...@@ -7973,12 +7957,6 @@ select { ...@@ -7973,12 +7957,6 @@ select {
.btn.btn-link { .btn.btn-link {
background-color: transparent; background-color: transparent;
color: #888; } color: #888; }
.btn.facebook {
background-color: #3e5b97 !important;
color: white !important; }
.btn.twitter {
background-color: #2aa7de !important;
color: white !important; }
.btn.btn-round { .btn.btn-round {
border-radius: 100px !important; } border-radius: 100px !important; }
.btn.btn-rounded { .btn.btn-rounded {
...@@ -7986,22 +7964,21 @@ select { ...@@ -7986,22 +7964,21 @@ select {
.btn.btn-nude { .btn.btn-nude {
min-width: 0 !important; min-width: 0 !important;
padding: 0 !important; padding: 0 !important;
background-color: transparent; background-color: transparent; }
color: #888; }
.btn.btn-nude + .btn-nude:before { .btn.btn-nude + .btn-nude:before {
content: "·"; content: "·";
margin: 0 3px; margin: 0 3px;
color: rgba(0, 0, 0, 0.3); } color: rgba(0, 0, 0, 0.3); }
.btn.btn-stroke { .btn.btn-stroke {
box-shadow: inset 0 0 0 1px #222; box-shadow: inset 0 0 0 1px #222;
color: #222 !important; color: #111;
background-color: transparent; } background-color: transparent; }
.btn.btn-stroke:active { .btn.btn-stroke:active {
box-shadow: inset 0 0 0 1px white; box-shadow: inset 0 0 0 1px white;
color: white !important; } color: white !important; }
.btn.btn-stroke-darken { .btn.btn-stroke-darken {
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid #111;
color: #888; color: #111;
background-color: transparent; } background-color: transparent; }
.btn.btn-stroke-darken:active { .btn.btn-stroke-darken:active {
border: 1px solid #222; border: 1px solid #222;
...@@ -8084,11 +8061,14 @@ select { ...@@ -8084,11 +8061,14 @@ select {
pointer-events: none; } pointer-events: none; }
.btn.btn-transparent { .btn.btn-transparent {
background-color: transparent; background-color: transparent;
color: #888; } color: #222; }
.btn.btn-transparent.active { .btn.btn-transparent.active {
color: #292929 !important; } color: #ffffff;
background-color: #111; }
.btn.btn-transparent.open { .btn.btn-transparent.open {
color: white !important; } color: #ffffff;
background-color: #111;
border-radius: 0; }
.btn.btn-transparent-medium { .btn.btn-transparent-medium {
background-color: transparent; background-color: transparent;
color: #888; } color: #888; }
...@@ -8326,7 +8306,7 @@ select { ...@@ -8326,7 +8306,7 @@ select {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
font-size: 18px; font-size: 12pt;
color: #888; color: #888;
margin-top: 10px; } margin-top: 10px; }
.btn.btn-social { .btn.btn-social {
...@@ -8546,7 +8526,6 @@ select { ...@@ -8546,7 +8526,6 @@ select {
.btn-cluster .icon:after, .btn-cluster .icon:before { .btn-cluster .icon:after, .btn-cluster .icon:before {
width: 100%; } width: 100%; }
.btn-cluster > * { .btn-cluster > * {
border-radius: 0 !important;
background-clip: padding-box; background-clip: padding-box;
width: 100%; width: 100%;
float: left; } float: left; }
...@@ -8599,9 +8578,6 @@ select { ...@@ -8599,9 +8578,6 @@ select {
transform: scale(1, 1); } transform: scale(1, 1); }
.btn-circle .btn-group { .btn-circle .btn-group {
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
transform: scale(0, 0);
position: absolute; position: absolute;
top: -100%; top: -100%;
left: -100%; left: -100%;
...@@ -8610,9 +8586,6 @@ select { ...@@ -8610,9 +8586,6 @@ select {
font-size: 0px; font-size: 0px;
margin-left: -12px; } margin-left: -12px; }
.btn-circle .btn-group .btn { .btn-circle .btn-group .btn {
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
transform: scale(0, 0);
margin: 0 4px; } margin: 0 4px; }
.btn-circle .btn-group .btn:first-child { .btn-circle .btn-group .btn:first-child {
margin-left: 17.35%; } margin-left: 17.35%; }
...@@ -8877,30 +8850,6 @@ select { ...@@ -8877,30 +8850,6 @@ select {
border-top-right-radius: 3px !important; border-top-right-radius: 3px !important;
border-bottom-right-radius: 3px !important; } border-bottom-right-radius: 3px !important; }
.btn-group.bottom-left > .btn {
border-radius: 0px; }
.btn-group.bottom-left > .btn:first-child {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px; }
.btn-group.bottom-left > .btn.last, .btn-group.bottom-left > .btn: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;
min-height: 44px; }
.btn-xyz:before, .btn-xyz:after {
content: " ";
display: table; }
.btn-xyz:after {
clear: both; }
.btn-group { .btn-group {
position: relative; position: relative;
display: inline-block; display: inline-block;
...@@ -8908,13 +8857,15 @@ select { ...@@ -8908,13 +8857,15 @@ select {
padding: 0px; padding: 0px;
font-size: 0px; font-size: 0px;
vertical-align: middle; vertical-align: middle;
white-space: nowrap; } white-space: nowrap;
border: 1px solid #222;
border-radius: 5px; }
.btn-group.dark { .btn-group.dark {
border-radius: 3px; border-radius: 3px;
background-color: #222; background-color: #222;
color: #989898; } color: #ffffff; }
.btn-group.dark .btn { .btn-group.dark .btn {
color: #989898; } color: #ffffff; }
.btn-group.lighten { .btn-group.lighten {
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
color: #888; } color: #888; }
...@@ -9049,10 +9000,9 @@ select { ...@@ -9049,10 +9000,9 @@ select {
transform: translateY(1%); } transform: translateY(1%); }
.contained-dropdown .overflow-y-scroll ul li span { .contained-dropdown .overflow-y-scroll ul li span {
text-align: center; text-align: center;
font-size: 18px; font-size: 12pt;
line-height: 24px; } line-height: 1.5em; }
.contained-dropdown.hover:hover, .contained-dropdown.open { .contained-dropdown.hover:hover, .contained-dropdown.open {
background-color: #222;
background-color: #f5f5f5; } background-color: #f5f5f5; }
.contained-dropdown.hover:hover > *, .contained-dropdown.open > * { .contained-dropdown.hover:hover > *, .contained-dropdown.open > * {
opacity: 1; } opacity: 1; }
...@@ -9127,8 +9077,7 @@ select { ...@@ -9127,8 +9077,7 @@ select {
color: #888; } color: #888; }
.dropdown.light > .dropdown-menu, .dropdown.light > .dropdown-menu,
.dropdown.light > .dialog { .dropdown.light > .dialog {
background: #f5f5f5; background: white; }
color: #888; }
.dropdown > .dropdown-menu { .dropdown > .dropdown-menu {
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1);
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
...@@ -9178,80 +9127,37 @@ select { ...@@ -9178,80 +9127,37 @@ select {
filter: alpha(opacity=100); filter: alpha(opacity=100);
pointer-events: auto !important; pointer-events: auto !important;
display: block; } display: block; }
.dropdown.center.hover:hover > .dialog,
.dropdown.center.hover:hover > .dropdown-menu, .dropdown.center.open > .dialog,
.dropdown.center.open > .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); }
.dropdown.center > .dialog, .dropdown.center > .dialog,
.dropdown.center > .dropdown-menu { .dropdown.center > .dropdown-menu {
left: 50%; left: 50%;
top: 50%; top: 50%;
margin-top: 0px; margin-top: 0px; }
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
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); }
.dropdown.bottomleft > .dialog, .dropdown.bottomleft > .dialog,
.dropdown.bottomleft > .dropdown-menu { .dropdown.bottomleft > .dropdown-menu {
top: auto; top: auto;
bottom: 100%; bottom: 100%;
margin-bottom: 16px; margin-bottom: 16px; }
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
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); }
.dropdown.bottom > .dialog, .dropdown.bottom > .dialog,
.dropdown.bottom > .dropdown-menu { .dropdown.bottom > .dropdown-menu {
top: auto; top: auto;
bottom: 100%; bottom: 100%;
margin-bottom: 16px; margin-bottom: 16px; }
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
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); }
.dropdown.top > .dialog, .dropdown.top > .dialog,
.dropdown.top > .dropdown-menu { .dropdown.top > .dropdown-menu {
top: 100%; top: 100%;
bottom: auto; bottom: auto;
margin-top: -16px; margin-top: -16px; }
-webkit-transform-origin: top center; .dropdown.top.left > .dialog,
-moz-transform-origin: top center; .dropdown.top.left > .dropdown-menu {
-ms-transform-origin: top center; left: 70px;
transform-origin: top center; margin-top: -60px; }
-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); }
.dropdown.top.right > .dialog, .dropdown.top.right > .dialog,
.dropdown.top.right > .dropdown-menu { .dropdown.top.right > .dropdown-menu {
top: 100%; top: 100%;
bottom: auto; bottom: auto;
left: auto; left: auto;
right: 0; right: 70px;
margin-top: 16px; margin-top: -60px; }
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
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); }
.dropdown.top.right.hover:hover > .dialog,
.dropdown.top.right.hover:hover > .dropdown-menu, .dropdown.top.right.open > .dialog,
.dropdown.top.right.open > .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); }
.dropdown.top, .dropdown.bottom, .dropdown.bottomleft { .dropdown.top, .dropdown.bottom, .dropdown.bottomleft {
/*&.open > .btn-group > .btn-icon-labeled:hover, /*&.open > .btn-group > .btn-icon-labeled:hover,
&.open > .btn-icon-labeled:hover { &.open > .btn-icon-labeled:hover {
...@@ -9267,81 +9173,56 @@ select { ...@@ -9267,81 +9173,56 @@ select {
.dropdown.bottomleft.open > .btn-group > .btn-dark .jewel { .dropdown.bottomleft.open > .btn-group > .btn-dark .jewel {
background-color: #fff !important; background-color: #fff !important;
border-color: #303030 !important; } border-color: #303030 !important; }
.dropdown.top.hover:hover > .dialog,
.dropdown.top.hover:hover > .dropdown-menu, .dropdown.top.open > .dialog,
.dropdown.top.open > .dropdown-menu, .dropdown.bottom.hover:hover > .dialog,
.dropdown.bottom.hover:hover > .dropdown-menu, .dropdown.bottom.open > .dialog,
.dropdown.bottom.open > .dropdown-menu, .dropdown.bottomleft.hover:hover > .dialog,
.dropdown.bottomleft.hover:hover > .dropdown-menu, .dropdown.bottomleft.open > .dialog,
.dropdown.bottomleft.open > .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); }
.dropdown.bottomleft.hover:hover > .dialog,
.dropdown.bottomleft.hover:hover > .dropdown-menu, .dropdown.bottomleft.open > .dialog,
.dropdown.bottomleft.open > .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; }
.dropdown.options-3.option-1:after {
margin-left: -68px; }
.dropdown.options-3.option-2:after {
margin-left: -8px; }
.dropdown.options-3.option-3:after {
margin-left: 52px; }
.dropdown.option-1:after {
margin-left: -38px; }
.dropdown.option-2:after {
margin-left: 22px; }
.dropdown.open:after {
-webkit-transition: all 0.1s ease-in-out 0s;
transition: all 0.1s ease-in-out 0s;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
.dropdown:after {
-webkit-transition: all 0.1s ease-in-out 0s;
transition: all 0.1s ease-in-out 0s;
content: "";
position: absolute;
bottom: 100%;
width: 0;
height: 0;
margin-left: -8px;
pointer-events: none !important;
left: 50%;
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
transform: scale(0, 0); }
.dropdown.bottom:after, .dropdown.bottomleft:after { .dropdown {
-webkit-transform-origin: bottom center; /*&.options-3 {
-moz-transform-origin: bottom center; &.option-1:after { margin-left: -68px;}
-ms-transform-origin: bottom center; &.option-2:after { margin-left: -8px;}
transform-origin: bottom center; &.option-3:after { margin-left: 52px;}
bottom: 100%; }
border-bottom: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #303030;
border-left: 8px solid transparent; }
.dropdown.top:after { &.option-1:after { margin-left: -38px;}
-webkit-transform-origin: top center; &.option-2:after { margin-left: 22px;}
-moz-transform-origin: top center;
-ms-transform-origin: top center; &.open:after {
transform-origin: top center; @include transition( all 0.1s ease-in-out 0s);
top: 100%; -webkit-transform: scale(1);
border-bottom: 8px solid #303030; -ms-transform: scale(1);
border-right: 8px solid transparent; transform: scale(1);
border-top: 8px solid transparent; }*/
border-left: 8px solid transparent; } /*
&:after {
@include transition( all 0.1s ease-in-out 0s);
content: "";
position: absolute;
bottom: 100%;
width: 0;
height: 0;
// margin-bottom: 8px;
margin-left: -8px;
pointer-events: none !important;
left: 50%;
//transform: scale(0,0);
}
&.bottom:after, &.bottomleft:after {
//@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 {
@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;
}*/ }
.separate .icon { .separate .icon {
display: block; } display: block; }
...@@ -9438,7 +9319,7 @@ select { ...@@ -9438,7 +9319,7 @@ select {
transition: all 0.125s ease-in-out; transition: all 0.125s ease-in-out;
pointer-events: none; pointer-events: none;
background-color: #f5f5f5; background-color: #f5f5f5;
color: #888; color: #222;
border-radius: 9px; border-radius: 9px;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1); } box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1); }
.dialog ol, .dialog ul, .dialog p { .dialog ol, .dialog ul, .dialog p {
...@@ -9560,7 +9441,7 @@ select { ...@@ -9560,7 +9441,7 @@ select {
.overflow-x-scroll ::-webkit-scrollbar, .overflow-x-scroll ::-webkit-scrollbar,
.overflow-y-scroll::-webkit-scrollbar-corner, .overflow-y-scroll::-webkit-scrollbar-corner,
.overflow-y-scroll ::-webkit-scrollbar { .overflow-y-scroll ::-webkit-scrollbar {
background-color: transparent; } background-color: rgba(0, 0, 0, 0); }
.overflow-scroll::-webkit-scrollbar-thumb, .overflow-scroll::-webkit-scrollbar-thumb,
.overflow-hidden::-webkit-scrollbar-thumb, .overflow-hidden::-webkit-scrollbar-thumb,
.overflow-x-scroll::-webkit-scrollbar-thumb, .overflow-x-scroll::-webkit-scrollbar-thumb,
...@@ -9723,8 +9604,8 @@ button.close { ...@@ -9723,8 +9604,8 @@ button.close {
-ms-transform: scale(1, 1); -ms-transform: scale(1, 1);
transform: scale(1, 1); } transform: scale(1, 1); }
.modal .close { .modal .close {
position: fixed; margin-left: 44px;
margin: 44px 44px; } margin-bottom: 44px; }
.modal .close .icon { .modal .close .icon {
display: block; } display: block; }
.modal figure { .modal figure {
...@@ -9794,8 +9675,7 @@ button.close { ...@@ -9794,8 +9675,7 @@ button.close {
.modal-header { .modal-header {
padding: 30px 40px; padding: 30px 40px;
position: relative; position: relative; }
color: #888; }
.close-search { .close-search {
position: fixed; position: fixed;
...@@ -10010,7 +9890,7 @@ button.close { ...@@ -10010,7 +9890,7 @@ button.close {
color: #888; } color: #888; }
.select-list { .select-list {
-webkit-mask-image: -webkit-gradient(linear, left top, left 15px, from(transparent), to(rgba(0, 0, 0, 0.5))); -webkit-mask-image: -webkit-gradient(linear, left top, left 15px, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5)));
background-clip: padding-box; background-clip: padding-box;
font-size: 15px; font-size: 15px;
line-height: 14px; line-height: 14px;
...@@ -10188,26 +10068,14 @@ button.close { ...@@ -10188,26 +10068,14 @@ button.close {
margin-left: -20px; } margin-left: -20px; }
.header-left { .header-left {
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
-ms-transform-origin: center left;
transform-origin: center left;
left: 0; left: 0;
padding-left: 10px; } padding-left: 10px; }
.header-right { .header-right {
-webkit-transform-origin: center right;
-moz-transform-origin: center right;
-ms-transform-origin: center right;
transform-origin: center right;
right: 0; right: 0;
padding-right: 10px; } padding-right: 20px; }
.header-center { .header-center {
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
width: 100%; width: 100%;
left: 0; left: 0;
right: 0; right: 0;
...@@ -10239,7 +10107,7 @@ button.close { ...@@ -10239,7 +10107,7 @@ button.close {
margin: 0; margin: 0;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
font-size: 13.5px; font-size: 9pt;
font-weight: bold; font-weight: bold;
color: #888; color: #888;
display: inline-block; display: inline-block;
...@@ -10450,7 +10318,7 @@ button.close { ...@@ -10450,7 +10318,7 @@ button.close {
margin-right: 3px; margin-right: 3px;
color: #888; color: #888;
text-transform: uppercase; text-transform: uppercase;
font-family: Avenir W01; font-family: Inter;
font-size: 11px; font-size: 11px;
opacity: 0.5; } opacity: 0.5; }
#profile-details ul li:hover { #profile-details ul li:hover {
...@@ -12482,7 +12350,7 @@ button.close { ...@@ -12482,7 +12350,7 @@ button.close {
.avatar { .avatar {
background-color: #3d9ee9; background-color: #3d9ee9;
font-family: Avenir W01; font-family: Inter;
color: white; color: white;
display: inline-block; display: inline-block;
height: 30px; height: 30px;
...@@ -12579,8 +12447,8 @@ button.close { ...@@ -12579,8 +12447,8 @@ button.close {
min-height: 0; } min-height: 0; }
#folder-empty > div p { #folder-empty > div p {
border-radius: 100px; border-radius: 100px;
font-size: 18px; font-size: 12pt;
line-height: 24px; line-height: 1.5em;
display: block; display: block;
color: #888; } color: #888; }
...@@ -12760,7 +12628,7 @@ button.close { ...@@ -12760,7 +12628,7 @@ button.close {
background-color: #292929; background-color: #292929;
position: absolute; position: absolute;
bottom: 2px; bottom: 2px;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.1))); -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.1)));
background-color: black; background-color: black;
pointer-events: none; } pointer-events: none; }
#folder-grid .item.favorite .fav-toggle { #folder-grid .item.favorite .fav-toggle {
...@@ -12950,7 +12818,7 @@ button.close { ...@@ -12950,7 +12818,7 @@ button.close {
right: 40px; right: 40px;
color: #888; color: #888;
font-size: 11px; font-size: 11px;
font-family: Avenir W01; font-family: Inter;
text-align: left; } text-align: left; }
#editors, #editors-list { #editors, #editors-list {
...@@ -13038,7 +12906,7 @@ button.close { ...@@ -13038,7 +12906,7 @@ button.close {
.editor > a .editor-name, .editor > a .editor-name,
.editor > span .editor-email, .editor > span .editor-email,
.editor > span .editor-name { .editor > span .editor-name {
font-family: Avenir W01; font-family: Inter;
font-size: 13px; font-size: 13px;
line-height: 1.4; line-height: 1.4;
display: block; display: block;
...@@ -13424,22 +13292,12 @@ button.close { ...@@ -13424,22 +13292,12 @@ button.close {
.toolbar { .toolbar {
margin: auto; margin: auto;
position: fixed; position: fixed;
bottom: 0px; top: 10px;
z-index: 3000; z-index: 3000;
padding: 20px; padding: 0;
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
transition-duration: 0.15s; pointer-events: none !important; }
transition-timing-function: ease-in-out;
transition-delay: initial;
transition-property: opacity, transform;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
pointer-events: none !important;
opacity: 0; }
.toolbar.toolbar-meta { .toolbar.toolbar-meta {
-webkit-transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);
...@@ -13452,28 +13310,8 @@ button.close { ...@@ -13452,28 +13310,8 @@ button.close {
top: auto !important; top: auto !important;
left: 0 !important; left: 0 !important;
bottom: 0 !important; } bottom: 0 !important; }
.toolbar.out {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0); }
.toolbar.out * {
pointer-events: none !important; }
.toolbar.out button, .toolbar.out input, .toolbar.out .dialog {
display: none; }
.toolbar.in {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.toolbar.in.out {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0); }
.toolbar.in.out * {
pointer-events: none !important; }
.toolbar > * { .toolbar > * {
margin: 0 2px;
margin-top: 4px;
pointer-events: auto !important; } pointer-events: auto !important; }
.toolbar > *.out {
margin: 0;
opacity: 0; }
.toolbar.toolbar-vertical { .toolbar.toolbar-vertical {
width: auto !important; width: auto !important;
font-size: 0px; font-size: 0px;
...@@ -13588,16 +13426,14 @@ button.close { ...@@ -13588,16 +13426,14 @@ button.close {
position: relative; } position: relative; }
.toolbar-properties { .toolbar-properties {
bottom: 64px;
z-index: 0; } z-index: 0; }
.toolbar-properties.in { .toolbar-properties.in {
z-index: 3000; } z-index: 3000; }
.toolbar-properties .icon-sm { .toolbar-properties .icon-sm {
z-index: 110; z-index: 110;
background-color: #222;
border-radius: 50px; } border-radius: 50px; }
.toolbar-properties .jewel { .toolbar-properties .jewel {
border: 2px solid rgba(255, 255, 255, 0.5); border: 2px solid #888;
background-color: transparent; background-color: transparent;
color: #989898; color: #989898;
width: 36px; width: 36px;
...@@ -13616,7 +13452,13 @@ button.close { ...@@ -13616,7 +13452,13 @@ button.close {
.toolbar-elements > .btn-group, .toolbar-elements > .btn-group,
.toolbar-properties > .btn-group { .toolbar-properties > .btn-group {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } background-color: #ffffff; }
.toolbar-elements {
left: 10px; }
.toolbar-properties {
right: 20px; }
#color-toggles { #color-toggles {
background-size: 40px; background-size: 40px;
...@@ -14638,7 +14480,7 @@ button.close { ...@@ -14638,7 +14480,7 @@ button.close {
padding-top: 10px; padding-top: 10px;
margin-bottom: 0; margin-bottom: 0;
font-size: 16px !important; font-size: 16px !important;
font-family: Avenir W01 !important; font-family: Inter !important;
list-style: none; list-style: none;
border-top-left-radius: 3px; border-top-left-radius: 3px;
border-top-right-radius: 3px; } border-top-right-radius: 3px; }
...@@ -14784,12 +14626,9 @@ button.close { ...@@ -14784,12 +14626,9 @@ button.close {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
position: relative; position: relative;
overflow: scroll; overflow: scroll; }
/** {
-moz-user-select: none !important; // firefox has selection problems
}*/ }
.board .wrapper { .board .wrapper {
border: 1px dotted rgba(128, 128, 128, 0.5); border: 4px solid black;
transition-duration: 0.25s; transition-duration: 0.25s;
transition-property: width, height, background-color; transition-property: width, height, background-color;
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -14798,20 +14637,20 @@ button.close { ...@@ -14798,20 +14637,20 @@ button.close {
.snap-ruler-h { .snap-ruler-h {
pointer-events: none; pointer-events: none;
position: fixed; position: fixed;
z-index: 0; z-index: 2000;
right: 0px; right: 0px;
height: 1px; height: 1px;
background-color: rgba(0, 0, 0, 0.5); background-color: black;
left: 0px; } left: 0px; }
.snap-ruler-v { .snap-ruler-v {
pointer-events: none; pointer-events: none;
position: fixed; position: fixed;
z-index: 0; z-index: 2000;
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
width: 1px; width: 1px;
background-color: rgba(0, 0, 0, 0.5); } background-color: black; }
.cursor { .cursor {
position: absolute; position: absolute;
...@@ -14842,16 +14681,16 @@ button.close { ...@@ -14842,16 +14681,16 @@ button.close {
max-width: 100%; max-width: 100%;
position: relative; position: relative;
width: auto; width: auto;
margin-left: -18px; margin-left: -12pt;
margin-right: -18px; margin-right: -12pt;
margin-top: -18px; margin-top: -12pt;
margin-bottom: -18px; } margin-bottom: -12pt; }
.table table { .table table {
width: 100%; width: 100%;
table-layout: auto; table-layout: auto;
border-collapse: separate; border-collapse: separate;
border-spacing: 18px 18px; } border-spacing: 12pt 12pt; }
.table tr { .table tr {
border-top: 1px solid rgba(255, 255, 255, 0.125); } border-top: 1px solid rgba(255, 255, 255, 0.125); }
...@@ -14866,26 +14705,10 @@ button.close { ...@@ -14866,26 +14705,10 @@ button.close {
position: absolute; } position: absolute; }
#space { #space {
/*-webkit-user-select: all;
-ms-user-select: all;
-moz-user-select: all;
user-select: all;*/
position: relative; position: relative;
height: 100% !important; height: 100% !important;
background-color: #eee; } background-color: #eee; }
#made-with {
position: fixed;
width: 100%;
bottom: 0;
padding: 12px;
opacity: 0.25; }
#made-with a {
color: #222; }
#made-with p {
text-align: center;
font-size: 11px; }
#baseline { #baseline {
position: absolute; position: absolute;
width: 100%; width: 100%;
...@@ -14898,7 +14721,7 @@ button.close { ...@@ -14898,7 +14721,7 @@ button.close {
top: 0; top: 0;
display: none; } display: none; }
#baseline li { #baseline li {
height: 6px; height: 0.375em;
border-bottom: 1px solid #3d9ee9; } border-bottom: 1px solid #3d9ee9; }
#space-header .item-meta { #space-header .item-meta {
...@@ -14921,8 +14744,8 @@ button.close { ...@@ -14921,8 +14744,8 @@ button.close {
.space-bounds { .space-bounds {
position: absolute; position: absolute;
left: 0px; left: 0;
top: 0px; top: 0;
pointer-events: none; pointer-events: none;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -15186,7 +15009,7 @@ button.close { ...@@ -15186,7 +15009,7 @@ button.close {
top: 60px; top: 60px;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: transparent; background-color: rgba(0, 0, 0, 0);
pointer-events: none; } pointer-events: none; }
#sidebar .sidebar-menu-backdrop.in { #sidebar .sidebar-menu-backdrop.in {
pointer-events: auto; pointer-events: auto;
...@@ -15195,20 +15018,15 @@ button.close { ...@@ -15195,20 +15018,15 @@ button.close {
padding: 15px 25px; padding: 15px 25px;
font-size: 14px; } font-size: 14px; }
#sidebar #search-input:-moz-placeholder, #sidebar #search-input::-moz-placeholder, #sidebar #search-input:-ms-input-placeholder { #sidebar #search-input:-moz-placeholder, #sidebar #search-input::-moz-placeholder, #sidebar #search-input:-ms-input-placeholder {
font-family: Avenir W01; } font-family: Inter; }
#sidebar #search-input::-webkit-input-placeholder { #sidebar #search-input::-webkit-input-placeholder {
font-family: Avenir W01; } font-family: Inter; }
#sidebar #online-members > div:not(.in) { #sidebar #online-members > div:not(.in) {
display: none; } display: none; }
.artifact { .artifact {
position: relative; position: relative;
/*&.artifact-text.text-blank [contentEditable=true]:not(.text-editing) p:first-child::after { /*&.artifact-text.text-blank [contentEditable=true].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 {
content: "Type here"; content: "Type here";
opacity: 0.25; opacity: 0.25;
}*/ }*/
...@@ -15235,6 +15053,9 @@ button.close { ...@@ -15235,6 +15053,9 @@ button.close {
top: 50%; top: 50%;
left: 50%; left: 50%;
margin: -22px; } margin: -22px; }
.artifact.artifact-text.text-blank [contentEditable=true]:not(.text-editing) p:first-child::after {
content: "Double click to edit";
opacity: 0.25; }
.artifact.artifact-text.text-blank p:first-child br { .artifact.artifact-text.text-blank p:first-child br {
display: none; } display: none; }
.artifact .link-wrapper { .artifact .link-wrapper {
...@@ -15282,9 +15103,9 @@ button.close { ...@@ -15282,9 +15103,9 @@ button.close {
display: block; display: block;
word-wrap: break-word; word-wrap: break-word;
line-height: 1.5em; line-height: 1.5em;
font-size: 18px; } font-size: 12pt; }
.artifact .text-table .text-cell .text-column.text-editing { .artifact .text-table .text-cell .text-column.text-editing {
min-height: 18px; min-height: 12pt;
-webkit-user-select: auto; -webkit-user-select: auto;
-moz-user-select: auto; -moz-user-select: auto;
user-select: auto; user-select: auto;
...@@ -15550,7 +15371,7 @@ button.close { ...@@ -15550,7 +15371,7 @@ button.close {
position: absolute; position: absolute;
color: black; color: black;
white-space: normal; white-space: normal;
font-size: 18px; } font-size: 36px; }
.board .artifact.artifact-zone { .board .artifact.artifact-zone {
border: 1px solid #2ecc71; border: 1px solid #2ecc71;
background-color: rgba(46, 204, 113, 0.025); background-color: rgba(46, 204, 113, 0.025);
...@@ -15600,6 +15421,9 @@ body:not(.present-mode) #space .artifact.selected { ...@@ -15600,6 +15421,9 @@ body:not(.present-mode) #space .artifact.selected {
.tool-pan { .tool-pan {
cursor: grab !important; } cursor: grab !important; }
.tool-note {
cursor: crosshair !important; }
.artifact.state-idle .progress, .artifact.state-idle .progress-text { .artifact.state-idle .progress, .artifact.state-idle .progress-text {
display: none; } display: none; }
...@@ -15692,30 +15516,30 @@ body:not(.present-mode) #space .artifact.selected { ...@@ -15692,30 +15516,30 @@ body:not(.present-mode) #space .artifact.selected {
display: block; } display: block; }
.handles { .handles {
border: 1px solid rgba(255, 255, 255, 0.5);
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: -1;
right: 0; right: 0;
z-index: 800; z-index: 800;
pointer-events: none; } pointer-events: none;
background: rgba(255, 255, 255, 0.1); }
.handles:after { .handles:after {
border: 1px dotted #288cd7; border: 4px dotted #000000;
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
height: auto; height: auto;
width: auto; width: auto;
top: -1px; top: 0px;
left: -1px; left: 0px;
right: -1px; right: 0px;
bottom: -1px; } bottom: -1px; }
.extreme-zoom .handles { .extreme-zoom .handles {
border: 8px solid rgba(255, 255, 255, 0.5); } border: 8px solid rgba(255, 255, 255, 0.5); }
.extreme-zoom .handles:after { .extreme-zoom .handles:after {
border: 8px dotted #288cd7; border: 8px dotted #000000;
top: -4px; top: -4px;
left: -4px; left: -4px;
right: -4px; right: -4px;
...@@ -16049,13 +15873,12 @@ body:not(.present-mode) #space .artifact.selected { ...@@ -16049,13 +15873,12 @@ body:not(.present-mode) #space .artifact.selected {
pointer-events: auto; pointer-events: auto;
z-index: 2000; z-index: 2000;
position: absolute; position: absolute;
width: 30px !important;
height: 30px !important;
border-radius: 100%; border-radius: 100%;
margin: -15px; border: 1px solid black;
border: 1px solid rgba(0, 0, 0, 0.25); } margin: -5px;
padding: 4px; }
.vector-handle:hover { .vector-handle:hover {
background-color: rgba(255, 255, 255, 0.5); background-color: black;
cursor: move; } cursor: move; }
.handles-vector .handle, .handles-vector .edge-handle { .handles-vector .handle, .handles-vector .edge-handle {
...@@ -16152,13 +15975,7 @@ body:not(.present-mode) #space .artifact.selected { ...@@ -16152,13 +15975,7 @@ body:not(.present-mode) #space .artifact.selected {
border-style: solid; border-style: solid;
border-width: 10px; border-width: 10px;
border-color: transparent; border-color: transparent;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
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; } transition: all .05s ease-in-out; }
.handle div { .handle div {
position: relative; position: relative;
...@@ -16421,10 +16238,8 @@ body:not(.present-mode) #space .artifact.selected { ...@@ -16421,10 +16238,8 @@ body:not(.present-mode) #space .artifact.selected {
html, html,
body { body {
height: 100%; height: 100%;
-webkit-tap-highlight-color: transparent;
background-color: white;
background-color: #f5f5f5; background-color: #f5f5f5;
color: #292929; } color: #111; }
*[contenteditable="true"] { *[contenteditable="true"] {
outline: none; } outline: none; }
...@@ -16442,49 +16257,18 @@ body { ...@@ -16442,49 +16257,18 @@ body {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
cursor: default; } cursor: default; }
#home {
background-color: white; }
.img img { .img img {
max-width: 100%; max-width: 100%;
height: auto; } height: auto; }
.plan {
color: #888;
border-radius: 3px;
display: inline-block;
padding: 30px;
background-color: transparent;
border: 2px solid rgba(0, 0, 0, 0.05);
width: 100%; }
.plan.active {
background-color: white;
border: none; }
.plan h4 {
color: black;
margin-bottom: 0px; }
.plan p {
font-size: 13px;
line-height: 1.4;
margin-top: 5px;
margin-bottom: 5px; }
.plan 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; }
.plan ul li {
padding-top: 2px; }
#startup { #startup {
background-position: center; background-position: center;
background-image: url(/images/diamond.svg); background-image: url(/images/diamond.svg);
background-repeat: no-repeat; } background-repeat: no-repeat; }
#home {
background-color: white; }
.layer { .layer {
-webkit-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
......
routes/api/space_exports.js
View file @ 58250a72
...@@ -78,14 +78,14 @@ router.get('/png', function(req, res, next) { ...@@ -78,14 +78,14 @@ router.get('/png', function(req, res, next) {
var oldPath = url.parse(oldUrl).pathname; var oldPath = url.parse(oldUrl).pathname;
uploader.removeFile(oldPath, function(err, res) {}); uploader.removeFile(oldPath, function(err, res) {});
} }
fs.unlink(local_path); fs.unlinkSync(local_path);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }
}); });
try { try {
fs.unlink(localResizedFilePath); fs.unlinkSync(localResizedFilePath);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }
......
routes/api/space_memberships.js
View file @ 58250a72
...@@ -84,7 +84,7 @@ router.post('/', function(req, res, next) { ...@@ -84,7 +84,7 @@ router.post('/', function(req, res, next) {
} else { } else {
res.status(400).json({ res.status(400).json({
"error": "user already in space" "error": "This email is already included in the Space memberships."
}); });
} }
......
styles/artifact.scss
View file @ 58250a72
...@@ -26,12 +26,12 @@ ...@@ -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"; content: "Double click to edit";
opacity: 0.25; 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"; content: "Type here";
opacity: 0.25; opacity: 0.25;
}*/ }*/
...@@ -469,7 +469,7 @@ ...@@ -469,7 +469,7 @@
color: black; color: black;
//@include user-select(none); //@include user-select(none);
white-space: normal; white-space: normal;
font-size: 18px; font-size: 36px;
&.artifact-zone { &.artifact-zone {
border: 1px solid rgba(46,204,113,1); border: 1px solid rgba(46,204,113,1);
...@@ -553,6 +553,10 @@ body:not(.present-mode) { ...@@ -553,6 +553,10 @@ body:not(.present-mode) {
cursor: grab !important; cursor: grab !important;
} }
.tool-note {
cursor: crosshair !important;
}
.artifact.state-idle { .artifact.state-idle {
.progress, .progress-text { .progress, .progress-text {
display: none; display: none;
......
styles/button.scss
View file @ 58250a72
...@@ -7,12 +7,6 @@ ...@@ -7,12 +7,6 @@
.btn-group.colors { .btn-group.colors {
.btn { .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); box-shadow: inset 0 0 30px 0px rgba(40,40,40,0.1);
} }
} }
...@@ -64,7 +58,7 @@ ...@@ -64,7 +58,7 @@
backface-visibility: hidden; backface-visibility: hidden;
cursor: pointer; cursor: pointer;
background-color: $light; background-color: $light;
color: $medium;; color: $black;
@include user-select(none); @include user-select(none);
&:last-child {border: none;} &:last-child {border: none;}
...@@ -82,12 +76,9 @@ ...@@ -82,12 +76,9 @@
&.btn-link { &.btn-link {
background-color: transparent; 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 { &.btn-round {
border-radius: 100px !important; border-radius: 100px !important;
} }
...@@ -96,21 +87,10 @@ ...@@ -96,21 +87,10 @@
border-radius: 6px !important; border-radius: 6px !important;
} }
// &.close {
// position: absolute;
// top: 15px;
// right: 15px;
// z-index: 4000;
// font-size: 40px;
// }
&.btn-nude { &.btn-nude {
min-width: 0 !important; min-width: 0 !important;
// font-size: inherit !important;
padding: 0 !important; padding: 0 !important;
// height: auto !important;
background-color: transparent; background-color: transparent;
color: $medium;
} }
&.btn-nude + .btn-nude { &.btn-nude + .btn-nude {
...@@ -123,7 +103,7 @@ ...@@ -123,7 +103,7 @@
&.btn-stroke { &.btn-stroke {
box-shadow: inset 0 0 0 1px $dark; box-shadow: inset 0 0 0 1px $dark;
color: $dark !important; color: $black;
background-color: transparent; background-color: transparent;
&:active { &:active {
box-shadow: inset 0 0 0 1px white; box-shadow: inset 0 0 0 1px white;
...@@ -132,9 +112,8 @@ ...@@ -132,9 +112,8 @@
} }
&.btn-stroke-darken { &.btn-stroke-darken {
//box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); border: 1px solid $black;
border: 1px solid rgba(0,0,0,0.1); color: $black;
color: $medium;
background-color: transparent; background-color: transparent;
&:active { &:active {
//box-shadow: inset 0 0 0 1px $dark; //box-shadow: inset 0 0 0 1px $dark;
...@@ -263,9 +242,18 @@ ...@@ -263,9 +242,18 @@
&.btn-transparent { &.btn-transparent {
background-color: transparent; background-color: transparent;
color: $medium; color: $dark;
&.active {color: $darker !important; } &.active {
&.open {color: white !important; } //color: $black !important;
color: $white;
background-color: $black;
}
&.open {
//color: $black !important;
color: $white;
background-color: $black;
border-radius: 0;
}
} }
&.btn-transparent-medium { &.btn-transparent-medium {
...@@ -714,7 +702,6 @@ ...@@ -714,7 +702,6 @@
} }
> * { > * {
border-radius: 0 !important;
background-clip: padding-box; background-clip: padding-box;
width: 100%; width: 100%;
float: left; float: left;
...@@ -775,7 +762,7 @@ ...@@ -775,7 +762,7 @@
} }
} }
.btn-group { .btn-group {
@include scale(0,0); //@include scale(0,0);
//@include transition( all 0.1s 0s ease-in-out); //@include transition( all 0.1s 0s ease-in-out);
position: absolute; position: absolute;
...@@ -787,7 +774,7 @@ ...@@ -787,7 +774,7 @@
margin-left: -12px; margin-left: -12px;
.btn { .btn {
@include scale(0,0); //@include scale(0,0);
//@include transition( all 0.1s 0.05s ease-in-out); //@include transition( all 0.1s 0.05s ease-in-out);
...@@ -979,31 +966,7 @@ ...@@ -979,31 +966,7 @@
} }
} }
.btn-group.bottom-left > .btn { // !btn-group
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; position: relative;
...@@ -1014,13 +977,16 @@ ...@@ -1014,13 +977,16 @@
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
border: 1px solid $dark;
border-radius: 5px;
&.dark { &.dark {
border-radius: $radius; border-radius: $radius;
background-color: $dark; background-color: $dark;
color: $lighter; color: $white;
.btn { .btn {
color: $lighter; color: $white;
} }
} }
...@@ -1159,4 +1125,4 @@ ...@@ -1159,4 +1125,4 @@
margin: 4px; margin: 4px;
z-index: 100; z-index: 100;
border-radius: 50px; border-radius: 50px;
} }
\ No newline at end of file
styles/dialog.scss
View file @ 58250a72
...@@ -125,8 +125,10 @@ ...@@ -125,8 +125,10 @@
@include transition( all 0.125s ease-in-out); @include transition( all 0.125s ease-in-out);
pointer-events: none; pointer-events: none;
background-color: $light; background-color: $light;
color: $medium; color: $dark;
&.dark {background-color: $dark; } &.dark {
background-color: $dark;
}
border-radius: $radius*3; 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); 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 @@ ...@@ -228,4 +230,4 @@
h4 .icon { h4 .icon {
height: 38px; height: 38px;
} }
} }
\ No newline at end of file
styles/dropdown.scss
View file @ 58250a72
...@@ -43,9 +43,6 @@ $predelay: 0; ...@@ -43,9 +43,6 @@ $predelay: 0;
&.hover:hover, &.hover:hover,
&.open { &.open {
// &:before {opacity: 0.125; }
// pointer-events: auto;
background-color: $dark;
background-color: $light; background-color: $light;
> * { > * {
...@@ -111,8 +108,8 @@ $predelay: 0; ...@@ -111,8 +108,8 @@ $predelay: 0;
} }
&:last-child > .btn{ &:last-child > .btn{
border-top-right-radius: $radius ; border-top-right-radius: $radius;
border-bottom-right-radius: $radius ; border-bottom-right-radius: $radius;
} }
} }
} }
...@@ -143,8 +140,7 @@ $predelay: 0; ...@@ -143,8 +140,7 @@ $predelay: 0;
&.light > .dropdown-menu, &.light > .dropdown-menu,
&.light > .dialog { &.light > .dialog {
background: $light; background: white;
color: $medium;
} }
> .dropdown-menu { > .dropdown-menu {
...@@ -189,8 +185,6 @@ $predelay: 0; ...@@ -189,8 +185,6 @@ $predelay: 0;
} }
} }
&.hover:hover > .dialog, &.hover:hover > .dialog,
&.hover:hover > .dropdown-menu, &.hover:hover > .dropdown-menu,
...@@ -206,9 +200,7 @@ $predelay: 0; ...@@ -206,9 +200,7 @@ $predelay: 0;
&.open { &.open {
> .dialog, > .dialog,
> .dropdown-menu { > .dropdown-menu {
-webkit-transform: translate3d(-50%, -50%, 100px) scale(1); //transform: translate3d(-50%, -50%, 100px) scale(1);
-ms-transform: translate3d(-50%, -50%, 100px) scale(1);
transform: translate3d(-50%, -50%, 100px) scale(1);
} }
} }
...@@ -217,10 +209,8 @@ $predelay: 0; ...@@ -217,10 +209,8 @@ $predelay: 0;
left: 50%; left: 50%;
top: 50%; top: 50%;
margin-top: 0px; margin-top: 0px;
@include transform-origin(center center); //@include transform-origin(center center);
-webkit-transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8); //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);
} }
} }
...@@ -230,10 +220,8 @@ $predelay: 0; ...@@ -230,10 +220,8 @@ $predelay: 0;
top: auto; top: auto;
bottom: 100%; bottom: 100%;
margin-bottom: 16px; margin-bottom: 16px;
@include transform-origin(bottom left); //@include transform-origin(bottom left);
-webkit-transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8); //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);
} }
} }
...@@ -243,10 +231,8 @@ $predelay: 0; ...@@ -243,10 +231,8 @@ $predelay: 0;
top: auto; top: auto;
bottom: 100%; bottom: 100%;
margin-bottom: 16px; margin-bottom: 16px;
@include transform-origin(bottom center); //@include transform-origin(bottom center);
-webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8); //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);
} }
} }
...@@ -257,33 +243,37 @@ $predelay: 0; ...@@ -257,33 +243,37 @@ $predelay: 0;
top: 100%; top: 100%;
bottom: auto; bottom: auto;
margin-top: -16px; margin-top: -16px;
@include transform-origin(top center); //@include transform-origin(top center);
-webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8); //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);
} }
} }
&.top.left {
> .dialog,
> .dropdown-menu {
left: 70px;
margin-top: -60px;
}
}
&.top.right { &.top.right {
> .dialog, > .dialog,
> .dropdown-menu { > .dropdown-menu {
top: 100%; top: 100%;
bottom: auto; bottom: auto;
left: auto; left: auto;
right: 0;
margin-top: 16px; right: 70px;
@include transform-origin(top right); margin-top: -60px;
-webkit-transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
-ms-transform: translate3d(0%, 0%, 100px) scale(0.93,0.8); //@include transform-origin(top right);
transform: translate3d(0%, 0%, 100px) scale(0.93,0.8); //transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
} }
&.hover:hover, &.hover:hover,
&.open { &.open {
> .dialog, > .dialog,
> .dropdown-menu { > .dropdown-menu {
-webkit-transform: translate3d(0%, 0%, 100px) scale(1); //transform: translate3d(0%, 0%, 100px) scale(1);
-ms-transform: translate3d(0%, 0%, 100px) scale(1);
transform: translate3d(0%, 0%, 100px) scale(1);
} }
} }
...@@ -312,9 +302,7 @@ $predelay: 0; ...@@ -312,9 +302,7 @@ $predelay: 0;
> .dialog, > .dialog,
> .dropdown-menu { > .dropdown-menu {
-webkit-transform: translate3d(-50%, 0%, 100px) scale(1); //transform: translate3d(-50%, 0%, 100px) scale(1);
-ms-transform: translate3d(-50%, 0%, 100px) scale(1);
transform: translate3d(-50%, 0%, 100px) scale(1);
} }
} }
} }
...@@ -324,9 +312,7 @@ $predelay: 0; ...@@ -324,9 +312,7 @@ $predelay: 0;
&.open { &.open {
> .dialog, > .dialog,
> .dropdown-menu { > .dropdown-menu {
-webkit-transform: translate3d(-33%, 0%, 100px) scale(1) !important; //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;
} }
} }
} }
...@@ -334,7 +320,7 @@ $predelay: 0; ...@@ -334,7 +320,7 @@ $predelay: 0;
.dropdown { .dropdown {
&.options-3 { /*&.options-3 {
&.option-1:after { margin-left: -68px;} &.option-1:after { margin-left: -68px;}
&.option-2:after { margin-left: -8px;} &.option-2:after { margin-left: -8px;}
&.option-3:after { margin-left: 52px;} &.option-3:after { margin-left: 52px;}
...@@ -348,8 +334,9 @@ $predelay: 0; ...@@ -348,8 +334,9 @@ $predelay: 0;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-ms-transform: scale(1); -ms-transform: scale(1);
transform: scale(1); transform: scale(1);
} }*/
/*
&:after { &:after {
@include transition( all 0.1s ease-in-out 0s); @include transition( all 0.1s ease-in-out 0s);
content: ""; content: "";
...@@ -362,26 +349,24 @@ $predelay: 0; ...@@ -362,26 +349,24 @@ $predelay: 0;
margin-left: -8px; margin-left: -8px;
pointer-events: none !important; pointer-events: none !important;
left: 50%; left: 50%;
-webkit-transform: scale(0,0); //transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0);
} }
&.bottom:after, &.bottomleft:after { &.bottom:after, &.bottomleft:after {
@include transform-origin(bottom center); //@include transform-origin(bottom center);
bottom: 100%; bottom: 100%;
border-bottom: 8px solid transparent; border-bottom: 8px solid transparent;
border-right: 8px solid transparent; border-right: 8px solid transparent;
border-top: 8px solid #303030; border-top: 8px solid #303030;
border-left: 8px solid transparent; border-left: 8px solid transparent;
} }
*/
&.top:after { /*&.top:after {
@include transform-origin(top center); @include transform-origin(top center);
top: 100%; top: 100%;
border-bottom: 8px solid #303030; border-bottom: 8px solid #303030;
border-right: 8px solid transparent; border-right: 8px solid transparent;
border-top: 8px solid transparent; border-top: 8px solid transparent;
border-left: 8px solid transparent; border-left: 8px solid transparent;
} }*/
} }
\ No newline at end of file
styles/form-checkbox.scss
View file @ 58250a72
...@@ -28,7 +28,6 @@ ...@@ -28,7 +28,6 @@
line-height: 1.5; line-height: 1.5;
width: 100%; width: 100%;
text-align: left; text-align: left;
color: $medium;
font-weight: normal; font-weight: normal;
cursor: pointer; cursor: pointer;
border-radius: $radius; border-radius: $radius;
...@@ -139,4 +138,4 @@ ...@@ -139,4 +138,4 @@
display: inline-block !important; display: inline-block !important;
width: auto !important; width: auto !important;
padding-right: 15px !important; padding-right: 15px !important;
} }
\ No newline at end of file
styles/form-select.scss
View file @ 58250a72
...@@ -2,24 +2,14 @@ ...@@ -2,24 +2,14 @@
@import "mixins"; @import "mixins";
.input-select { .input-select {
// background-color: rgba(255,255,255,0.04); background-color: rgba(255,255,255,0.04);
// background-image: url('images/select_arrow.gif'); background-image: url('images/select_arrow.gif');
border-radius: $radius; border-radius: $radius;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
} }
@-moz-document url-prefix() {
select.input{
background-repeat: no-repeat;
background-position: right center;
cursor: pointer;
}
}
select { select {
-webkit-appearance:none;
// -moz-appearance:window;
appearance:none; appearance:none;
padding-left: 0px; padding-left: 0px;
width: 100%; width: 100%;
......
styles/form.scss
View file @ 58250a72
...@@ -113,43 +113,26 @@ select { ...@@ -113,43 +113,26 @@ select {
&.input-white { &.input-white {
background-color: 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); 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 { &.input-light {
background-color: $light; background-color: $light;
color: $medium;
} }
&.input-dark { &.input-dark {
background-color: $darker; background-color: $darker;
color: $medium;
} }
&.input-lighten { &.input-lighten {
background-color: rgba(255,255,255,0.05); background-color: rgba(255,255,255,0.05);
color: $medium !important;
} }
&.input-darken { &.input-darken {
background-color: rgba(0,0,0,0.05); background-color: rgba(0,0,0,0.05);
color: $medium;
} }
&.input-transparent { &.input-transparent {
background-color: 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(); @include input-focus();
......
styles/handles.scss
View file @ 58250a72
...@@ -69,26 +69,27 @@ ...@@ -69,26 +69,27 @@
} }
.handles { .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; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: -1;
right: 0; right: 0;
z-index: 800; z-index: 800;
pointer-events: none; pointer-events: none;
background: rgba(255,255,255,0.1);
&:after{ &:after{
border: 1px dotted rgba(40,140,215,1); border: 4px dotted #000000;
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
height: auto; height: auto;
width: auto; width: auto;
top: -1px; top: 0px;
left: -1px; left: 0px;
right: -1px; right: 0px;
bottom: -1px; bottom: -1px;
} }
} }
...@@ -97,7 +98,7 @@ ...@@ -97,7 +98,7 @@
border: 8px solid rgba(255,255,255,0.5); border: 8px solid rgba(255,255,255,0.5);
&:after{ &:after{
border: 8px dotted rgba(40,140,215,1); border: 8px dotted #000000;
top: -4px; top: -4px;
left: -4px; left: -4px;
right: -4px; right: -4px;
...@@ -332,16 +333,15 @@ ...@@ -332,16 +333,15 @@
pointer-events:auto; pointer-events:auto;
z-index: 2000; z-index: 2000;
position: absolute; position: absolute;
width: 30px !important;
height: 30px !important;
border-radius: 100%; border-radius: 100%;
margin: -15px;
border: 1px solid rgba(0,0,0,0.25);
border: 1px solid black;
margin: -5px;
padding: 4px;
&:hover { &:hover {
background-color: rgba(255,255,255,0.5); background-color: black;
cursor: move; cursor: move;
} }
} }
...@@ -428,15 +428,8 @@ ...@@ -428,15 +428,8 @@
border-style: solid; border-style: solid;
border-width: 10px; border-width: 10px;
border-color: transparent; border-color: transparent;
-webkit-background-clip: padding-box; background-clip: padding-box;
-moz-background-clip: padding-box; transition: all .05s ease-in-out;
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;
} }
div { div {
......
styles/header.scss
View file @ 58250a72
...@@ -31,17 +31,14 @@ ...@@ -31,17 +31,14 @@
} }
.header-left { .header-left {
@include transform-origin(center left);
left: 0; left: 0;
padding-left: 10px; padding-left: 10px;
} }
.header-right { .header-right {
@include transform-origin(center right);
right: 0; right: 0;
padding-right: 10px; padding-right: 20px;
} }
.header-center { .header-center {
@include transform-origin(center center);
width: 100%; width: 100%;
left: 0; left: 0;
right: 0; right: 0;
......
styles/main.scss
View file @ 58250a72
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
@import "mixins"; @import "mixins";
.wrapper { .wrapper {
//@include transition( all 0.25s ease-in-out);
position: relative; position: relative;
margin: auto; margin: auto;
max-width: 1160px; max-width: 1160px;
......
styles/modal.scss
View file @ 58250a72
...@@ -59,9 +59,9 @@ ...@@ -59,9 +59,9 @@
} }
.close { .close {
position: fixed; margin-left: 44px;
margin: 44px 44px; margin-bottom: 44px;
.icon {display: block; } .icon {display: block; }
} }
figure { figure {
...@@ -146,7 +146,6 @@ ...@@ -146,7 +146,6 @@
.modal-header { .modal-header {
padding: 30px 40px; padding: 30px 40px;
position: relative; position: relative;
color: $medium;
} }
.close-search { .close-search {
...@@ -300,4 +299,4 @@ ...@@ -300,4 +299,4 @@
// .btn-block + .btn-block { // .btn-block + .btn-block {
// margin-left: 0; // margin-left: 0;
// } // }
} }
\ No newline at end of file
styles/normalize.scss
View file @ 58250a72
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */ /*! 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. // Remove default margin.
// //
...@@ -420,4 +408,4 @@ table { ...@@ -420,4 +408,4 @@ table {
td, td,
th { th {
padding: 0; padding: 0;
} }
\ No newline at end of file
Supports Markdown
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

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal