Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Bower components Debian packages RPM packages NuGet packages

jsarnowski / jsarnowski/blocksy-companion-pro   php

Repository URL to install this package:

/ premium / static / sass / language-switcher.scss

.ct-language-switcher {
	
	li {
		a {
			display: flex;
			align-items: center;
			gap: 7px;
		}

		img {
			max-width: 18px;
		}
	}

	&[data-type='inline'] ul {
		display: inline-flex;
		flex-wrap: wrap;
		column-gap: var(--items-spacing, 20px);
		row-gap: 5px;

		li {
			&.current-lang {
				--linkInitialColor: var(--linkHoverColor);
			}
		}
	}

	&[data-type='dropdown'] {
		position: relative;

		ul {
			position: absolute;
			margin-top: var(--margin-top);
			border-radius: var(--border-radius);
			background: var(--background-color);
			box-shadow: var(--box-shadow);

			opacity: 0;
			visibility: hidden;
			transform: translate3d(0, 10px, 0);
			transition: opacity 0.2s ease, visibility 0.2s ease,
				transform 0.2s ease;

			// modal placement
			&[data-placement='right'] {
				left: -15px;
			}

			&[data-placement='left'] {
				right: -15px;
			}

			li {
				&:not(:last-child) {
					border-bottom: var(--border);
				}

				a {
					padding: var(--padding) 15px;
				}

				&.current-lang {
					display: none;
				}
			}

			// drop-down bridge
			&:before {
				position: absolute;
				content: '';
				top: 0;
				left: 0;
				width: 100%;
				height: var(--margin-top);
				transform: translateY(-100%);
			}
		}

		&:hover,
		&:focus-within {
			ul {
				opacity: 1;
				visibility: visible;
				transform: translate3d(0, 0, 0);
			}
		}
	}
}

.ct-language {
	color: var(--linkInitialColor);
}

.ct-active-language {
	display: flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	--icon-size: 8px;
	--icon-color: currentColor;
}

// weglot css
.ct-language-switcher {

	.weglot-flags a,
	.wglanguage-name {
		&:empty {
			&:before {
				margin: 0;
			}
		}
	}
}