styling: extract css from juci-inputs to inputs.less
authorReidar Cederqvist <reidar.cederqvist@gmail.com>
Thu, 22 Feb 2018 09:52:12 +0000 (10:52 +0100)
committerReidar Cederqvist <reidar.cederqvist@gmail.com>
Wed, 21 Mar 2018 12:13:34 +0000 (13:13 +0100)
juci/src/css/colors.less
juci/src/css/juci-input-radio.less [deleted file]
juci/src/widgets/juci-input-dhcp-options.html
juci/src/widgets/juci-input-ipv4-address.html
juci/src/widgets/juci-input-port.html
juci/src/widgets/juci-input-range.html

index 217eb91..efc84a1 100644 (file)
@@ -1,29 +1,48 @@
+// main colors to be used in this file only
+@color-border: #ccc;
+@white: #fff;
+@color-text-main: #66989c;
+@color-text-link: #34485d;
+@color-dark: #000;
+@color-main-1: #E62f39;
+@color-main-2: #f1c100;
+@color-disable: #444;
+
+// state colors
 @theme-success-color: #5cb85c;
-@theme-primary-color: #F1C100;
 @theme-warning-color: #ffa500;
-@theme-error-color: #E62f39;
-@theme-disabled-color: #34485d;
-@theme-primary-text-color: #FFF;
-@theme-heading-color: #66989C;
-@theme-link-color: #34485d;
-@theme-detail-color: #E62f39;
-@theme-error-background-color: #f2dede;
-@theme-error-border-color: #ebccd1;
-@theme-div-error-color: #a94442;
-@theme-footer-gradient-start: #d6d6d6;
-@theme-footer-gradient-end: #f9f9f9;
-@theme-footer-background: white;//darken(@theme-footer-base-color-start, 10%);
+@theme-primary-color: @color-main-2;
+@theme-error-color: @color-main-1;
+@theme-disabled-color: @color-disable;
+
+// specific colors (try to use main or state colors here)
+@theme-primary-text-color: @white;
+@theme-heading-color: @color-text-main;
+@theme-link-color: @color-text-link;
+@theme-detail-color: @theme-warning-color;
+@theme-error-background-color: lighten(@theme-error-color, 37%); //#fad7d9
+@theme-error-border-color: lighten(@theme-error-color, 33%); //#f8c5c8
+@theme-div-error-color: @theme-error-color;
+
+@theme-footer-gradient-start: darken(@white, 16%); //#d6d6d6
+@theme-footer-gradient-end: darken(@white, 2.5%); //#f9f9f9
+@theme-footer-background: @white;
 @theme-footer-gradient-middle: 27%;
-@theme-border-color: #ccc;
-@theme-shadow-color: #bbb;
-@theme-navigation-text-color: #444;
-@theme-navigation-background: white;
-@theme-navigation-active-background: white;
-@theme-navigation-active-background-mobile: #ddd;
-@theme-navigation-active-color: #e62f39;
-@theme-navigation-active-overline: #e62f39;
-@theme-navigation-color: #111;
-@theme-navigation-toggle-background: #ddd;
+
+@theme-border-color: @color-border;
+@theme-shadow-color: darken(@color-border, 6.5); //#bbb
+@theme-navigation-text-color: @color-disable;
+@theme-navigation-background: @white;
+@theme-navigation-active-background: @white;
+@theme-navigation-active-background-mobile: darken(@color-border, 6.5); //#bbb
+@theme-navigation-active-color: @color-main-1;
+@theme-navigation-active-overline: @color-main-1;
+@theme-navigation-color: lighten(@color-dark, 6.5);
+@theme-navigation-toggle-background: darken(@color-border, 6.5); //#bbb
 @theme-overview-status-background: rgba(0,0,0,0.8);
-@theme-overview-text-color: white;
-@theme-overview-background-color: black;
+@theme-overview-text-color: @white;
+@theme-overview-background-color: @color-dark;
+@theme-input-dhcp-border: @color-border;
+@theme-input-dhcp-color: lighten(@color-disable, 25%); //#848484
+@theme-input-dhcp-well-border: darken(@white, 10%); //#e6e6e6
+@theme-input-dhcp-well:  lighten(@color-disable, 25%); //#848484
diff --git a/juci/src/css/juci-input-radio.less b/juci/src/css/juci-input-radio.less
deleted file mode 100644 (file)
index dcf1789..0000000
+++ /dev/null
@@ -1,14 +0,0 @@
-.radio-info input[type="radio"] {
-       cursor: pointer; 
-}
-
-.radio-info input[type="radio"] + label::after {
-       background-color: #64bd63;
-}
-.radio-info input[type="radio"]:checked + label::before {
-       border-color: #808080;
-}
-.radio-info input[type="radio"]:checked + label::after {
-       background-color: #64bd63;
-}
-
index fc90523..0600d11 100644 (file)
@@ -1,12 +1,12 @@
 <div>
        <div class="input-group">
-               <input class="form-control" type="number" ng-model="data.number" placeholder="{{'ID'|translate}}" style="width: 35% !important;"/>
-               <input class="form-control" ng-model="data.value" placeholder="{{'Option'|translate}}" style="width: 50% !important"/>
-               <button class="btn btn-default pull-left" style="width: 15% !important" ng-click="addDHCPOption()"><i class="fa fa-plus"></i></button>
+               <input class="form-control dhcp-input-id" type="number" ng-model="data.number" placeholder="{{'ID'|translate}}" />
+               <input class="form-control dhcp-input-option" ng-model="data.value" placeholder="{{'Option'|translate}}" />
+               <button class="btn btn-default pull-left dhcp-input-add" ng-click="addDHCPOption()"><i class="fa fa-plus"></i></button>
        </div>
-       <div class="input-group" style="margin-top: 5px; width: 100%" ng-repeat="d in list track by $index">
-               <div class="well-sm form-control" style="width: 35% !important; border:1px solid #e3e3e3; color:#858585">{{d.slice(0,d.indexOf(','))}}</div>
-               <div class="well-sm form-control" style="width: 50% !important; border:1px solid #e3e3e3; color:#858585">{{d.slice(d.indexOf(',')+1)}}</div>
-               <button class="btn btn-default pull-left" style="width: 15% !important" ng-click="deleteDHCPOption(d)"><i class="fa fa-trash-o"></i></button>
+       <div class="input-group dhcp-input-entries" ng-repeat="d in list track by $index">
+               <div class="well-sm form-control dhcp-input-well-id" >{{d.slice(0,d.indexOf(','))}}</div>
+               <div class="well-sm form-control dhcp-input-well-option">{{d.slice(d.indexOf(',')+1)}}</div>
+               <button class="btn btn-default pull-left dhcp-input-add" ng-click="deleteDHCPOption(d)"><i class="fa fa-trash-o"></i></button>
        </div>
 </div>
index 32e0b4c..7e173f5 100644 (file)
@@ -1,10 +1,10 @@
-<div class="col-md-12" style="white-space: nowrap;">
-       <div ng-repeat="part in [0, 1, 2, 3]" style="float: left;">
-               <div style="width: 3.8em; float:left;" class="juci-input-ipv4">
-                       <input type="text" style="min-width: 3.8em !important;" juci-input-ipv4-auto-move-on-dot ng-paste="onPaste($event)" ng-copy="onCopy($event)" class="form-control no-padding text-center" ng-change="updateModel()" ng-model="data.parts[part]" ng-model-options='{ getterSetter: true }' placeholder="{{placeholders[part]}}" maxlength="3" />
+<div class="col-md-12 ws-nowrap">
+       <div ng-repeat="part in [0, 1, 2, 3]" class="pull-left">
+               <div class="juci-input-ipv4 pull-left input-ip4-address-width">
+                       <input type="text" juci-input-ipv4-auto-move-on-dot ng-paste="onPaste($event)" ng-copy="onCopy($event)" class="form-control no-padding text-center input-ip4-address-width" ng-change="updateModel()" ng-model="data.parts[part]" ng-model-options='{ getterSetter: true }' placeholder="{{placeholders[part]}}" maxlength="3" />
                </div>
-               <div style="float:left;" ng-show="part != 3">
-                       <span style="line-height: 3em; padding-left: 0.5em; padding-right: 0.5em;">.</span>
+               <div class="pull-left" ng-show="part != 3">
+                       <span class="input-ip4-address-dot">.</span>
                </div>
        </div>
 </div>
index 3226509..ae634de 100644 (file)
@@ -2,17 +2,17 @@
        <div ng-show="portRange">
                <ul class="list-inline">
                        <li>
-                               <input type="text" name="startPort" ng-model="startPort" class="form-control" style="width: 80px" maxlength="5" placeholder="{{'Start port'|translate}}" />
+                               <input type="text" name="startPort" ng-model="startPort" class="form-control input-port-width" maxlength="5" placeholder="{{'Start port'|translate}}" />
                        </li>
                        <li>
                                to
                        </li>
                        <li>
-                               <input type="text" name="startPort" ng-model="endPort" class="form-control" style="width: 80px" maxlength="5"  placeholder="{{'End port'|translate}}" />
+                               <input type="text" name="startPort" ng-model="endPort" class="form-control input-port-width" maxlength="5"  placeholder="{{'End port'|translate}}" />
                        </li>
                </ul>
        </div>
        <div ng-show="!portRange">
-               <input type="text" class="form-control" ng-model="port" placeholder="{{'Port (1-65535)'|translate}}" style="width: 80px" maxlength="5" />
+               <input type="text" class="form-control input-port-width" ng-model="port" placeholder="{{'Port (1-65535)'|translate}}" maxlength="5" />
        </div>
 </div>
index 12ca1aa..4cc1c67 100644 (file)
@@ -1,10 +1,10 @@
 <div>  
        <div class="input-group">
-               <button ng-click="expandSizeRange()" class="btn btn-sm btn-default" style="width:26px; height:34px; float:right;">
+               <button ng-click="expandSizeRange()" class="btn btn-sm btn-default expand-size-range pull-right">
                        <i class="fa fa-caret-left" ng-show="data.isRange"></i>
                        <i class="fa fa-caret-right" ng-show="!data.isRange"></i>
                </button>
-               <input type="number" ng-model="data.to" class="form-control" placeholder="To" style="max-width: 120px !important; float:right;" ng-show="data.isRange"/>
-               <input type="number" ng-model="data.from" class="form-control" placeholder="From" style="max-width: 120px !important; float:right;"/>
+               <input type="number" ng-model="data.to" class="form-control input-range-width pull-right" placeholder="To" ng-show="data.isRange"/>
+               <input type="number" ng-model="data.from" class="form-control input-range-width pull-right" placeholder="From" />
        </div>
 </div>