xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/counting.site.
lots of style
author
Morgan Williams
date
(Nov 15, 2014, 1:14 AM -0700)
commit
83072ddc
83072ddc8391e1e3d7552846f83389dfee4ac4fa
parent
f5b76103
f5b76103caf44b6ce0dd23232fa3313c1e386ab4
+227
-74
+21
compatibility.less
+21
compatibility.less
···
1
+
.bordered-edges(@width: 1px, @top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
2
+
border-top: solid @width @top-color;
3
+
border-left: solid @width @left-color;
4
+
border-right: solid @width @right-color;
5
+
border-bottom: solid @width @bottom-color;
6
+
}
7
+
.bordered(@width: 1px; @color: #000){
8
+
.bordered-edges(@width, @color, @color, @color, @color)
9
+
}
10
+
11
+
12
+
.no-select(){
13
+
-webkit-touch-callout: none;
14
+
-webkit-user-select: none;
15
+
-khtml-user-select: none;
16
+
-moz-user-select: none;
17
+
-ms-user-select: none;
18
+
-o-user-select: none;
19
+
user-select: none;
20
+
cursor: default;
21
+
}
+137
flex.less
+137
flex.less
···
1
+
// Mixins for flex compatibility
2
+
3
+
// --------------------------------------------------
4
+
// Flexbox LESS mixins
5
+
// The spec: http://www.w3.org/TR/css3-flexbox
6
+
// --------------------------------------------------
7
+
8
+
// Flexbox display
9
+
// flex or inline-flex
10
+
.flex-display(@display: flex) {
11
+
display: ~"-webkit-@{display}";
12
+
display: ~"-moz-@{display}";
13
+
display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
14
+
display: ~"-ms-@{display}"; // IE11
15
+
display: @display;
16
+
}
17
+
18
+
// The 'flex' shorthand
19
+
// - applies to: flex items
20
+
// <positive-number>, initial, auto, or none
21
+
.flex(@columns: initial) {
22
+
-webkit-flex: @columns;
23
+
-moz-flex: @columns;
24
+
-ms-flex: @columns;
25
+
flex: @columns;
26
+
}
27
+
28
+
// Flex Flow Direction
29
+
// - applies to: flex containers
30
+
// row | row-reverse | column | column-reverse
31
+
.flex-direction(@direction: row) {
32
+
-webkit-flex-direction: @direction;
33
+
-moz-flex-direction: @direction;
34
+
-ms-flex-direction: @direction;
35
+
flex-direction: @direction;
36
+
}
37
+
38
+
// Flex Line Wrapping
39
+
// - applies to: flex containers
40
+
// nowrap | wrap | wrap-reverse
41
+
.flex-wrap(@wrap: nowrap) {
42
+
-webkit-flex-wrap: @wrap;
43
+
-moz-flex-wrap: @wrap;
44
+
-ms-flex-wrap: @wrap;
45
+
flex-wrap: @wrap;
46
+
}
47
+
48
+
// Flex Direction and Wrap
49
+
// - applies to: flex containers
50
+
// <flex-direction> || <flex-wrap>
51
+
.flex-flow(@flow) {
52
+
-webkit-flex-flow: @flow;
53
+
-moz-flex-flow: @flow;
54
+
-ms-flex-flow: @flow;
55
+
flex-flow: @flow;
56
+
}
57
+
58
+
// Display Order
59
+
// - applies to: flex items
60
+
// <integer>
61
+
.flex-order(@order: 0) {
62
+
-webkit-order: @order;
63
+
-moz-order: @order;
64
+
-ms-order: @order;
65
+
order: @order;
66
+
}
67
+
68
+
// Flex grow factor
69
+
// - applies to: flex items
70
+
// <number>
71
+
.flex-grow(@grow: 0) {
72
+
-webkit-flex-grow: @grow;
73
+
-moz-flex-grow: @grow;
74
+
-ms-flex-grow: @grow;
75
+
flex-grow: @grow;
76
+
}
77
+
78
+
// Flex shr
79
+
// - applies to: flex itemsink factor
80
+
// <number>
81
+
.flex-shrink(@shrink: 1) {
82
+
-webkit-flex-shrink: @shrink;
83
+
-moz-flex-shrink: @shrink;
84
+
-ms-flex-shrink: @shrink;
85
+
flex-shrink: @shrink;
86
+
}
87
+
88
+
// Flex basis
89
+
// - the initial main size of the flex item
90
+
// - applies to: flex itemsnitial main size of the flex item
91
+
// <width>
92
+
.flex-basis(@width: auto) {
93
+
-webkit-flex-basis: @width;
94
+
-moz-flex-basis: @width;
95
+
-ms-flex-basis: @width;
96
+
flex-basis: @width;
97
+
}
98
+
99
+
// Axis Alignment
100
+
// - applies to: flex containers
101
+
// flex-start | flex-end | center | space-between | space-around
102
+
.justify-content(@justify: flex-start) {
103
+
-webkit-justify-content: @justify;
104
+
-moz-justify-content: @justify;
105
+
-ms-justify-content: @justify;
106
+
justify-content: @justify;
107
+
}
108
+
109
+
// Packing Flex Lines
110
+
// - applies to: multi-line flex containers
111
+
// flex-start | flex-end | center | space-between | space-around | stretch
112
+
.align-content(@align: stretch) {
113
+
-webkit-align-content: @align;
114
+
-moz-align-content: @align;
115
+
-ms-align-content: @align;
116
+
align-content: @align;
117
+
}
118
+
119
+
// Cross-axis Alignment
120
+
// - applies to: flex containers
121
+
// flex-start | flex-end | center | baseline | stretch
122
+
.align-items(@align: stretch) {
123
+
-webkit-align-items: @align;
124
+
-moz-align-items: @align;
125
+
-ms-align-items: @align;
126
+
align-items: @align;
127
+
}
128
+
129
+
// Cross-axis Alignment
130
+
// - applies to: flex items
131
+
// auto | flex-start | flex-end | center | baseline | stretch
132
+
.align-self(@align: auto) {
133
+
-webkit-align-self: @align;
134
+
-moz-align-self: @align;
135
+
-ms-align-self: @align;
136
+
align-self: @align;
137
+
}
+5
-4
punch.html
+5
-4
punch.html
···
8
8
<h3> ^^ Sign in to view & punch your times</h3>
9
9
{{/if}} -->
10
10
11
-
12
-
13
11
<button class="new-punch">Ahoy!</button>
14
12
{{#each days}}
15
13
{{> day}}
16
14
{{/each}}
17
-
<button class="nuke">The red button</button>
15
+
<button class="nuke">red button</button>
16
+
18
17
</div>
19
18
20
19
</body>
21
20
22
21
<template name="day">
23
22
<button class="day">
24
-
<span class="{{#if isOnTime}}onTime{{/if}}">
23
+
<span class="{{#if isOnTime }}onTime{{/if}}">
24
+
25
25
<span class="text">{{dd time}} </span>
26
+
<br>
26
27
<span class="text">{{hhss time}} </span>
27
28
</span>
28
29
</button>
+12
-14
punch.js
+12
-14
punch.js
···
1
1
Days = new Mongo.Collection("days");
2
-
// TODO: create Goal
2
+
3
3
goal = new Date();
4
4
goal.setHours(8, 30);
5
5
···
57
57
// METHODS
58
58
Meteor.methods({
59
59
addPunch: function () {
60
-
// var start = new Date();
61
-
// start.setHours(0,0,0);
62
-
// var end = new Date();
63
-
// end.setHours(23,59,59);
64
-
// var x = Days.find({time: {$gte: start, $lt: end}}).count();
60
+
var start = new Date();
61
+
start.setHours(0,0,0);
62
+
var end = new Date();
63
+
end.setHours(23,59,59);
64
+
var x = Days.find({time: {$gte: start, $lt: end}}).count();
65
65
//
66
-
// if (x == 0) {
66
+
if (x == 0) {
67
67
Days.insert({ time: new Date() });
68
-
// } else {
69
-
// console.log("You already have an entry on that date");
70
-
// }
68
+
} else {
69
+
console.log("You already have an entry on that date");
70
+
}
71
71
},
72
72
changeGoal: function (time) {
73
73
// TODO: update goal
···
79
79
},
80
80
isOnTime: function(time) {
81
81
// Make the dates match
82
-
83
-
84
-
85
-
return time < goal;
82
+
console.log(time < goal);
83
+
return (time < goal);
86
84
}
87
85
88
86
});
+52
-56
punch.less
+52
-56
punch.less
···
1
+
@import "flex";
2
+
@import "compatibility";
1
3
2
-
@1x: 5em;
4
+
@1x: 4em;
3
5
@half: @1x / 2;
4
-
@double: @1x * 2;
6
+
@quart: @1x / 4;
7
+
@gap: @1x / 16;
8
+
@2x: @1x * 2;
9
+
10
+
@dim: rgba(255,255,255,.3);
11
+
@clear: rgba(0,0,0,0);
12
+
13
+
.circled(@size:@1x) {
14
+
width: @size;
15
+
height: @size;
16
+
font-size: @size/2;
17
+
border-radius: @size/2;
5
18
6
-
.onTime {
7
-
color: rgb(0, 128, 255);
8
19
}
9
20
10
21
button {
11
-
width: @1x;
12
-
height: @1x;
13
-
font-size: @half;
14
-
border-radius: @half;
15
-
border-width: 0px;
16
-
background-color: white;
22
+
.circled();
23
+
margin: @gap;
17
24
}
18
25
19
-
.absolute {
20
-
background-attachment: fixed;
21
-
position: absolute;
22
-
top: 0;
23
-
bottom: 0;
24
-
left: 0;
25
-
right: 0;
26
-
padding: 0;
27
-
margin: 0;
26
+
.new-punch {
27
+
background-color: white;
28
+
&:active { color: rgb(0,128,255); }
29
+
.bordered;
28
30
}
29
31
30
-
.sunset {
31
-
background-image: linear-gradient(to bottom, #315481, #918e82 100%);
32
+
.day {
33
+
.bordered(2px, white);
34
+
background-color: @dim;
32
35
}
33
36
34
-
.sunrise {
35
-
background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
37
+
.nuke {
38
+
background-color: #aa0000;
39
+
color: white;
40
+
.bordered;
36
41
}
37
42
38
-
body {
39
-
font-family: sans-serif;
40
-
.sunset;
41
-
.absolute;
43
+
.onTime {
44
+
color: rgb(0, 128, 255);
45
+
.bordered(2px, white);
42
46
}
43
47
44
-
#login-buttons {
45
-
display: block;
48
+
.absolute {
49
+
background-attachment: fixed;
50
+
position: absolute;
51
+
top: 0px;
52
+
bottom: 0px;
53
+
left: 0px;
54
+
right: 0px;
55
+
padding: 0px;
56
+
margin: 0px;
46
57
}
47
58
48
-
h1 {
49
-
font-size: 1.5em;
50
-
margin: 0;
51
-
margin-bottom: 10px;
52
-
display: inline-block;
53
-
margin-right: 1em;
59
+
.gradient(@from, @to){
60
+
background-image: linear-gradient(to bottom, @from, @to 100%);
54
61
}
55
62
56
-
form {
57
-
margin-top: 10px;
58
-
margin-bottom: -10px;
59
-
position: relative;
60
-
}
63
+
.sunset { .gradient(#315481, #918e82) }
64
+
.evening { .gradient(#212188, #315481) }
65
+
.morning { .gradient(#d0edf5, #e1e5f0) }
61
66
62
-
.new-snack input {
63
-
box-sizing: border-box;
64
-
padding: 10px 0;
65
-
background: transparent;
66
-
border: none;
67
-
width: 100%;
68
-
padding-right: 80px;
69
-
font-size: 1em;
67
+
body {
68
+
.morning;
69
+
.absolute;
70
70
}
71
71
72
-
.new-snack input:focus{
73
-
outline: 0;
72
+
#login-buttons {
73
+
display: block;
74
74
}
75
75
76
76
.grid {
77
-
78
-
79
-
}
80
-
81
-
.nuke {
82
-
background-color: #ff0000;
77
+
.flex-display(inline-flex);
78
+
.flex-wrap(wrap);
83
79
}