Skip to content

Commit b673101

Browse files
ZiyadskZiyadsk
committed
added badges/tags
1 parent 104caac commit b673101

4 files changed

Lines changed: 241 additions & 111 deletions

File tree

‎css/relax.css‎

Lines changed: 94 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
/* tags */
22
body
33
{
4+
--color-green : #07b57a;
5+
--color-red : #ff3860;
6+
--color-blue : #2196f3;
7+
--color-black : #222;
8+
--color-yellow : #ffdd57 ;
49
font-family: "helvetica neue" ,"helvetica", "arial" , sans-serif;
510
padding: 0;
611
margin: 0;
@@ -224,23 +229,6 @@ button{
224229
{
225230
padding-bottom: 2em !important;
226231
}
227-
/* borders */
228-
p.border
229-
{
230-
padding: 0px;
231-
}
232-
:not(p.border)
233-
{
234-
padding: 2em;
235-
}
236-
.round
237-
{
238-
border-radius: 5px;
239-
}
240-
.circle
241-
{
242-
border-radius: 50%;
243-
}
244232
/* centered elemet */
245233
.center-children
246234
{
@@ -423,7 +411,56 @@ p.border
423411
{
424412
font-size: 2em;
425413
}
426-
414+
/*Bagdes*/
415+
.b-green
416+
{
417+
background-color: var(--color-green);
418+
border-radius: 1000px;
419+
color:#fff ;
420+
padding: 1px 10px;
421+
}
422+
.b-red
423+
{
424+
border-radius: 1000px;
425+
background-color:#ff3860 !important;
426+
color:#fff ;
427+
padding: 1px 10px;
428+
}
429+
.b-blue
430+
{
431+
border-radius: 1000px;
432+
background-color:var(--color-blue) !important;
433+
color:#fff ;
434+
padding: 1px 10px;
435+
}
436+
.b-white
437+
{
438+
border-radius:1000px ;
439+
background-color:#fff !important;
440+
color:#222 ;
441+
padding: 1px 10px ;
442+
}
443+
.b-black
444+
{
445+
border-radius: 1000px;
446+
background-color:var(--color-black) !important;
447+
color:#fff ;
448+
padding:1px 10px;
449+
}
450+
.b-yellow
451+
{
452+
border-radius:1000px ;
453+
background-color: var(--color-yellow) !important;
454+
color:#fff ;
455+
padding:1px 10px;
456+
}
457+
.b-silver
458+
{
459+
border-radius:1000px ;
460+
background-color: #ccc !important;
461+
color:#555 ;
462+
padding: 1px 10px;
463+
}
427464
/*form */
428465
.r-form
429466
{
@@ -496,59 +533,44 @@ p.border
496533
padding: 1em ;
497534
border:0.05em solid #ddd ;
498535
}
499-
500-
/*.foot
501-
{
502-
display: grid;
503-
grid-template-columns: 1fr 1fr 1fr 1fr;
504-
padding: 1em 0px ;
505-
}
506-
.foot ul
507-
{
508-
display: flex;
509-
flex-direction: column;
510-
list-style-type: none;
511-
}
512-
*/
513536
/*colors*/
514537
.c-green
515538
{
516-
color:#07b57a !important;
539+
color:var(--color-green) !important;
517540
}
518541
.c-red
519542
{
520-
color:#ff3860 !important;
543+
color:var(--color-red) !important;
521544
}
522545
.c-blue
523546
{
524-
color:#2196f3 !important;
547+
color:var(--color-blue) !important;
525548
}
526-
527549
.c-white
528550
{
529551
color:#fff !important;
530552
}
531553
.c-black
532554
{
533-
color:#222 !important;
555+
color:var(--color-black) !important;
534556
}
535-
536557
.c-yellow
537558
{
538-
color:#ffdd57 !important;
559+
color:var(--color-yellow) !important;
539560
}
561+
540562
/*background colors*/
541563
.bg-green
542564
{
543-
background-color:#07b57a !important;
565+
background-color:var(--color-green) !important;
544566
}
545567
.bg-red
546568
{
547-
background-color:#ff3860 !important;
569+
background-color:var(--color-red) !important;
548570
}
549571
.bg-blue
550572
{
551-
background-color:#2196f3 !important;
573+
background-color:var(--color-blue) !important;
552574
}
553575

554576
.bg-white
@@ -557,13 +579,14 @@ p.border
557579
}
558580
.bg-black
559581
{
560-
background-color:#222 !important;
582+
background-color:var(--color-black) !important;
561583
}
562584

563585
.bg-yellow
564586
{
565-
background-color:#ffdd57 !important;
587+
background-color:var(--color-yellow)!important;
566588
}
589+
/*shadows */
567590
.shadow
568591
{
569592
box-shadow: 0px 0px 4px 1px #ddd;
@@ -580,32 +603,28 @@ p.border
580603
{
581604
box-shadow: 0px 0px 40px 10px #ddd;
582605
}
583-
606+
/* borders */
584607
.border
585608
{
586609
border:1px solid #ddd;
587610
border-radius: 3px;
588-
padding: 2em 0em;
589611
}
590612
.border-1
591613
{
592614
border:3px solid #ddd;
593615
border-radius: 3px;
594-
padding: 2em 0em;
595616
}
596617
.border-2
597618
{
598619
border:6px solid #ddd;
599620
border-radius: 3px;
600-
padding: 2em 0em;
601621
}
602622
.border-3
603623
{
604624
border:10px solid #ddd;
605625
border-radius: 3px;
606-
padding: 2em 0em;
607626
}
608-
627+
/*round elements*/
609628
.rounded
610629
{
611630
border-radius: 5px ;
@@ -622,7 +641,7 @@ p.border
622641
{
623642
border-radius: 100px ;
624643
}
625-
644+
/*cards*/
626645
.r-card{
627646
margin:1em 0px ;
628647
display: flex ;
@@ -652,4 +671,27 @@ p.border
652671
}
653672
.underlined{
654673
text-decoration: underline ;
655-
}
674+
}
675+
/*opacity*/
676+
.opac{
677+
opacity: 0.75;
678+
}
679+
.opac-1{
680+
opacity: 0.5;
681+
}
682+
.opac-2{
683+
opacity: 0.25;
684+
}
685+
/*.foot
686+
{
687+
display: grid;
688+
grid-template-columns: 1fr 1fr 1fr 1fr;
689+
padding: 1em 0px ;
690+
}
691+
.foot ul
692+
{
693+
display: flex;
694+
flex-direction: column;
695+
list-style-type: none;
696+
}
697+
*/

‎docs/classes.html‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,16 @@ <h1 class='text-large'>Classes</h1>
100100
<li>.btn-danger</li>
101101
</ul>
102102
</li>
103+
<li><a href="#Badges">Badges</a>
104+
<ul>
105+
<li> .b-black"</li>
106+
<li>.b-blue</li>
107+
<li>.b-green"</li>
108+
<li>.b-red</li>
109+
<li>b-yellow</li>
110+
<li >b-silver</li>
111+
</ul>
112+
</li>
103113
</li>
104114
<li><a href="#ButtonSizes">Buttons sizes</a>
105115
<ul>
@@ -152,10 +162,18 @@ <h1 class='text-large'>Classes</h1>
152162
<li>.sticky-top</li>
153163
</ul>
154164
</li>
155-
<li><a href="#FontWeight">Font weight</a>
165+
<li><a href="#FontWeight">Font weight / Underlined</a>
156166
<ul>
157167
<li>.text-light</li>
158-
<li>.text-bold</li>
168+
<li>.text-bold</li>
169+
<li>.underlined</li>
170+
</ul>
171+
</li>
172+
<li><a href="#Opacity">Opacity </a>
173+
<ul>
174+
<li>.opac</li>
175+
<li>.opac-1</li>
176+
<li>.opac-2</li>
159177
</ul>
160178
</li>
161179
<li><a href="#TextContainers">Text containers</a>

‎docs/index.html‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@
9999
<li><a href="#BacgroundColors">Backgound colors</a></li>
100100
<li><a href="#Buttons">Buttons</a></li>
101101
<li><a href="#ButtonSizes">Buttons sizes</a></li>
102+
<li><a href="#Badges">Badges / Tags</a></li>
102103
<li><a href="#TextSizes">Text sizes</a></li>
103104
<li><a href="#Borders">Borders</a></li>
104105
<li><a href="#Rounded">Rounded Elements</a></li>
@@ -202,8 +203,8 @@ <h1 id="Buttons" >Buttons</h1>
202203
<button class="btn ">Button standard</button>
203204
<button class="btn btn-1">Button one </button>
204205
<button class="btn btn-2 ">Button two </button>
205-
<button class="btn btn-3">Button three</button>
206-
<button class="btn btn-4">Button four </button>
206+
<button class="btn btn-3">Button three </button>
207+
<button class="btn btn-4">Button four</button>
207208
<button class="btn btn-5 ">Button five </button>
208209
<button class="btn btn-6 ">Button six </button>
209210

@@ -235,18 +236,45 @@ <h1 id="ButtonSizes" class='mt-2'>Button sizes</h1>
235236
<hr>
236237
<div class='text-container mt-2 center-text'>
237238
<button class="btn btn-6 btn-small">Button</button>
238-
<button class="btn btn-6 btn-medium">Button </button>
239-
<button class="btn btn-6 btn-large">Button </button>
239+
<button class="btn btn-6 btn-medium">Button</button>
240+
<button class="btn btn-6 btn-large">Button</button>
240241
</div>
241242
<h3>Code : </h3>
242243
<div class="text-container dark">
243244
<pre>
244245
<button class="btn btn-6 btn-small">Button</button>
245-
<button class="btn btn-6 btn-medium">Button </button>
246+
<button class="btn btn-6 btn-medium">Button</button>
246247
<button class="btn btn-6 btn-large">Button </button>
247248
</pre>
248249
</div>
249250

251+
<h1 id="Badges">
252+
Badges / tags
253+
</h1>
254+
<hr>
255+
<div class='text-container '>
256+
257+
<button class="btn btn-standard">Button <span class="b-yellow c-black">20</span></button>
258+
<button class="btn btn-4">Button <i class="b-red">1</i> </button>
259+
<button class="btn btn-warning">Button <span class="b-black">52</span></button>
260+
<button class="btn btn-6">Notifications<span class="b-blue">99</span></button>
261+
<button class="btn btn-3">Notifications<span class="b-silver opac">99</span></button>
262+
<button class="btn btn-5">Button<span class="ml-1 b-white">Yes!</span></button>
263+
<button class="btn btn-danger">Button<span class="ml-1 b-green border">44</span></button>
264+
265+
</div>
266+
<h3>Code : </h3>
267+
<div class="text-container dark">
268+
<pre>
269+
<button class="btn btn-standard">Button <span class="b-yellow c-black">20</span></button>
270+
<button class="btn btn-4">Button <i class="b-red">1</i> </button>
271+
<button class="btn btn-warning">Button <span class="b-black">52</span></button>
272+
<button class="btn btn-6">Notifications<span class="b-blue">99</span></button>
273+
<button class="btn btn-3">Notifications<span class="b-silver opac">99</span></button>
274+
<button class="btn btn-5 mt-1">Button<span class="ml-1 b-white">Yes!</span></button>
275+
<button class="btn btn-danger mt-1">Button<span class="ml-1 b-green border">44</span></button>
276+
</pre>
277+
</div>
250278
<h1 id="TextSizes" class='mt-2' >Text Sizes</h1>
251279
<hr>
252280
<div class='text-container stacked'>

0 commit comments

Comments
 (0)