such.less/90-styles.less at develop · MarcDiethelm/such.less · GitHub

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/**
 * Define everything project bound that you don't feel to be setup in here
 * e.g. global style objects, maybe rich text styles etc.
 **/


// RICH TEXT
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

.text {
	h1, h1& {
		&:extend(.title-page.spaced);
	}
	h2, h2& {
		&:extend(.title-default.spaced);
	}
	h3, h3& {
		&:extend(.title-sub.spaced);
	}

	p, p& {
		margin: 1.5em 0;
	}
}


// CLASSES
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

.debug {
	font-family: @font-monospace;
	font-size: smaller;
}


// DEMO STUFF
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// Dependencies:
// - 00-variables.less

.such-demo:extend(.text all) {
	// richtext-style linking
	.setup:extend(.text h3) {
		display: inline-block;
	}

	h2 {
		margin: 2em 0 1em;
		padding-top: .5em;
		display: block;
		border-top: 1px solid lighten(@color-copy, 50%);
	}

	th {
		text-align: left;
		padding-right: 3.5em;
		vertical-align: top;
	}
	th, td {
		padding-top: .175em;
		padding-bottom: .175em;
		border-bottom: 1px dotted lighten(@color-copy, 40%);
	}
	td {
		font-weight: bold;
	}
	th, ._reset {
		font-weight: normal;
	}
	.g-col {
		margin-bottom: 1em;

		> span:extend(.wf-box) {
			display: block;
			overflow: hidden;
		}
	}
	._type:after {
		content: '@{grid-type}';
	}
	._max-width:after {
		content: '@{max-content-width}';
	}
	._gutter-width:after {
		content: '@{grid-gutter}';
	}
	._gutter-type:after {
		content: '@{gutter-type}';
	}
	._gutter-width-percent:after {
		@grid-gutter-width-percent: round(percentage(@grid-gutter / (@max-content-width + @grid-gutter)), 3);
		content: '@{grid-gutter-width-percent}';
	}
	hr {
		border: none;
		border-bottom: 1px solid lighten(@color-copy, 50%);
	}
}