Skip to content

Commit 95a130b

Browse files
andreareginatoandreareginato
committed
Added CSS styles examples
1 parent b37186f commit 95a130b

File tree

3 files changed

+101
-30
lines changed

3 files changed

+101
-30
lines changed

‎index.html

Lines changed: 95 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<title>oauth-ng | AngularJS directive for OAuth 2.0</title>
55
<link rel="stylesheet" href="public/style.css">
6+
<link rel="stylesheet" href="public/oauth-buttons.css">
67
<link rel="stylesheet" href="public/icons/css/slate.css">
78
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Italiana&amp;subset=latin">
89
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
@@ -404,40 +405,121 @@ <h1 id="templates">Customizations</h1>
404405
<h2>Custom CSS</h2>
405406

406407
<p>
407-
By default the directive is visible as a link. To improve its visual style add some
408-
custom CSS. Below you can find a couple of predefined styles you can copy and past
409-
to your project.
408+
By default the directive is a simple link. To improve its visual style add some CSS.
410409
</p>
411410

412-
<table class="table table-labeled">
413-
<tbody class="smaller-titles">
411+
<table class="table button">
412+
<tbody>
414413
<tr>
415414
<td class="parameter">
416-
<span>Default</span>
417-
</td>
418-
<td>
415+
<span class="title">
416+
Default
417+
</span>
418+
</td>
419+
<td class="parameter" style="text-align:right;">
420+
<span>
421+
(no extra CSS required)
422+
</span>
423+
</td>
424+
</tr>
425+
<tr>
426+
<td class="parameter">
427+
<span>Logged out</span>
419428
</td>
420429
<td>
421-
Source Code &lt;&gt;
430+
<span class="oauth">
431+
<a href="javascript:void(0)" class="logged-out">Sign In</a> <br>
432+
</span>
422433
</td>
423434
</tr>
424435
<tr>
425436
<td class="parameter">
426-
<span>Blue Button</span>
437+
<span>Logged in</span>
427438
</td>
428439
<td>
440+
<span class="oauth">
441+
<a href="javascript:void(0)" class="logged-in">Logout Alice</a>
442+
</span>
443+
</td>
444+
</tr>
445+
<tr>
446+
<td class="parameter">
447+
<span>Access denied</span>
429448
</td>
430449
<td>
431-
Source Code &lt;&gt;
450+
<span class="oauth">
451+
<a href="javascript:void(0)" class="denied">Access denied. Try again.</a>
452+
</span>
432453
</td>
433454
</tr>
434455
</tbody>
435-
</table>
456+
</table>
457+
458+
<table class="table button blue-button">
459+
<tbody>
460+
<tr>
461+
<td class="parameter">
462+
<span class="title">
463+
Blue button style
464+
</span>
465+
</td>
466+
<td class="parameter" style="text-align:right;">
467+
<span>
468+
<a href="https://gist.github.com/andreareginato/06a454d76ad619bb4f9f" target="blank">&lt;Download CSS&gt;</a>
469+
</span>
470+
</td>
471+
</tr>
472+
<tr>
473+
<td class="parameter">
474+
<span>Logged out</span>
475+
</td>
476+
<td>
477+
<span class="oauth">
478+
<a href="javascript:void(0)" class="logged-out">Sign In</a>
479+
</span>
480+
</td>
481+
</tr>
482+
<tr>
483+
<td class="parameter">
484+
<span>Logged in</span>
485+
</td>
486+
<td>
487+
<span class="oauth">
488+
<a href="javascript:void(0)" class="logged-in">Logout Alice</a> <br>
489+
</span>
490+
</td>
491+
</tr>
492+
<tr>
493+
<td class="parameter">
494+
<span>Access denied</span>
495+
</td>
496+
<td>
497+
<span class="oauth">
498+
<a href="javascript:void(0)" class="denied">Access denied. Try again.</a>
499+
</span>
500+
</td>
501+
</tr>
502+
</tbody>
503+
</table>
504+
505+
<p>
506+
All CSS rules applies to the following HTML structure.
507+
</p>
508+
509+
<pre><code><xmp><span class="oauth">
510+
<a href="#" class="logged-out">Sign In</a>
511+
<a href="#" class="logged-in">Logout Alice</a>
512+
<a href="#" class="denied">Access denied. Try again.</a>
513+
</span></xmp></code></pre>
436514

437515
<p>
438-
If you have a new one add it to the <a href="">docs repository</a>.
516+
It's easy to create your own. Base all of your rules on the <code>oauth</code> class
517+
or checkout existing CSS definitions to better understand how it works
518+
(e.g. the <a href="https://gist.github.com/andreareginato/06a454d76ad619bb4f9f" target="blank">blue button CSS</a>).
439519
</p>
440520

521+
522+
441523
</div>
442524
</section>
443525

‎public/oauth.css renamed to ‎public/oauth-buttons.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.blue-button .oauth a {
2+
text-decoration: none;
23
background: #239cbb;
34
box-sizing: border-box;
45
min-height: 35px;

‎public/style.css

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,7 @@ ul.task-list .task-list-item-checkbox {
232232

233233
table {
234234
margin: 40px 0;
235+
width: 100%;
235236
}
236237

237238
table tr th {
@@ -272,25 +273,12 @@ table span.info {
272273
font-weight: 200;
273274
}
274275

275-
276-
.table-labeled .label {
277-
padding: 0;
278-
}
279-
280-
.table-labeled .label {
281-
border-radius: 2px;
282-
font-size: 12px;
283-
font-weight: 400;
284-
line-height: 23px;
285-
padding: 3px 6px 2px;
276+
table.button .title {
286277
text-transform: uppercase;
287-
background: #eee;
288-
border: 1px solid #ddd;
289-
color: #333;
278+
font-weight: 600;
290279
}
291280

292-
.table-labeled .link {
293-
background: #E5F4FF;
294-
border: 1px solid #C5EAFF;
281+
table.button .parameter {
282+
width: 100px;
295283
}
296284

0 commit comments

Comments
 (0)