Skip to content

Commit b2f7812

Browse files
committed
demo style update
1 parent af3e01b commit b2f7812

2 files changed

Lines changed: 49 additions & 33 deletions

File tree

demo/main.css

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
html, body {
2+
max-width: 100%;
3+
overflow-x: hidden;
4+
}
5+
16
body {
27
color: #626262;
38
font-family: "Segoe UI",Arial,sans-serif;
@@ -60,12 +65,8 @@ pre {
6065
border-radius: 4px;
6166
}
6267

63-
.hljs {
64-
background: none;
65-
}
66-
6768
.container > nav {
68-
margin: 0px 40px;
69+
margin: 0px 70px;
6970
}
7071

7172
.navbar-default .navbar-brand {
@@ -97,8 +98,8 @@ pre {
9798
padding: 60px 15px 40px;
9899
color: #fff;
99100
text-align: center;
100-
background-color: #0A7C71;
101-
background-image: linear-gradient(to bottom,#0A7C78 0,#0A7C75 100%);
101+
background-color: #36bc98;
102+
background-image: linear-gradient(to bottom,rgba(6, 99, 179, 0.81) 0,#36bc98 100%);
102103
background-repeat: repeat-x;
103104
}
104105

@@ -108,6 +109,7 @@ pre {
108109

109110
.bs-docs-header .container > p {
110111
color: #ccc;
112+
letter-spacing: 1.5px;
111113
}
112114

113115
.bs-docs-decs {
@@ -131,6 +133,14 @@ blockquote > label {
131133
font-size: 13px;
132134
}
133135

136+
.form-control {
137+
width: 50%;
138+
}
139+
140+
form > fieldset > legend {
141+
border: none;
142+
}
143+
134144
/* gitter */
135145
.gitter-chat-embed {
136146
z-index: 99999;

index.html

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.css"/>
3838

3939
<!-- Highlight CSS-->
40-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/color-brewer.min.css"/>
40+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/monokai-sublime.min.css">
4141

4242
<link rel="stylesheet" href="demo/main.css"/>
4343

@@ -264,22 +264,22 @@ <h2>Examples</h2>
264264
<fieldset>
265265
<div class="m-b-20">
266266
<legend>Form (Additions validation)</legend>
267-
<div class="input-group m-b-20">
267+
<div class="input-group m-b-20" style="width: 50%;">
268268
<input type="text" class="form-control" validator="huei" name="huei" ng-model="form4.huei" placeholder="It's must be 'Huei Tan'" message-id="huei">
269269
<span class="input-group-addon">With <a href="https://github.com/huei90/angular-validation#custom-function-huei" target="_blank">Function</a> </span>
270270

271271
</div>
272272
<span id="huei"></span>
273273

274-
<div class="input-group m-b-20">
274+
<div class="input-group m-b-20" style="width: 50%;">
275275
<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">
276276
<span class="input-group-addon">
277277
<span ng-if="!Form4.noMsg.$valid">type: Huei Tan</span>
278278
<span ng-if="Form4.noMsg.$valid"><a href="https://github.com/huei90/angular-validation#no-validation-message" target="_blank">no-validation-message</a></span>
279279
</span>
280280
</div>
281281

282-
<div class="input-group m-b-20">
282+
<div class="input-group m-b-20" style="width: 50%;">
283283
<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">
284284
<span class="input-group-addon">
285285
<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>
387387
<legend>Bootstrap DatePicker</legend>
388388
<label>Required</label>
389389
<div>
390-
<p class="input-group">
390+
<p class="input-group" style="width: 40%;">
391391
<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"/>
392392

393393
<span class="input-group-btn">
@@ -407,30 +407,36 @@ <h2>Examples</h2>
407407
<fieldset>
408408
<div class="m-b-20">
409409
<legend>AngularJs ui-select</legend>
410-
<div class="row">
411-
<div class="col-xs-12">
412-
<label>Required, Selected: {{form8.country.selected}}</label>
413-
</div>
414410

415-
<div class="col-xs-12">
416-
<ui-select ng-model="form8.country.selected" theme="bootstrap"
417-
ng-disabled="form8.disabled"
418-
style="width: 300px;"
419-
validator="required"
420-
message-id="ui-select">
421-
<ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
422-
<ui-select-choices repeat="country in form8.countries" refresh-delay="0">
423-
<span ng-bind-html="country.name"></span>
424-
<small ng-bind-html="country.code"></small>
425-
</ui-select-choices>
426-
</ui-select>
427-
<span id="ui-select"></span>
428-
</div>
411+
<div class="row">
412+
<div class="col-xs-12">
413+
<label>Required, Selected: {{form8.country.selected}}</label>
414+
</div>
415+
<div class="col-xs-6">
416+
<ui-select ng-model="form8.country.selected" theme="bootstrap"
417+
ng-disabled="form8.disabled"
418+
style="width: 100%;"
419+
validator="required"
420+
message-id="ui-select">
421+
<ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
422+
<ui-select-choices repeat="country in form8.countries" refresh-delay="0">
423+
<span ng-bind-html="country.name"></span>
424+
<small ng-bind-html="country.code"></small>
425+
</ui-select-choices>
426+
</ui-select>
427+
<br/>
428+
<span id="ui-select"></span>
429+
430+
</div>
431+
<div class="col-xs-4">
432+
<button class="btn btn-primary" ng-click="form8.clear()">Clear ng-model</button>
433+
434+
</div>
435+
436+
</div>
429437
</div>
430438
</div>
431-
<div class="btn-group" role="group">
432-
<button class="btn btn-primary" ng-click="form8.clear()">Clear ng-model</button>
433-
</div>
439+
434440
</fieldset>
435441
</form>
436442
</div>

0 commit comments

Comments
 (0)