/
style.scss
157 lines (133 loc) · 3.7 KB
/
style.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
.edit-widgets-header {
display: flex;
align-items: center;
justify-content: space-between;
height: $header-height;
overflow: auto;
background: #fff;
@include break-small {
overflow: visible;
}
.selected-block-tools-wrapper {
overflow: hidden;
display: flex;
align-items: center;
height: $header-height;
.block-editor-block-contextual-toolbar {
border-bottom: 0;
height: 100%;
}
// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
.block-editor-block-toolbar {
height: 100%;
// Push down so that buttons are centered vertically.
// It should be 14px (60px header height - 32px compact button height = 28 / 2),
// but there is a -1px top-margin down the stack that affects this.
padding-top: math.div($header-height - $button-size-compact, 2) + 1;
// Match the height of other buttons in the header toolbar.
.components-button:not(.block-editor-block-mover-button) {
height: $button-size-compact;
}
}
// Modified group borders.
.components-toolbar-group,
.components-toolbar {
border-right: none;
&::after {
content: "";
width: $border-width;
height: $grid-unit-30;
background-color: $gray-300;
margin-top: $grid-unit-05;
margin-left: $grid-unit;
}
& .components-toolbar-group.components-toolbar-group {
&::after {
display: none;
}
}
}
.block-editor-block-mover {
// Match the height of other buttons in the header toolbar.
&.is-horizontal .block-editor-block-mover-button {
height: $button-size-compact;
overflow: visible;
}
// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
@include break-small() {
&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
position: relative;
top: -10px;
}
}
}
}
}
.edit-widgets-header__navigable-toolbar-wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 2;
padding-right: $grid-unit-10;
padding-left: $grid-unit-20;
overflow: hidden;
}
.edit-widgets-header__title {
font-size: 20px;
padding: 0;
margin: 0 20px 0 0;
}
.edit-widgets-header__actions {
display: flex;
align-items: center;
padding-right: $grid-unit-20;
gap: $grid-unit-05;
@include break-small() {
gap: $grid-unit-10;
}
}
.edit-widgets-header-toolbar {
gap: $grid-unit-10;
// Some plugins add buttons here despite best practices.
// Push them a bit rightwards to fit the top toolbar.
margin-right: $grid-unit-10;
// The Toolbar component adds different styles to buttons, so we reset them
// here to the original button styles
// Specificity bump needed to offset https://github.com/WordPress/gutenberg/blob/8ea29cb04412c80c9adf7c1db0e816d6a0ac1232/packages/components/src/toolbar/style.scss#L76
> .components-button.has-icon.has-icon.has-icon,
> .components-dropdown > .components-button.has-icon.has-icon {
height: $button-size-compact;
min-width: $button-size-compact;
padding: 4px;
&.is-pressed {
background: $gray-900;
}
&:focus:not(:disabled) {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
outline: 1px solid transparent;
}
&::before {
display: none;
}
}
}
.edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle {
padding-left: $grid-unit;
padding-right: $grid-unit;
@include break-small {
padding-left: $grid-unit-15;
padding-right: $grid-unit-15;
}
&::after {
content: none;
}
svg {
transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
@include reduce-motion("transition");
}
&.is-pressed {
svg {
transform: rotate(45deg);
}
}
}