Skip to content

Commit acfa3f8

Browse files
author
Jonathan Tsai
committed
add less files
1 parent 290a604 commit acfa3f8

9 files changed

+566
-1
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
# htk-css
1+
# htk-css-hacktoolkit
22
CSS Hacktoolkit

‎_imports/colors.less

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
@black: #000000;
2+
@white: #ffffff;
3+
4+
@red: #ff0000;
5+
@green: #00ff00;
6+
@blue: #0000ff;
7+
@orange: rgb(255, 165, 0);
8+
9+
@dark-gray: #333333;
10+
@dark-slate-gray: #4a4a4a;
11+
@medium-gray: #aaaaaa;
12+
@light-gray: #cccccc;
13+
@lighter-gray: #eeeeee;
14+
15+
@okay-green: #00cc00;
16+
17+
@pure-menu-label-hover-bg: #5171eb;
18+
@pure-menu-label-hover-bg-gradient-start: rgba(81, 113, 235, 1);
19+
@pure-menu-label-hover-bg-gradient-end: rgba(26, 67, 244, 1);
20+
@pure-menu-label-hover-border-bottom: #0d36e7;
21+
@pure-menu-label-hover-border-top: #4767ea;
22+
23+
@button-blue: #0078e7;
24+
@button-green: rgb(76, 201, 71); /* this is a green */
25+
@button-maroon: rgb(202, 60, 60); /* this is a maroon */
26+
@button-light-blue: rgb(95, 198, 218); /* this is a light blue */
27+
28+
@facebook-blue: #4c66a4;
29+
@twitter-blue: #2c77ba;
30+
31+
/* http://flatuicolors.com/ */
32+
@flatui-turquoise: #1abc9c;
33+
@flatui-green-sea: #16a085;
34+
@flatui-sun-flower: #f1c40f;
35+
@flatui-orange: #f39c12;
36+
@flatui-emerald: #2ecc71;
37+
@flatui-nephritis: #27ae60;
38+
@flatui-carrot: #e67e22;
39+
@flatui-pumpkin: #d35400;
40+
@flatui-peter-river: #3498db;
41+
@flatui-belize-hole: #2980b9;
42+
@flatui-alizarin: #e74c3c;
43+
@flatui-pomegranate: #c0392b;
44+
@flatui-amethyst: #9b59b6;
45+
@flatui-wisteria: #8e44ad;
46+
@flatui-clouds: #ecf0f1;
47+
@flatui-silver: #bdc3c7;
48+
@flatui-wet-asphalt: #34495e;
49+
@flatui-midnight-blue: #2c3e50;
50+
@flatui-concrete: #95a5a6;
51+
@flatui-asbestos: #7f8c8d;

‎_imports/mixins.less

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
.circular(@dim: 150px) {
2+
width: @dim;
3+
height: @dim;
4+
border-radius: (@dim / 2);
5+
-webkit-border-radius: (@dim / 2);
6+
-moz-border-radius: (@dim / 2);
7+
/* background: url(http://link-to-your/image.jpg) no-repeat;*/
8+
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
9+
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
10+
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
11+
}
12+
13+
@border-radius-base-px: 10px;
14+
@border-radius-base-em: 0.625em; /* 16*0.625=10 */
15+
16+
.rounded-base(@scale, @border-radius-base: @border-radius-base-em) {
17+
-webkit-border-radius: (@border-radius-base * @scale); /* Safari prototype */
18+
-moz-border-radius: (@border-radius-base * @scale); /* Gecko browsers */
19+
border-radius: (@border-radius-base * @scale); /* Everything else - limited support at the moment */
20+
}
21+
22+
.rounded-left-base(@scale, @border-radius-base: @border-radius-base-em) {
23+
/* Safari prototype */
24+
-webkit-border-top-left-radius: (@border-radius-base * @scale);
25+
-webkit-border-bottom-left-radius: (@border-radius-base * @scale);
26+
/* Gecko browsers */
27+
-moz-border-top-left-radius: (@border-radius-base * @scale);
28+
-moz-border-bottom-left-radius: (@border-radius-base * @scale);
29+
/* Everything else - limited support at the moment */
30+
border-top-left-radius: (@border-radius-base * @scale);
31+
border-bottom-left-radius: (@border-radius-base * @scale);
32+
}
33+
34+
.rounded-right-base(@scale, @border-radius-base: @border-radius-base-em) {
35+
/* Safari prototype */
36+
-webkit-border-top-right-radius: (@border-radius-base * @scale);
37+
-webkit-border-bottom-right-radius: (@border-radius-base * @scale);
38+
/* Gecko browsers */
39+
-moz-border-top-right-radius: (@border-radius-base * @scale);
40+
-moz-border-bottom-right-radius: (@border-radius-base * @scale);
41+
/* Everything else - limited support at the moment */
42+
border-top-right-radius: (@border-radius-base * @scale);
43+
border-bottom-right-radius: (@border-radius-base * @scale);
44+
}
45+
46+
.rounded-bottom-base(@scale, @border-radius-base: @border-radius-base-em) {
47+
/* Safari prototype */
48+
-webkit-border-bottom-left-radius: (@border-radius-base * @scale);
49+
-webkit-border-bottom-right-radius: (@border-radius-base * @scale);
50+
/* Gecko browsers */
51+
-moz-border-bottom-left-radius: (@border-radius-base * @scale);
52+
-moz-border-bottom-right-radius: (@border-radius-base * @scale);
53+
/* Everything else - limited support at the moment */
54+
border-bottom-left-radius: (@border-radius-base * @scale);
55+
border-bottom-right-radius: (@border-radius-base * @scale);
56+
}
57+
58+
.hover-fade(@opacity: 0.8, @duration: 0.2s) {
59+
transition: @duration;
60+
&:hover {
61+
opacity: @opacity;
62+
}
63+
}
64+
65+
/* http://gradientcss.com/linear-gradient */
66+
67+
.angular-linear-gradient(@angle,
68+
@start-color,
69+
@start-color-stop: 50%,
70+
@end-color,
71+
@end-color-stop: 50%) {
72+
background: -moz-linear-gradient(@angle, @start-color @start-color-stop, @end-color @end-color-stop);
73+
background: -ms-linear-gradient(@angle, @start-color @start-color-stop, @end-color @end-color-stop);
74+
background: -o-linear-gradient(@angle, @start-color @start-color-stop, @end-color @end-color-stop);
75+
background: -webkit-linear-gradient(@angle, @start-color @start-color-stop, @end-color @end-color-stop);
76+
background: linear-gradient(@angle, @start-color @start-color-stop, @end-color @end-color-stop);
77+
}
78+
79+
.linear-gradient(@start-color, @end-color) {
80+
background: -moz-linear-gradient(@start-color, @end-color);
81+
background: -ms-linear-gradient(@start-color, @end-color);
82+
background: -o-linear-gradient(@start-color, @end-color);
83+
background: -webkit-linear-gradient(@start-color, @end-color);
84+
background: linear-gradient(@start-color, @end-color);
85+
}

‎_imports/vars.less

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@footer-height: 45px;

‎common.less

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@import "htk/_imports/mixins.less";
2+
@import "htk/_imports/colors.less";
3+
4+
.hidden {
5+
display: none;
6+
}
7+
8+
.bg-white {
9+
background-color: @white;
10+
}
11+
.bg-black {
12+
background-color: @black;
13+
}
14+
.bg-orange {
15+
background-color: @orange;
16+
}
17+
18+
.bg-blue {
19+
background-color: @blue;
20+
}
21+
22+
.show-hover {
23+
visibility: hidden;
24+
}
25+
26+
.rounded, .rounded-10, .rounded-medium {
27+
.rounded-base(1);
28+
}
29+
30+
.align-left {
31+
text-align: left;
32+
}
33+
34+
.align-right {
35+
text-align: right;
36+
}

0 commit comments

Comments
 (0)