gutenberg/packages/edit-widgets/src/components/header/style.scss at f52091e5fe100aeff7d9fc247065a7fc94f5cb73 · andrewserong/gutenberg · 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
.edit-widgets-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: $white;
	height: $header-height;
	padding: 0 $grid-unit-20;
	overflow: auto;

	@include break-small {
		overflow: visible;
	}
}

.edit-widgets-header__navigable-toolbar-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
}

.edit-widgets-header__title {
	font-size: 20px;
	padding: 0;
	margin: 0 20px 0 0;
}

.edit-widgets-header__actions {
	display: flex;
	align-items: center;

	gap: $grid-unit-05;

	@include break-small() {
		gap: $grid-unit-10;
	}
}

.edit-widgets-header-toolbar {
	border: none;

	// 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;
		min-width: $button-size;
		padding: 6px;

		&.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);
		}
	}
}