refactor(checkboxes,radios): change styling

use new stylying for checkboxes and radios
sensebox · Feb 10, 2018 · ec8f5be · ec8f5be
1 parent 101bfa8
commit ec8f5be
Show file tree

Hide file tree

Showing 5 changed files with 214 additions and 110 deletions.
diff --git a/app/styles/main.css b/app/styles/main.css
@@ -339,6 +339,98 @@ a:hover {
 .checkbox-success input[type="checkbox"]:checked + label::after {
   color: #fff; }
 
+  .radio {
+    padding-left: 20px; }
+    .radio label {
+      display: inline-block;
+      position: relative;
+      padding-left: 5px; }
+      .radio label::before {
+        content: "";
+        display: inline-block;
+        position: absolute;
+        width: 17px;
+        height: 17px;
+        left: 0;
+        margin-left: -20px;
+        border: 1px solid #cccccc;
+        border-radius: 50%;
+        background-color: #fff;
+        -webkit-transition: border 0.15s ease-in-out;
+        -o-transition: border 0.15s ease-in-out;
+        transition: border 0.15s ease-in-out; }
+      .radio label::after {
+        display: inline-block;
+        position: absolute;
+        content: " ";
+        width: 11px;
+        height: 11px;
+        left: 3px;
+        top: 3px;
+        margin-left: -20px;
+        border-radius: 50%;
+        background-color: #555555;
+        -webkit-transform: scale(0, 0);
+        -ms-transform: scale(0, 0);
+        -o-transform: scale(0, 0);
+        transform: scale(0, 0);
+        -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+        -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+        -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+        transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
+    .radio input[type="radio"] {
+      opacity: 0; }
+      .radio input[type="radio"]:focus + label::before {
+        outline: thin dotted;
+        outline: 5px auto -webkit-focus-ring-color;
+        outline-offset: -2px; }
+      .radio input[type="radio"]:checked + label::after {
+        -webkit-transform: scale(1, 1);
+        -ms-transform: scale(1, 1);
+        -o-transform: scale(1, 1);
+        transform: scale(1, 1); }
+      .radio input[type="radio"]:disabled + label {
+        opacity: 0.65; }
+        .radio input[type="radio"]:disabled + label::before {
+          cursor: not-allowed; }
+    .radio.radio-inline {
+      margin-top: 0; }
+
+  .radio-primary input[type="radio"] + label::after {
+    background-color: #428bca; }
+  .radio-primary input[type="radio"]:checked + label::before {
+    border-color: #428bca; }
+  .radio-primary input[type="radio"]:checked + label::after {
+    background-color: #428bca; }
+
+  .radio-danger input[type="radio"] + label::after {
+    background-color: #d9534f; }
+  .radio-danger input[type="radio"]:checked + label::before {
+    border-color: #d9534f; }
+  .radio-danger input[type="radio"]:checked + label::after {
+    background-color: #d9534f; }
+
+  .radio-info input[type="radio"] + label::after {
+    background-color: #5bc0de; }
+  .radio-info input[type="radio"]:checked + label::before {
+    border-color: #5bc0de; }
+  .radio-info input[type="radio"]:checked + label::after {
+    background-color: #5bc0de; }
+
+  .radio-warning input[type="radio"] + label::after {
+    background-color: #f0ad4e; }
+  .radio-warning input[type="radio"]:checked + label::before {
+    border-color: #f0ad4e; }
+  .radio-warning input[type="radio"]:checked + label::after {
+    background-color: #f0ad4e; }
+
+  .radio-success input[type="radio"] + label::after {
+    background-color: #5cb85c; }
+  .radio-success input[type="radio"]:checked + label::before {
+    border-color: #5cb85c; }
+  .radio-success input[type="radio"]:checked + label::after {
+    background-color: #5cb85c; }
+
 /* MAP PAGE
 -------------------------------------------------- */
 /* all stylings for map page */

diff --git a/app/views/account.box.edit.extensions.html b/app/views/account.box.edit.extensions.html
@@ -13,7 +13,9 @@ <h2 style="margin-top: 0px; margin-bottom: 0px">{{'EDIT_EXTENSIONS'|translate}}<
   <hr>
 
   <div>
-    <input type="checkbox" name="addon" id="optionsRadios1" ng-true-value="'Feinstaub'" ng-false-value="''" ng-model="extensions.extensions.feinstaub.id" ng-disabled="extensions.extensions.feinstaub.disabled">
-    {{'EXTENSIONS_FINE_PARTICULATE_MATTER'|translate}}
+    <div class="checkbox checkbox-success checkbox-inline">
+      <input type="checkbox" name="addon" id="extension1" ng-true-value="'Feinstaub'" ng-false-value="''" ng-model="extensions.extensions.feinstaub.id" ng-disabled="extensions.extensions.feinstaub.disabled">
+      <label for="extension1"> {{'EXTENSIONS_FINE_PARTICULATE_MATTER'|translate}} </label>
+    </div>
   </div>
 </form>
diff --git a/app/views/account.box.edit.mqtt.html b/app/views/account.box.edit.mqtt.html
@@ -14,8 +14,10 @@ <h2 style="margin-top: 0px; margin-bottom: 0px">{{'EDIT_MQTTOPTIONS'|translate}}
 
   <div uib-alert class="alert-warning" ng-bind-html="'MQTT_DESCRIPTION'|translate"></div>
 
-  <input type="checkbox" ng-model="mqtt.settings.enabled">
-  <label>{{ 'MQTT_ENABLE' | translate }}</label>
+  <div class="checkbox checkbox-success checkbox-inline">
+    <input type="checkbox" id="mqtt-enabled" ng-model="mqtt.settings.enabled">
+    <label for="mqtt-enabled">{{ 'MQTT_ENABLE' | translate }}</label>
+  </div>
 
   <!-- MQTT URL -->
   <div ng-class="{'has-error': mqttSettings.mqttURL.$invalid, 'has-success': mqttSettings.mqttURL.$valid }">
@@ -32,15 +34,15 @@ <h2 style="margin-top: 0px; margin-bottom: 0px">{{'EDIT_MQTTOPTIONS'|translate}}
   <!-- MQTT MessageFormat -->
   <div ng-class="{'has-error': mqttSettings.mqttMessageFormat.$invalid, 'has-success': mqttSettings.mqttMessageFormat.$valid }">
     <label for="mqttMessageFormat">{{'MQTT_MESSAGEFORMAT'|translate}}*</label>
-    <div class="radio">
-      <label>
-        <input type="radio" name="mqttMessageFormat" id="optionsRadios1" value="json" ng-model="mqtt.settings.messageFormat" ng-required="mqtt.settings.enabled" ng-disabled="!mqtt.settings.enabled">
+    <div class="radio radio-success">
+      <input type="radio" name="mqttMessageFormat" id="messageformat-json" value="json" ng-model="mqtt.settings.messageFormat" ng-required="mqtt.settings.enabled" ng-disabled="!mqtt.settings.enabled">
+      <label for="messageformat-json">
         {{'MQTT_MESSAGEFORMAT_JSON'|translate}}
       </label>
     </div>
-    <div class="radio">
-      <label>
-        <input type="radio" name="mqttMessageFormat" id="optionsRadios2" value="csv" ng-model="mqtt.settings.messageFormat" ng-required="mqtt.settings.enabled" ng-disabled="!mqtt.settings.enabled">
+    <div class="radio radio-success">
+      <input type="radio" name="mqttMessageFormat" id="messageformat-csv" value="csv" ng-model="mqtt.settings.messageFormat" ng-required="mqtt.settings.enabled" ng-disabled="!mqtt.settings.enabled">
+      <label for="messageformat-csv">
         {{'MQTT_MESSAGEFORMAT_CSV'|translate}}
       </label>
     </div>

diff --git a/app/views/explore2.sidebar.download.html b/app/views/explore2.sidebar.download.html
@@ -136,8 +136,12 @@
     <br>
     <label>{{ "DOWNLOAD_SELECTFILEFORMAT" | translate }}</label>
     <br>
-    <input ng-model="download.downloadform.format" type="radio" name="format" id="formatCSV" value="CSV" checked>
-    <label for="formatCSV">CSV</label>
+    <div class="radio radio-success">
+      <input type="radio" ng-model="download.downloadform.format" name="formatCSV" id="formatCSV" value="CSV" checked="">
+      <label for="formatCSV">
+          CSV
+      </label>
+    </div>
   <br>
   <div uib-alert class="alert-info" ng-bind-html="'DOWNLOAD_LICENSE'|translate"></div>
   <div uib-alert class="alert-warning">