WIP Financial statements.

client/src/style/objects/buttons.scss

@@ -30,7 +30,7 @@
   min-height: 32px;
   background-color: #E6EFFB;
   color: #555555;
-  box-shadow: 0 0 0;
+  box-shadow: 0 0 0 transparent;
 
   .form-group--select-list &{
     border-radius: 0;
@@ -38,7 +38,7 @@
     &,
     &:hover{
       background: #fff;
-      box-shadow: 0 0 0;  
+      box-shadow: 0 0 0 transparent;  
       border: 1px solid #ced4da;
     }
   }
@@ -53,7 +53,7 @@
 
     &,
     &:hover{
-      box-shadow: 0 0 0;
+      box-shadow: 0 0 0 transparent;
     }    
   }
 }

client/src/style/objects/form.scss

@@ -94,4 +94,110 @@ label{
   .#{$ns}-icon-caret-down{
     color: #8D8D8D;
   }
+}
+
+
+
+
+///@extend
+
+
+
+.#{$ns}-control {
+
+  input:checked ~ .#{$ns}-control-indicator {
+    box-shadow: 0 0 0 transparent;
+    background-color: transparent;
+    background-image: none;
+  }
+  &:hover input:checked ~ .#{$ns}-control-indicator {
+    box-shadow: 0 0 0 transparent;
+    background-color: transparent;
+  }
+  input:not(:disabled):active:checked ~ .#{$ns}-control-indicator {
+    box-shadow: 0 0 0 transparent;
+    background: transparent;
+  }
+  input:disabled:checked ~ .#{$ns}-control-indicator {
+    box-shadow: none;
+    background: transparent;
+  }
+
+  &.#{$ns}-disabled {
+    cursor: not-allowed;
+    color: $pt-text-color-disabled;
+  }
+
+  &.#{$ns}-inline {
+    display: inline-block;
+    margin-right: $pt-grid-size * 2;
+  }
+ 
+  .#{$ns}-control-indicator {
+    box-shadow: 0 0 0 transparent;
+    background-clip: padding-box;
+    background-color: transparent;
+    background-image: none;
+    width: 18px;
+    height: 18px;
+    
+    &::before {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &:hover .#{$ns}-control-indicator {
+    background-color: transparent;
+  }
+
+  input:not(:disabled):active ~ .#{$ns}-control-indicator {
+    box-shadow: 0 0 0 transparent;
+    background: transparent;
+  }
+ 
+  /*
+    Radio
+
+    Markup:
+    <label class="#{$ns}-control #{$ns}-radio {{.modifier}}">
+      <input type="radio" name="docs-radio-regular" {{:modifier}} />
+      <span class="#{$ns}-control-indicator"></span>
+      Radio
+    </label>
+
+    :checked  - Selected
+    :disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
+    .#{$ns}-align-right - Right-aligned indicator
+    .#{$ns}-large - Large
+
+    Styleguide radio
+  */
+  &.#{$ns}-radio {
+
+    .#{$ns}-control-indicator{
+      border: 2px solid #cecece;
+
+      &::before{
+        height: 14px;
+        width: 14px;
+      }
+    }
+
+    input:checked ~ .#{$ns}-control-indicator{
+      border-color: #137cbd;
+
+      &::before {
+        background-image: radial-gradient(#137cbd 40%, transparent 40%);
+      }
+    }
+
+    input:checked:disabled ~ .#{$ns}-control-indicator::before {
+      opacity: 0.5;
+    }
+
+    input:focus ~ .#{$ns}-control-indicator {
+      -moz-outline-radius: $control-indicator-size;
+    }
+  }
 }