Skip to content

Commit 75cb591

Browse files
pgaliaspgalias
committed
css + less
0 parents  commit 75cb591

File tree

11 files changed

+1106
-0
lines changed

11 files changed

+1106
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.idea/

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Pure CSS Components
2+
Pack of 5 components which are build using only CSS without JS.
3+
See demo here http://codepen.io/pgalias/pen/dYKrjb
4+
I used LESS mixins library - prefixer.less which you can get it there http://lessprefixer.com/

‎components.css‎

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
/*--------------------------------------------
2+
// Pure CSS Components
3+
// Copyright (c) Paweł Galias
4+
// http://pawgalias.eu
5+
// MIT Licensed:
6+
// http://www.opensource.org/licenses/mit-license.php
7+
//--------------------------------------------
8+
// Pack of pure css components:
9+
// 1 -- Dropdown menu
10+
// 2 -- Accordion
11+
// 3 -- Modalbox
12+
// 4 -- Tabs
13+
// 5 -- Slider
14+
//--------------------------------------------
15+
// There are two way to use
16+
// 1. Simpler
17+
// Just simply add components.css file to your document
18+
// 2. Harder
19+
// Use .less files to manipulate styles of components or use only those use need
20+
//--------------------------------------------
21+
// See demo here: http://codepen.io/pgalias/full/dYKrjb/
22+
// See how it works here: http://pawgalias/article/Pure-CSS-Components
23+
//--------------------------------------------
24+
// I used LESS mixins library - prefixer.less which you can get it there http://lessprefixer.com/
25+
*/
26+
.dropdown-container {
27+
position: relative;
28+
background: #00bac7;
29+
}
30+
.dropdown-container:hover {
31+
background: #00edfa;
32+
}
33+
.dropdown-menu {
34+
list-style: none;
35+
box-sizing: border-box;
36+
padding: 0;
37+
border: 1px solid #00edfa;
38+
background: #ffffff;
39+
position: absolute;
40+
filter: alpha(opacity=100);
41+
opacity: 1;
42+
top: 100%;
43+
visibility: hidden;
44+
width: 100%;
45+
transition: all 0.2s ease-in-out;
46+
-webkit-transform: translate(0, -15px);
47+
-ms-transform: translate(0, -15px);
48+
transform: translate(0, -15px);
49+
}
50+
.dropdown-container:hover .dropdown-menu {
51+
filter: alpha(opacity=100);
52+
opacity: 1;
53+
visibility: visible;
54+
-webkit-transform: translate(0, 0);
55+
-ms-transform: translate(0, 0);
56+
transform: translate(0, 0);
57+
}
58+
.dropdown-menu a {
59+
color: #666666;
60+
display: block;
61+
text-decoration: none;
62+
text-align: center;
63+
padding: 10px 5px 10px 5px;
64+
}
65+
.dropdown-menu a:hover {
66+
text-shadow: 0 0 20px #969696;
67+
}
68+
/* trigger is also a dropdown header */
69+
.dropdown-trigger {
70+
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%22577px%22%20height%3D%22356px%22%20viewBox%3D%220%200%20577%20356%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20xmlns%3Asketch%3D%22http%3A//www.bohemiancoding.com/sketch/ns%22%3E%0A%20%20%20%20%3Ctitle%3EUntitled%2011%3C/title%3E%0A%20%20%20%20%3Cdescription%3ECreated%20with%20Sketch%20%28http%3A//www.bohemiancoding.com/sketch%29%3C/description%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20id%3D%22path-1%22%20d%3D%22M0%2C356%20L577%2C356%20L577%2C0%20L0%2C0%20L0%2C356%22%3E%3C/path%3E%0A%20%20%20%20%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20sketch%3Atype%3D%22MSPage%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Vector-Smart-Object11%22%20sketch%3Atype%3D%22MSLayerGroup%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20sketch%3Aname%3D%22Clip%202%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/mask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Clip-2%22%3E%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M562.9295%2C16.5454%20C542.5118%2C-5.2089%20505.085%2C-6.4119%20483.197%2C14.2062%20L286.7062%2C200.0037%20L95.6289%2C14.8077%20C74.2087%2C-6.1112%2036.64821%2C-5.5097%2015.92979%2C15.8771%20C5.43691%2C26.6373%20-0.210526%2C40.8729%20-0.010025%2C55.877%20C0.223893%2C70.948%206.27233%2C85.0499%2017.1328%2C95.5762%20L285.7371%2C355.9933%20L560.6905%2C96.044%20C571.8517%2C85.4509%20578.2678%2C70.5136%20578.2678%2C55.1084%20C578.2678%2C40.6389%20572.754%2C26.8712%20562.9295%2C16.5454%22%20id%3D%22Fill-1%22%20fill%3D%22%23FFFFFF%22%20sketch%3Atype%3D%22MSShapeGroup%22%20mask%3D%22url%28%23mask-2%29%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
71+
background-repeat: no-repeat;
72+
background-position: 98% center;
73+
background-size: 20px;
74+
cursor: pointer;
75+
padding: 13px 0 13px 15px;
76+
}
77+
.accordion {
78+
width: 70%;
79+
display: block;
80+
list-style: none;
81+
/* center accordion */
82+
83+
margin: auto;
84+
}
85+
.accordion__object > a {
86+
background: #00bac7;
87+
border-radius: 5px;
88+
background-clip: padding-box;
89+
font-size: 180%;
90+
text-align: center;
91+
text-decoration: none;
92+
display: block;
93+
color: #000000;
94+
padding: 1% 0;
95+
margin: 0.5% 0;
96+
}
97+
.accordion__object > a:hover {
98+
background: #00edfa;
99+
}
100+
.accordion__object .accordion__content {
101+
border-radius: 5px;
102+
background-clip: padding-box;
103+
background: #61f5ff;
104+
transition: all 0.2s ease-in-out;
105+
margin: 0 0 4px 0;
106+
/* your other styles starts here
107+
eg for headings, paragraphs etc */
108+
109+
}
110+
.accordion__object span {
111+
display: none;
112+
position: fixed;
113+
}
114+
.accordion__object span + .accordion__content {
115+
filter: alpha(opacity=100);
116+
opacity: 1;
117+
visibility: visible;
118+
height: auto;
119+
padding: 10px;
120+
-webkit-transform: translate(0, 0);
121+
-ms-transform: translate(0, 0);
122+
transform: translate(0, 0);
123+
}
124+
.accordion__object span:not(:target) + .accordion__content {
125+
filter: alpha(opacity=0);
126+
opacity: 0;
127+
visibility: hidden;
128+
height: 0;
129+
padding: 0;
130+
-webkit-transform: translate(0, -10px);
131+
-ms-transform: translate(0, -10px);
132+
transform: translate(0, -10px);
133+
}
134+
.modal {
135+
position: fixed;
136+
top: 0;
137+
left: 0;
138+
width: 100%;
139+
height: 100%;
140+
background: rgba(0, 0, 0, 0.3);
141+
}
142+
.modal:not(:target) {
143+
display: none;
144+
}
145+
.modal__dialog {
146+
width: 50%;
147+
height: 50%;
148+
position: absolute;
149+
/* center vertically and horizontally modal dialog */
150+
151+
top: 50%;
152+
left: 50%;
153+
-webkit-transform: translate(-50%, -50%);
154+
-ms-transform: translate(-50%, -50%);
155+
transform: translate(-50%, -50%);
156+
}
157+
.modal__dialog-header {
158+
text-align: center;
159+
color: #ffffff;
160+
background-color: #00bac7;
161+
padding: 5px;
162+
position: relative;
163+
height: 10%;
164+
border-top-left-radius: 5px;
165+
border-top-right-radius: 5px;
166+
border-bottom-left-radius: 0;
167+
border-bottom-right-radius: 0;
168+
}
169+
.modal__dialog-header .modal-close {
170+
position: absolute;
171+
top: 3px;
172+
right: 3px;
173+
}
174+
.modal__dialog-body {
175+
background-color: #ffffff;
176+
color: #000000;
177+
text-align: center;
178+
height: 80%;
179+
}
180+
.modal__dialog-footer {
181+
background-color: #00bac7;
182+
text-align: right;
183+
color: #ffffff;
184+
height: 10%;
185+
}
186+
.tabs {
187+
width: 80%;
188+
position: relative;
189+
list-style: none;
190+
}
191+
.tabs > li {
192+
float: left;
193+
/* width = 100% * 1/x, where x - number of tabs */
194+
195+
width: calc(25%);
196+
}
197+
.tabs input[type="radio"] {
198+
display: none;
199+
}
200+
.tabs label {
201+
display: block;
202+
position: relative;
203+
background: #00bac7;
204+
color: #ffffff;
205+
cursor: pointer;
206+
transition: all 0.2s ease;
207+
padding: 15px;
208+
border-top-left-radius: 8px;
209+
border-top-right-radius: 8px;
210+
top: 5px;
211+
}
212+
.tabs label:hover {
213+
background: #00949e;
214+
}
215+
.tabs [id^="tab"]:checked ~ [id^="tab__content"] {
216+
display: block;
217+
background: #00727b;
218+
}
219+
.tabs [id^="tab"]:checked + label {
220+
padding: 20px;
221+
top: 0;
222+
background: #00727b;
223+
}
224+
.tabs__content {
225+
display: none;
226+
position: absolute;
227+
left: 0;
228+
width: 100%;
229+
height: 100%;
230+
}
231+
.slider {
232+
width: 100%;
233+
height: 500px;
234+
position: relative;
235+
list-style: none;
236+
}
237+
.slider input[type=radio] {
238+
display: none;
239+
}
240+
.slider label {
241+
display: block;
242+
position: relative;
243+
top: 0;
244+
left: 50%;
245+
float: left;
246+
font-size: 30px;
247+
cursor: pointer;
248+
color: #00bac7;
249+
}
250+
.slider [id^="slide"]:checked + label {
251+
color: #00edfa;
252+
}
253+
.slider .slide__content {
254+
display: none;
255+
position: absolute;
256+
top: -30px;
257+
width: 100%;
258+
height: 100%;
259+
overflow: hidden;
260+
}
261+
.slider .slide__content img {
262+
display: block;
263+
max-width: 470px;
264+
margin: auto;
265+
}
266+
.slider [id^="slide"]:checked ~ .slide__content {
267+
display: block;
268+
}

‎components.less‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/*--------------------------------------------
2+
// Pure CSS Components
3+
// Copyright (c) Paweł Galias
4+
// http://pawgalias.eu
5+
// MIT Licensed:
6+
// http://www.opensource.org/licenses/mit-license.php
7+
//--------------------------------------------
8+
// Pack of pure css components:
9+
// 1 -- Dropdown menu
10+
// 2 -- Accordion
11+
// 3 -- Modalbox
12+
// 4 -- Tabs
13+
// 5 -- Slider
14+
//--------------------------------------------
15+
// There are two way to use
16+
// 1. Simpler
17+
// Just simply add components.css file to your document
18+
// 2. Harder
19+
// Use .less files to manipulate styles of components or use only those use need
20+
//--------------------------------------------
21+
// See demo here: http://codepen.io/pgalias/full/dYKrjb/
22+
// See how it works here: http://pawgalias/article/Pure-CSS-Components
23+
//--------------------------------------------
24+
// I used LESS mixins library - prefixer.less which you can get it there http://lessprefixer.com/
25+
*/
26+
27+
// prefixer mixin library
28+
@import "less/prefixer.less";
29+
30+
// variables
31+
@import "less/variables.less";
32+
33+
// components
34+
@import "less/dropdown.less";
35+
@import "less/accordion.less";
36+
@import "less/modalbox.less";
37+
@import "less/tabs.less";
38+
@import "less/slider.less";

‎less/accordion.less‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.accordion {
2+
width: @accordionWidth;
3+
display: block;
4+
list-style: none;
5+
/* center accordion */
6+
margin: auto;
7+
&__object > a {
8+
background: @accordionHeaderColorBackground;
9+
.border-radius(@accordionHeaderBorderRadius);
10+
font-size: 180%;
11+
text-align: center;
12+
text-decoration: none;
13+
display: block;
14+
color: @accordionHeaderColor;
15+
padding: @accordionHeaderPaddings;
16+
margin: @accordionHeaderMargins;
17+
&:hover {
18+
background: @accordionHeaderColorBackgroundHover;
19+
}
20+
}
21+
&__object &__content {
22+
.border-radius(@accordionHeaderBorderRadius);
23+
background: @accordionContentColorBackground;
24+
.transition(@accordionContentTransition);
25+
margin: @accordionContentMargins;
26+
/* your other styles starts here
27+
eg for headings, paragraphs etc */
28+
}
29+
&__object span {
30+
display: none;
31+
position: fixed;
32+
& + .accordion__content {
33+
.opacity(1);
34+
visibility: visible;
35+
height: auto;
36+
padding: @accordionContentPaddings;
37+
.transform(translate(0, 0));
38+
}
39+
&:not(:target) + .accordion__content {
40+
.opacity(0);
41+
visibility: hidden;
42+
height: 0;
43+
padding: 0;
44+
.transform(translate(0, -10px));
45+
}
46+
}
47+
}

0 commit comments

Comments
 (0)