ThemePatternGuide/styleguide.less at master · JasonStrack/ThemePatternGuide · 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
&.styleguide-view, & .styleguide-view {
	height: auto;
	min-height: 0;
	background: white;
	overflow: hidden;
	&::after {
		content: "";
		display: block;
		clear: both;
	}
}

.registerColors( @colors ) {
	// === for ===
	.for( @i, @n ) {.-each( @i )}
	.for( @n )     when ( isnumber( @n ) ) {.for( 1, @n )}
	.for( @i, @n ) when not ( @i = @n )  {
		.for( ( @i + ( @n - @i ) / abs( @n - @i ) ), @n );
	}
	// === end for ===

	// === for-each ===
	.for( @array )   when ( default() ) {.for-impl_( length( @array ) )}
	.for-impl_( @i ) when ( @i > 1 )    {.for-impl_( ( @i - 1 ) )}
	.for-impl_( @i ) when ( @i > 0 )    {.-each( extract( @array, @i ) )}
	// === end for-each ===

	.colors {
		.for( @colors ); .-each( @name ) {
			i:nth-child( @{i} ) {
				background-color: @@name;
				display: inline-flex !important;
				&:before {
					content: "@@{name} @{@{name}}";
				}
			}
		}
	}
}

@registeredColors: false;
& when not ( @registeredColors = false ) {
	.registerColors( @registeredColors )
}

&.styleguide-view {
	.colors {
		padding: .5rem;
		i {
			display: none;
			padding: .5rem;
			margin: .5rem;
			width: 5rem;
			height: 5rem;
			position: relative;
			align-items: center;
			justify-content: center;
			vertical-align: top;
			&:before {
				display: block;
				opacity: 0;
				z-index: 100;
				color: black;
				background-color: white;
				border-radius: 4px;
				white-space: pre-wrap;
				padding: .5em;
				text-align: center;
				transition: opacity 400ms;
				box-shadow: 0 0 5px rgba( 0,0,0,.2 );
			}
			&:hover:before {
				opacity: 1;
			}
		}
	}
}