From b2f78128a58698b2bfdaae836110f5113dc90acb Mon Sep 17 00:00:00 2001
From: nazanin1369 <nazanin1427@gmail.com>
Date: Sat, 21 May 2016 00:29:37 -0700
Subject: [PATCH] demo style update

---
 demo/main.css | 24 ++++++++++++++-------
 index.html    | 58 ++++++++++++++++++++++++++++-----------------------
 2 files changed, 49 insertions(+), 33 deletions(-)

diff --git a/demo/main.css b/demo/main.css
index f150f2c..d5caafc 100644
--- a/demo/main.css
+++ b/demo/main.css
@@ -1,3 +1,8 @@
+html, body {
+     max-width: 100%;
+    overflow-x: hidden;
+}
+
 body {
     color: #626262;
     font-family: "Segoe UI",Arial,sans-serif;
@@ -60,12 +65,8 @@ pre {
     border-radius: 4px;
 }
 
-.hljs {
-    background: none;
-}
-
 .container > nav {
-    margin: 0px 40px;
+    margin: 0px 70px;
 }
 
 .navbar-default .navbar-brand {
@@ -97,8 +98,8 @@ pre {
     padding: 60px 15px 40px;
     color: #fff;
     text-align: center;
-    background-color: #0A7C71;
-    background-image: linear-gradient(to bottom,#0A7C78 0,#0A7C75 100%);
+    background-color: #36bc98;
+    background-image: linear-gradient(to bottom,rgba(6, 99, 179, 0.81) 0,#36bc98 100%);
     background-repeat: repeat-x;
 }
 
@@ -108,6 +109,7 @@ pre {
 
 .bs-docs-header .container > p {
     color: #ccc;
+    letter-spacing: 1.5px;
 }
 
 .bs-docs-decs {
@@ -131,6 +133,14 @@ blockquote > label {
     font-size: 13px;
 }
 
+.form-control {
+    width: 50%;
+}
+
+form > fieldset > legend {
+    border: none;
+}
+
 /* gitter */
 .gitter-chat-embed {
   z-index: 99999;
diff --git a/index.html b/index.html
index 8581fcd..6dfd0e8 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.css"/>
 
     <!-- Highlight CSS-->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/color-brewer.min.css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/monokai-sublime.min.css">
 
     <link rel="stylesheet" href="demo/main.css"/>
 
@@ -264,14 +264,14 @@ <h2>Examples</h2>
             <fieldset>
                 <div class="m-b-20">
                     <legend>Form (Additions validation)</legend>
-                    <div class="input-group m-b-20">
+                    <div class="input-group m-b-20" style="width: 50%;">
                         <input type="text" class="form-control" validator="huei" name="huei" ng-model="form4.huei" placeholder="It's must be 'Huei Tan'" message-id="huei">
                         <span class="input-group-addon">With <a href="https://github.com/huei90/angular-validation#custom-function-huei" target="_blank">Function</a> </span>
 
                     </div>
                     <span id="huei"></span>
 
-                    <div class="input-group m-b-20">
+                    <div class="input-group m-b-20" style="width: 50%;">
                         <input type="text" class="form-control" validator="huei" name="noMsg" ng-model="form4.noMsg" no-validation-message="true" placeholder="It's must be 'Huei Tan'" message-id="noMsg">
                         <span class="input-group-addon">
                             <span ng-if="!Form4.noMsg.$valid">type: Huei Tan</span>
@@ -279,7 +279,7 @@ <h2>Examples</h2>
                         </span>
                     </div>
 
-                    <div class="input-group m-b-20">
+                    <div class="input-group m-b-20" style="width: 50%;">
                         <input type="text" class="form-control" validator="huei" name="canChange" huei-error-message="{{ form4.changeErrorMsg }}" ng-model="form4.canChange" placeholder="Type Wrong !!" message-id="canChange">
                         <span class="input-group-addon">
                             <span ng-if="!form4.show"><a href="javascript:void(0);" ng-click="form4.changeMsg();form4.show = true;">Change Error Msg</a></span>
@@ -387,7 +387,7 @@ <h2>Examples</h2>
                     <legend>Bootstrap DatePicker</legend>
                     <label>Required</label>
                     <div>
-                        <p class="input-group">
+                        <p class="input-group" style="width: 40%;">
                         <input type="text" class="form-control m-b-20" uib-datepicker-popup="dd-MMMM-yyyy" ng-model="form7.dt" is-open="form7.status.opened"  datepicker-options="form7.dateOptions" close-text="Close" validator="required" message-id="bootstrap"/>
 
                         <span class="input-group-btn">
@@ -407,30 +407,36 @@ <h2>Examples</h2>
             <fieldset>
                 <div class="m-b-20">
                     <legend>AngularJs ui-select</legend>
-                    <div class="row">
-                        <div class="col-xs-12">
-                            <label>Required, Selected: {{form8.country.selected}}</label>
-                        </div>
 
-                    <div class="col-xs-12">
-                        <ui-select ng-model="form8.country.selected" theme="bootstrap"
-                                ng-disabled="form8.disabled"
-                                style="width: 300px;"
-                                validator="required"
-                                message-id="ui-select">
-                                <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
-                                <ui-select-choices repeat="country in form8.countries" refresh-delay="0">
-                                <span ng-bind-html="country.name"></span>
-                                <small ng-bind-html="country.code"></small>
-                                </ui-select-choices>
-                        </ui-select>
-                        <span id="ui-select"></span>
-                    </div>
+                        <div class="row">
+                            <div class="col-xs-12">
+                                <label>Required, Selected: {{form8.country.selected}}</label>
+                            </div>
+                            <div class="col-xs-6">
+                                <ui-select ng-model="form8.country.selected" theme="bootstrap"
+                                        ng-disabled="form8.disabled"
+                                        style="width: 100%;"
+                                        validator="required"
+                                        message-id="ui-select">
+                                        <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
+                                        <ui-select-choices repeat="country in form8.countries" refresh-delay="0">
+                                        <span ng-bind-html="country.name"></span>
+                                        <small ng-bind-html="country.code"></small>
+                                        </ui-select-choices>
+                                </ui-select>
+                                <br/>
+                                 <span id="ui-select"></span>
+
+                            </div>
+                            <div class="col-xs-4">
+                                <button class="btn btn-primary" ng-click="form8.clear()">Clear ng-model</button>
+
+                            </div>
+
+                        </div>
                     </div>
                 </div>
-                 <div class="btn-group" role="group">
-                     <button class="btn btn-primary" ng-click="form8.clear()">Clear ng-model</button>
-                </div>
+
             </fieldset>
         </form>
       </div>