first commit

helix/scss/array_visualization.scss

@@ -0,0 +1,285 @@
+@import 'variables';
+
+.array_information {
+  margin: 0 $form-section-margin;
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 50px);
+  border: 1px solid $array-visualization-background;
+
+  .item_title {
+    font-weight: bold;
+  }
+
+  .item_body {
+    color: $medium-blue;
+    font-weight: $semi-bold;
+  }
+
+  .array_summary {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 10px;
+    justify-content: flex-start;
+
+    .summary_item {
+      width: calc(50% - 50px);
+      margin: 10px 20px;
+    }
+  }
+
+  .subarray_summary {
+    h4 {
+      padding: 0 25px;
+      margin-bottom: 0;
+    }
+
+    #seismic_save {
+      color: white;
+      height: 50px;
+      font-weight: 400;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 20px;
+
+      .left_container {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        .seismic_save_message {
+          padding-left: 10px;
+        }
+      }
+
+      .circle {
+        border: 2px solid white;
+        border-radius: 50%;
+        height: 25px;
+        width: 25px;
+        font-weight: 500;
+        text-align: center;
+        line-height: 25px;
+      }
+
+      .dismiss_button {
+        height: 20px;
+      }
+
+      &.seismic_error {
+        background: $error-color;
+      }
+
+      &.seismic_success {
+        background: $success-color;
+      }
+    }
+  }
+}
+
+.system_data_upload {
+  display: flex;
+
+  &.initial_array_upload {
+    color: $circle-color;
+    width: 100%;
+    flex-direction: column;
+    border: 1px solid $light-border-color;
+    background: $off-white;
+    padding: 30px;
+    margin: 0 40px 50px;
+  }
+
+  &.change_array_form {
+    display: flex;
+    width: 100%;
+    border-bottom: 1px solid $array-visualization-background;
+    align-items: flex-end;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    .form_row {
+      flex-grow: 2;
+      padding: 0;
+
+      label {
+        font-weight: $semi-bold;
+      }
+    }
+
+    .button {
+      flex-grow: 1;
+      width: calc(50% - 100px);
+      margin: 20px;
+    }
+  }
+
+  .system_data_title {
+    align-self: center;
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 30px;
+  }
+
+  .upload_field {
+    align-self: center;
+    margin-top: 30px;
+    cursor: pointer;
+    text-align: center;
+
+    position: relative;
+    overflow: hidden;
+    width: auto;
+
+    .upload_field_text i {
+      margin-right: 10px;
+    }
+
+    .system_upload {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: 0;
+      padding: 0;
+      font-size: 20px;
+      cursor: pointer;
+      opacity: 0;
+      filter: alpha(opacity=0);
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
+
+.grey_line {
+  border: 1px solid $light-border-color;
+  width: calc(100% - 50px);
+  margin: 0 25px;
+  height: 0;
+}
+
+.array_visualization_header {
+  margin: 10px $form-section-margin 0;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  font-weight: 600;
+  padding-bottom: 10px;
+  align-items: center;
+
+  #zoom_level {
+    margin-right: 10px;
+  }
+
+  .seismic_anchor_control {
+    display: flex;
+
+    .seismic_control {
+      padding: 5px 10px;
+    }
+
+    a {
+      text-decoration: none;
+      width: auto;
+    }
+
+    .cancel_button {
+      color: $grey-text;
+      background: white;
+      font-size: 20px;
+    }
+
+    #add_seismic {
+      .icon-seismic-anchor {
+        color: $add-color;
+        border: 1px solid $add-color;
+        border-radius: 50%;
+      }
+    }
+
+    #remove_seismic {
+      .icon-seismic-anchor {
+        color: $remove-color;
+        border: 1px solid $remove-color;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  .overlay_toggle {
+    border: 1px solid $array-visualization-blue;
+    padding: 5px 10px;
+    margin: 0 10px;
+
+    &.overlay_active {
+      border: 3px solid $array-visualization-blue;
+    }
+  }
+
+  .header_action {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+    color: $array-visualization-blue;
+
+    .zoom_indicator {
+      background: $zoom-indicator-color;
+      width: 8px;
+      margin: 3px;
+      height: 20px;
+
+      &.zoom_active {
+        background: $array-visualization-blue;
+      }
+    }
+
+    .zoom_button {
+      $circle_size: 30px;
+
+      -webkit-border-radius: 7px;
+      -moz-border-radius: 7px;
+      border-radius: 50%;
+      border: 1px solid $array-visualization-blue;
+      width: $circle_size;
+      height: $circle_size;
+      font-size: 20px;
+      display: flex;
+      margin: 3px;
+      justify-content: center;
+      line-height: $circle_size;
+    }
+  }
+}
+
+#legend_container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: $form-section-margin;
+}
+
+.legend {
+  width: 50%;
+}
+
+.anchor_colors_legend {
+  padding: 15px;
+}
+
+canvas {
+  margin: 0 $form-section-margin;
+  border: 1px solid $array-visualization-background;
+}
+
+.array_summary_warning {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    width: 100%;
+    background-color: $warning-color;
+    border: 1px solid $circle-highlighted;
+    padding: 7px;
+}