css

Author: VeraZab

src/components/fields/RectanglePositioner.js

@@ -6,7 +6,7 @@ import ResizableRect from 'react-resizable-rotatable-draggable';
 import RadioBlocks from '../widgets/RadioBlocks';
 import DualNumeric from './DualNumeric';
 
-const maxWidth = 276;
+const maxWidth = 280;
 const gridRes = 8;
 
 class UnconnectedRectanglePositioner extends Component {
@@ -58,8 +58,8 @@ class UnconnectedRectanglePositioner extends Component {
     const fieldWidthPx = Math.min(maxWidth, maxWidth / aspectRatio);
     const fieldHeightPx = Math.min(maxWidth, maxWidth * aspectRatio);
 
-    const width = fieldWidthPx * (x[1] - x[0]);
-    const height = fieldHeightPx * (y[1] - y[0]);
+    const width = fieldWidthPx * (x[1] - x[0]) - 6; // eslint-disable-line
+    const height = fieldHeightPx * (y[1] - y[0]) - 6; // eslint-disable-line
     const left = fieldWidthPx * x[0];
     const top = fieldHeightPx * (1 - y[1]);
 

src/components/widgets/TextInput.js

@@ -18,7 +18,7 @@ export default class TextInput extends Component {
   render() {
     return (
       <EditableText
-        className={`text-input ${this.props.editableClassName}`}
+        className={`text-input ${this.props.editableClassName ? this.props.editableClassName : ''}`}
         placeholder={this.props.placeholder}
         text={this.state.value}
         type="text"

src/styles/components/containers/_fold.scss

@@ -10,11 +10,10 @@
     font-size: var(--font-size-base);
     border: 1px solid var(--fold-header-border-color-closed);
     background-color: var(--fold-header-background-closed);
-    height: 15px;
+    height: 30px;
     border-radius: var(--border-radius);
     text-shadow: var(--text-shadow-dark-ui);
-    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out,
-      border 0.1s ease-in-out;
+    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, border 0.1s ease-in-out;
 
     &:hover {
       cursor: pointer;

src/styles/components/containers/_menupanel.scss

@@ -19,7 +19,7 @@
       display: block;
     }
     // gets overridden by user agent stylesheet otherwise
-    width: 15px !important;
+    width: 19px !important;
     height: 15px !important;
     fill: var(--color-text-light) !important;
     padding-left: var(--spacing-quarter-unit);

src/styles/components/widgets/_datetimepicker.scss

@@ -0,0 +1,69 @@
+.datetimepicker-container {
+  width: 220px;
+
+  .mdi-icon {
+    width: 20px;
+    margin: 2px;
+  }
+  &__content {
+    margin-top: 5px;
+  }
+}
+
+.datetimepicker-container-input {
+  margin-top: -20px;
+}
+
+.datetimepicker-container-icons {
+  display: inline-block;
+  margin-top: 2px;
+  margin-left: 2px;
+}
+
+.datetimepicker-time-icon--selected,
+.datetimepicker-date-icon--selected {
+  fill: var(--color-accent);
+}
+
+.datetimepicker-time-icon:hover,
+.datetimepicker-date-icon:hover {
+  fill: #899aaf;
+}
+
+.datepicker-container-rce {
+  border: var(--border-default);
+}
+
+.bp3-html-select select,
+.bp3-select select {
+  padding: 0;
+}
+
+.bp3-datepicker-caption {
+  margin: 0 22px 2px;
+}
+
+div.bp3-datepicker-caption div.bp3-html-select.bp3-minimal.bp3-datepicker-month-select span {
+  right: 7px !important;
+}
+
+div.bp3-html-select.bp3-minimal.bp3-datepicker-year-select span {
+  right: 0px !important;
+}
+
+.bp3-datepicker .DayPicker-Day.DayPicker-Day--selected {
+  border-radius: 50%;
+  background-color: var(--color-accent);
+}
+
+.bp3-datepicker .DayPicker-Day:hover,
+.bp3-datepicker .DayPicker-Day:focus {
+  border-radius: 50%;
+  outline: none;
+}
+
+.bp3-html-select.bp3-minimal select:hover,
+.bp3-select.bp3-minimal select:hover,
+.bp3-button.bp3-minimal:hover {
+  background: none;
+}

src/styles/components/widgets/_main.scss

@@ -11,3 +11,4 @@
 @import 'trace-type-selector';
 @import 'dropzone';
 @import 'microtip';
+@import 'datetimepicker';

src/styles/components/widgets/_rangeslider.scss

@@ -11,7 +11,6 @@
   border: 1px solid var(--color-border-default);
   flex-grow: 1;
 
-
   &,
   .rangeslider__fill {
     display: block;
@@ -68,13 +67,12 @@
     background-color: var(--color-accent);
     border: var(--border-accent);
     border-radius: 10px;
-    transform: translateY(-1px);
     top: 0;
   }
   .rangeslider__handle {
     $size: 20px;
     width: $size/3;
-    height: $size*1.5;
+    height: $size * 1.5;
     border-radius: $size;
     top: 50%;
     transform: translate3d(-50%, -50%, 0);