File Manager

✏️ Edit File: /home/mklsvubc/renovaid.co.uk/wp-admin/css/colors/_mixins.scss

@use 'sass:color';
@use 'tokens';

/*
 * Button mixin - creates a primary button effect.
 * Uses CSS custom properties for theme color support across color schemes.
 */
@mixin button( $button-text-color: #fff ) {
	background: var(--wp-admin-theme-color);
	border-color: transparent;
	border-radius: tokens.$radius-s;
	color: $button-text-color;

&:hover {
		background: var(--wp-admin-theme-color-darker-10);
		border-color: transparent;
		color: $button-text-color;
	}

&:focus {
		background: var(--wp-admin-theme-color);
		border-color: transparent;
		color: $button-text-color;
		/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
		box-shadow:
			0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color),
			inset 0 0 0 1px tokens.$white;
		/* Visible in Windows High Contrast mode */
		outline: 1px solid transparent;
	}

&:active {
		background: var(--wp-admin-theme-color-darker-20);
		border-color: transparent;
		color: $button-text-color;
	}

&:disabled,
	&.disabled {
		background: tokens.$gray-100;
		border-color: transparent;
		color: tokens.$gray-600;
		cursor: not-allowed;
	}

&.active,
	&.active:focus,
	&.active:hover {
		background: var(--wp-admin-theme-color-darker-10);
		color: $button-text-color;
		border-color: transparent;
		box-shadow: none;
	}
}

/*
 * Secondary button mixin - outlined style with theme color.
 * Matches Gutenberg's .is-secondary button variant.
 */
@mixin button-secondary() {
	background: transparent;
	border: 1px solid var(--wp-admin-theme-color);
	border-radius: tokens.$radius-s;
	color: var(--wp-admin-theme-color);

&:hover {
		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
		border-color: var(--wp-admin-theme-color-darker-20);
		color: var(--wp-admin-theme-color-darker-20);
	}

&:focus {
		background: transparent;
		border-color: var(--wp-admin-theme-color);
		color: var(--wp-admin-theme-color);
		box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
		outline: 1px solid transparent;
	}

&:active {
		background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
		border-color: var(--wp-admin-theme-color-darker-20);
		color: var(--wp-admin-theme-color-darker-20);
		box-shadow: none;
	}

&:disabled,
	&.disabled {
		background: transparent;
		border-color: tokens.$gray-300;
		color: tokens.$gray-600;
		cursor: not-allowed;
	}
}

/*
 * Tertiary button mixin - transparent background, gray text.
 */
@mixin button-tertiary() {
	background: transparent;
	border: 1px solid tokens.$gray-600;
	border-radius: tokens.$radius-s;
	color: tokens.$gray-900;

&:hover {
		background: rgba(0, 0, 0, 0.05);
		border-color: tokens.$gray-700;
		color: tokens.$gray-900;
	}

&:focus {
		background: transparent;
		border-color: var(--wp-admin-theme-color);
		color: tokens.$gray-900;
		box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
		outline: 1px solid transparent;
	}

&:active {
		background: rgba(0, 0, 0, 0.1);
		border-color: tokens.$gray-700;
		color: tokens.$gray-900;
	}

&:disabled,
	&.disabled {
		background: transparent;
		border-color: tokens.$gray-400;
		color: tokens.$gray-600;
		cursor: not-allowed;
	}
}

Batal

⬅ Naik ke css 12 item

Nama	Tipe	Ukuran	Diubah	Aksi
📁blue	dir	—	2025-10-12 22:47	📂 Buka
📁coffee	dir	—	2025-10-12 22:47	📂 Buka
📁ectoplasm	dir	—	2025-10-12 22:47	📂 Buka
📁light	dir	—	2025-10-12 22:47	📂 Buka
📁midnight	dir	—	2025-10-12 22:47	📂 Buka
📁modern	dir	—	2025-10-12 22:47	📂 Buka
📁ocean	dir	—	2026-06-03 06:30	📂 Buka
📁sunrise	dir	—	2025-10-12 22:47	📂 Buka
📄_admin.scss	scss	22.5 KB	2026-05-21 22:50	✏️ Edit 👁️ View
📄_mixins.scss	scss	3.1 KB	2026-05-21 22:50	✏️ Edit 👁️ View
📄_tokens.scss	scss	8.4 KB	2026-05-21 22:50	✏️ Edit 👁️ View
📄_variables.scss	scss	2.6 KB	2026-05-21 22:50	✏️ Edit 👁️ View