This repository has been archived by the owner on Dec 2, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 117
/
mixins.scss
97 lines (79 loc) · 2.02 KB
/
mixins.scss
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
// Responsive breakpoints mixin
@mixin add_variables( $view: frontend ) {
@if frontend == $view {
:root {
@content;
}
}
@if editor == $view {
:root,
body {
@content;
}
}
}
// Crop Text Boundry
// - Sets a fixed-width on content within alignwide and alignfull blocks
@mixin crop-text($inset-line-height: 1) {
line-height: $inset-line-height;
$offset-top: calc(.5em * #{$inset-line-height} + -.38);
$offset-bottom: calc(.5em * #{$inset-line-height} + -.39);
&:before,
&:after {
content: "";
display: block;
height: 0;
width: 0;
}
&:before {
margin-bottom: -($offset-top);
}
&:after {
margin-top: -($offset-bottom);
}
}
// Button style
// - Applies button styles to blocks and elements that share them.
@mixin button-style() {
@include crop-text(var(--button--line-height));
color: var(--button--color-text);
cursor: pointer;
font-weight: var(--button--font-weight);
font-family: var(--button--font-family);
font-size: var(--button--font-size);
background-color: var(--button--color-background);
border-radius: var(--button--border-radius);
border: var(--button--border-width) solid var(--button--color-background);
text-decoration: none;
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
&:focus {
background: transparent;
outline-offset: -6px;
outline: 2px dotted currentColor;
.is-dark-theme & {
color: var(--button--color-background);
}
&:not(.has-background) {
color: var(--button--color-text-hover);
}
}
&:disabled {
background-color: var(--global--color-white-50);
border-color: var(--global--color-white-50);
color: var(--button--color-text-active);
}
}
@mixin innerblock-margin-clear() {
// Clear the top margin for the first-child.
> *:first-child {
margin-top: 0;
}
// Last child that is not the appender.
> *:last-child():not(.block-list-appender) {
margin-bottom: 0;
}
// When selected, the last item becomes the second last because of the appender.
&.has-child-selected > *:nth-last-child(2) {
margin-bottom: 0;
}
}