Skip to content

Commit b8f997e

Browse files
paulidopaulido
committed
feat: add select, input2, accordions
1 parent affa23e commit b8f997e

File tree

101 files changed

+6712
-1146
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

101 files changed

+6712
-1146
lines changed

‎resources/assets/css/components.css‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
/*
2+
3+
Author : Paul IDO, paulido92@gmail.com
4+
Licence : MIT
5+
this stands for collection of css helpers
6+
7+
*/
8+
9+
/* cards section */
10+
.shadow1{
11+
box-shadow: hsl(0, 0%, 80%) 0 0 16px;
12+
}
13+
14+
.card-img-top{
15+
padding: 20px;
16+
}
17+
18+
.mycard{
19+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
20+
}
21+
.mycard-footer, .mycard-header{
22+
background-color: inherit;
23+
}
24+
.mycard-footer{
25+
border-top: none;
26+
}
27+
.mycard-header{
28+
border-bottom: none;
29+
}
30+
/* end cards */
31+
32+
/* tabs style */
33+
34+
.tab {
35+
overflow: hidden;
36+
border: 1px solid #ccc;
37+
background-color: #f1f1f1;
38+
}
39+
40+
/* Style the buttons that are used to open the tab content */
41+
.tab button {
42+
background-color: inherit;
43+
float: left;
44+
border: none;
45+
outline: none;
46+
cursor: pointer;
47+
padding: 14px 16px;
48+
transition: 0.3s;
49+
}
50+
51+
/* Change background color of buttons on hover */
52+
.tab button:hover {
53+
background-color: #ddd;
54+
}
55+
56+
/* Create an active/current tablink class */
57+
.tab button.active {
58+
background-color: #ccc;
59+
}
60+
61+
/* Style the tab content */
62+
.tabcontent {
63+
display: none;
64+
padding: 6px 12px;
65+
border: 1px solid #ccc;
66+
border-top: none;
67+
}
68+
69+
/* end tabs style */
70+
71+
72+
/* inputs */
73+
74+
/* end inputs */
75+
76+
/* buttons */
77+
78+
.btn-livewire{
79+
background-color: rgba(55, 65, 81, var(--tw-bg-opacity))
80+
}
81+
82+
/* avatar */
83+
.avatar {
84+
vertical-align: middle;
85+
width: 50px;
86+
height: 50px;
87+
border-radius: 50%;
88+
}
89+
/* end avatar */
90+
91+
92+
/* end buttons */
93+
94+
/* li */
95+
96+
/* end li */
97+
98+
/* a */
99+
100+
/* end a */
101+
102+
/* others */
103+
.tagify__dropdown.extra-properties .tagify__dropdown__item > img{
104+
display: inline-block;
105+
vertical-align: middle;
106+
height: 20px;
107+
transform: scale(.75);
108+
margin-right: 5px;
109+
border-radius: 2px;
110+
transition: .12s ease-out;
111+
}
112+
113+
.tagify__dropdown.extra-properties .tagify__dropdown__item:hover > img{
114+
transform: none;
115+
margin-right: 12px;
116+
}
117+
118+
.tagify.countries .tagify__input{ min-width:175px; }
119+
120+
.tagify.countries tag{ white-space:nowrap; }
121+
.tagify.countries tag img{
122+
display: inline-block;
123+
vertical-align: middle;
124+
height: 16px;
125+
margin-right: 3px;
126+
border-radius: 2px;
127+
}
128+
129+
.user-img-txt{
130+
height: 30px;
131+
width: 30px;
132+
background-color: #336699;
133+
border-radius: 50%;
134+
display: inline-block;
135+
text-align: center;
136+
align-items: center;
137+
justify-content: center;
138+
box-sizing: border-box;
139+
padding-top: 2px;
140+
}
141+
142+
/* end others */
143+
/* funny style */
144+
145+
.rounded{
146+
border: solid 1px;
147+
border-radius: 40px;
148+
background-color: rgb(238, 236, 236);
149+
cursor: pointer;
150+
padding: 5px;
151+
text-align: center;
152+
}
153+
154+
.rounded:hover{
155+
border: solid 2px;
156+
border-radius: 22px;
157+
background-color: rgb(175, 174, 174);
158+
}
159+
160+
/* end funny style */

‎resources/assets/css/custom.css‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
.pekeupload-btn-file {
2+
3+
-moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
4+
-webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
5+
box-shadow:inset 0px -3px 7px 0px #29bbff;
6+
7+
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
8+
background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
9+
background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
10+
background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
11+
background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
12+
background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
13+
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);
14+
15+
background-color:#2dabf9;
16+
17+
-moz-border-radius:3px;
18+
-webkit-border-radius:3px;
19+
border-radius:3px;
20+
21+
border:1px solid #0b0e07;
22+
23+
display:inline-block;
24+
color:#ffffff;
25+
font-family:arial;
26+
font-size:15px;
27+
font-weight:normal;
28+
padding:9px 23px;
29+
text-decoration:none;
30+
31+
text-shadow:0px 1px 0px #263666;
32+
33+
}
34+
.pekeupload-btn-file:hover {
35+
36+
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
37+
background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
38+
background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
39+
background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
40+
background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
41+
background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
42+
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
43+
44+
background-color:#0688fa;
45+
text-decoration: none;
46+
color:#fff;
47+
}
48+
.pekeupload-btn-file:active {
49+
position:relative;
50+
top:1px;
51+
}
52+
53+
54+
/*
55+
* Base
56+
*/
57+
58+
.progress-pekeupload{
59+
60+
width:100%;
61+
height:16px;
62+
margin:0 auto 20px auto;
63+
padding:0px;
64+
65+
background:#cfcfcf;
66+
border-width:1px;
67+
border-style:solid;
68+
border-color: #aaa #bbb #fff #bbb;
69+
box-shadow:inset 0px 2px 3px #bbb;
70+
}
71+
72+
.progress-pekeupload,
73+
.bar-pekeupload{
74+
border-radius:4px;
75+
-moz-border-radius:4px;
76+
-webkit-border-radius:4px;
77+
-o-border-radius:4px;
78+
}
79+
80+
.bar-pekeupload{
81+
height:100%;
82+
background:#999;
83+
84+
background-size:18px 18px;
85+
background-color:#7ce;
86+
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
87+
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
88+
transparent 75%, transparent);
89+
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
90+
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
91+
transparent 75%, transparent);
92+
background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
93+
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
94+
transparent 75%, transparent);
95+
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
96+
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
97+
transparent 75%, transparent);
98+
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
99+
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
100+
transparent 75%, transparent);
101+
102+
box-shadow:inset 0px 2px 8px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .2);
103+
text-align: center;
104+
}
105+
.alert-pekeupload {
106+
padding: 8px 35px 8px 14px;
107+
margin-bottom: 20px;
108+
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
109+
color: #b94a48;
110+
background-color: #f2dede;
111+
border: 1px solid #eed3d7;
112+
-webkit-border-radius: 4px;
113+
-moz-border-radius: 4px;
114+
border-radius: 4px;
115+
116+
border-color: ;
117+
}
118+
.alert-pekeupload .close{
119+
margin-top: 2px;
120+
}
121+
122+
.pekeitem_preview{
123+
float:left;
124+
width:20%;
125+
}
126+
.pekerow .file{
127+
float:left;
128+
width:80%;
129+
}
130+
.pekerow{
131+
overflow: hidden;
132+
width: 100%;
133+
}
134+
.pekeupload-drag-area{
135+
width: 100%;
136+
text-align: center;
137+
padding-top: 50px;
138+
padding-bottom: 50px;
139+
background-color:#f0f0f0;
140+
}

‎resources/assets/css/dropzone.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)