Drawer__button.less
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

Drawer__button.less
View Options

	/* TODO: Use SVG animtation to replace CSS icons */
	.citizen-drawer {
	.citizen-dropdown-summary {
	> .citizen-ui-icon {
	display: grid;
	place-content: center;
	transition: var( --transition-hover );
	transition-property: transform;

	> span {
	display: block;
	width: 1.125rem;
	height: 0.125rem;
	margin: 0.09375rem 0;
	background-color: currentcolor;
	border-radius: var( --border-radius-large );
	transform-origin: 0.25rem 0;
	transition: inherit;

	&:first-child {
	transform-origin: 0 0;
	}

	&:nth-child( 2 ) {
	transform-origin: 0 100%;
	}
	}

	// Since this is a CSS icon, we don't need this
	&::before {
	content: none;
	}
	}

	&:hover {
	> .citizen-ui-icon {
	> span {
	&:first-child {
	transform: translate3d( -50%, 0, 0 );
	}
	}
	}
	}
	}

	> .citizen-dropdown-details[ open ] {
	> .citizen-dropdown-summary {
	> .citizen-ui-icon {
	> span {
	&:first-child {
	opacity: 0;
	/* @noflip */
	transform: rotate( 0deg ) scale( 0.2, 0.2 );
	}
	// Reflect line
	&:nth-child( 2 ) {
	/* @noflip */
	transform: rotate( -45deg ) translate3d( -0.125rem, 0.375rem, 0 );
	}

	// Hide line
	&:last-child {
	/* @noflip */
	transform: rotate( 45deg ) translate3d( -0.3125rem, -0.4375rem, 0 );
	}
	}
	}

	&:hover {
	> .citizen-ui-icon {
	transform: scale( 0.85 );
	}
	}
	}
	}
	}

	// RTL
	.rtl {
	.citizen-drawer .citizen-dropdown-summary:hover {
	> .citizen-ui-icon > span:first-child {
	transform: translate3d( 50%, 0, 0 );
	}
	}
	}