-
Notifications
You must be signed in to change notification settings - Fork 22
/
template.less
67 lines (56 loc) · 2.29 KB
/
template.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
// J!Blank Template for Joomla by JBlank.pro (JBZoo.com)
// Examples and test styles
@import "misc/variables"; // your template vars
@import "misc/mixins"; // custom mixin libs
@import "misc/aliases"; // popuplar mixin's names
@import "layouts/reset"; // Simple style resets
@import "layouts/messages"; // Joomla messages (<jdoc:include type="message" />)
@import "layouts/error"; // Joomla error page markup (when fatal error appeared)
@import "layouts/debug"; // Joomla profiler's styles (when debug is mode on)
@import "layouts/offline"; // Joomla offline page (when offline is mode on)
// ***************************************** FRONTEND STYLES ***********************************************************
// classic clear fix
.clearfix {
.clearfix();
}
// example for custom fonts
// .font-face('FontAwesome', 'fontawesome-webfont');
// include own files
//@import "layouts/some-layout.less";
// OR write your code here!
body {
background: #f0f0f0;
margin: 0;
padding: 0;
.component-wrapper {
padding: 30px 50px 50px;
margin: 30px auto;
background: #fcfcfc;
border: 1px solid #aaa;
.size(800px, 'auto');
.box-shadow(0 3px 10px #bbb);
.border-radius(6px);
.gradient(#ddd, #fff);
}
}
// base64 example
.example-smallImage-to-base64 {
background: url('../images/test.png'); // test simple relation path
-test1-background: data-uri('../images/test.png'); // test convertion image to base64
-test2-background: data-uri('../images/inner/test.png') 0 50% no-repeat;
//-test3-background: data-uri('not-exists-image.gif');
}
// ***************************************** MEDIA QUERIES *************************************************************
// see variables.less
@media @print { @import "media/print.less"; }
@media @mobile-mini { @import "media/mobile-mini.less"; }
@media @mobile { @import "media/mobile.less"; }
@media @tablet-mini { @import "media/tablet-mini.less"; }
@media @tablet { @import "media/tablet.less"; }
@media @desktop { @import "media/desktop.less"; }
@media @desktop-xl { @import "media/desktop-xl.less"; }
@media @retina { @import "media/retina.less"; }
// Combo! =)
@media @retina, @tablet {
// @import "media/retina-tablet.less";
}