less/indicators.less

@@ -1,3 +1,14 @@
+@section-container-background: @global-inverse-color;
+@section-container-border: @global-border-width solid @global-border;
+@section-container-margin-top: @global-font-size + 2*@global-xsmall-gutter;
+@section-tab-padding: @global-xsmall-gutter @global-gutter;
+@section-tab-background: @muted-color;
+@section-tab-border: @global-border-width solid @gray-300;
+@section-tab-color: @placeholder-color;
+@section-tab-active-color: @global-primary-background;
+@section-tab-active-background: @section-container-background;
+@section-tab-width: @width-small-width;
+
 .number-preview {
   border: @global-border-width solid @global-border;
   background: transparent;
@@ -66,3 +77,46 @@
     overflow: auto;
   }
 }
+
+.section-container:extend(.uk-padding) {
+  background: @section-container-background;
+  border: @section-container-border;
+  position: relative;
+  margin-top: @section-container-margin-top + @global-large-margin;
+
+  ul.tabs {
+    position: absolute;
+    top: -@section-container-margin-top - @global-border-width;
+    left: 0;
+    display: flex;
+    list-style: none;
+    padding-left: 0;
+    font-size: @global-small-font-size;
+
+    & > li:extend(.clickable) {
+      padding: @section-tab-padding;
+      background: @section-tab-background;
+      color: @section-tab-color;
+      border: @section-tab-border;
+      border-bottom: none;
+      height: @global-font-size;
+      line-height: @global-font-size;
+      margin-left: -@global-border-width;
+      width: @section-tab-width;
+
+      &:first-child {
+        border-top-left-radius: @global-small-border-radius;
+      }
+
+      &:last-child {
+        border-top-right-radius: @global-small-border-radius;
+      }
+
+      &.uk-active:extend(.uk-text-bold) {
+        background: @section-tab-active-background;
+        border-bottom: @section-tab-active-background;
+        color: @section-tab-active-color;
+      }
+    }
+  }
+}