Changeset 13854 for branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Scripts/Styling

Timestamp:

05/20/16 13:01:12 (9 years ago)

Author:

jlodewyc

Message:

#2582 Core update, pre migration

File:

• branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Scripts/Styling/StyleSheet.css (modified) (1 diff)

branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Scripts/Styling/StyleSheet.css

@@ -164 +164 @@
 box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
     }
+
+    /***************************** Required styles *****************************/
+
+/**
+ * For the correct positioning of the placeholder element, the dnd-list and
+ * it's children must have position: relative
+ */
+ ul[dnd-list],
+ ul[dnd-list] > li {
+  position: relative;
+}
+
+/***************************** Dropzone Styling *****************************/
+
+/**
+ * The dnd-list should always have a min-height,
+ * otherwise you can't drop to it once it's empty
+ */
+ .dropzone ul[dnd-list] {
+    min-height: 42px;
+    margin: 0px;
+    padding-left: 0px;
+}
+
+/**
+ * The dnd-lists's child elements currently MUST have
+ * position: relative. Otherwise we can not determine
+ * whether the mouse pointer is in the upper or lower
+ * half of the element we are dragging over. In other
+ * browsers we can use event.offsetY for this.
+ */
+ .dropzone li {
+    background-color: #fff;
+    border: 1px solid rgba(0,0,0,0.3) ;
+    border-radius:25px;
+    display: block;
+    padding: 0px;
+}
+
+/**
+ * Reduce opacity of elements during the drag operation. This allows the user
+ * to see where he is dropping his element, even if the element is huge. The
+ * .dndDragging class is automatically set during the drag operation.
+ */
+ .dropzone .dndDragging {
+    opacity: 0.7;
+}
+
+/**
+ * The dndDraggingSource class will be applied to the source element of a drag
+ * operation. It makes sense to hide it to give the user the feeling that he's
+ * actually moving it. Note that the source element has also .dndDragging class.
+ */
+ .dropzone .dndDraggingSource {
+    display: none;
+}
+
+/**
+ * An element with .dndPlaceholder class will be added as child of the dnd-list
+ * while the user is dragging over it.
+ */
+ .dropzone .dndPlaceholder {
+    background-color: #ddd;
+    min-height: 42px;
+    display: block;
+    position: relative;
+}
+
+/***************************** Element Selection *****************************/
+
+ .dropzone .selected {
+    background-color: #dff0d8 !important;
+}
+
+ .dropzone .selected .box {
+    border-color: #d6e9c6;
+}
+
+
+/***************************** Element type specific styles *****************************/
+
+ .dropzone .item {
+    padding: 10px 15px;
+}
+
+ .dropzone .container-element {
+    margin: 10px;
+}
+
+
+/***************************** Toolbox *****************************/
+
+ .toolbox ul {
+    list-style: none;
+    padding-left: 0px;
+    cursor: move;
+}
+
+ .toolbox button {
+    margin: 5px;
+    width: 123px;
+    opacity: 1.0;
+}
+
+ .toolbox .dndDragging {
+    opacity: 0.5;
+}
+
+ .toolbox .dndDraggingSource {
+    opacity: 1.0;
+}
+
+/***************************** Trashcan *****************************/
+
+ .trashcan ul {
+    list-style: none;
+    padding-left: 0px;
+}
+
+ .trashcan img {
+    width: 100%;
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    filter: grayscale(100%);
+}
+
+ .trashcan .dndDragover img {
+    width: 100%;
+    -webkit-filter: none;
+    -moz-filter: none;
+    filter: none;
+}
+
+ .trashcan .dndPlaceholder {
+    display: none;
+}