School of Social Work

Icon: Cog

No notes defined.

<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M14.4612 5.05636C14.554 5.2943 14.4757 5.55958 14.2755 5.72915L13.0193 6.8067C13.0513 7.0337 13.0687 7.26617 13.0687 7.50137C13.0687 7.73657 13.0513 7.96904 13.0193 8.19603L14.2755 9.27359C14.4757 9.44315 14.554 9.70844 14.4612 9.94638C14.3335 10.2718 14.1798 10.5836 14.0028 10.8845L13.8665 11.106C13.675 11.4068 13.4603 11.6912 13.2253 11.9593C13.0542 12.1562 12.7698 12.2218 12.5146 12.1452L10.8986 11.6612C10.5099 11.9429 10.0805 12.1781 9.62216 12.3558L9.25952 13.9175C9.2015 14.1663 8.99842 14.3633 8.73152 14.4043C8.33117 14.4672 7.91921 14.5 7.49855 14.5C7.07789 14.5 6.66593 14.4672 6.26558 14.4043C5.99868 14.3633 5.7956 14.1663 5.73758 13.9175L5.37494 12.3558C4.91657 12.1781 4.48721 11.9429 4.09846 11.6612L2.48545 12.148C2.23015 12.2246 1.94584 12.1562 1.77468 11.962C1.53969 11.694 1.32501 11.4096 1.13354 11.1087L0.997184 10.8872C0.820216 10.5863 0.666458 10.2746 0.53881 9.94911C0.445974 9.71117 0.524304 9.44589 0.72448 9.27632L1.98066 8.19877C1.94874 7.96904 1.93134 7.73657 1.93134 7.50137C1.93134 7.26617 1.94874 7.0337 1.98066 6.8067L0.72448 5.72915C0.524304 5.55958 0.445974 5.2943 0.53881 5.05636C0.666458 4.7309 0.820216 4.41913 0.997184 4.11828L1.13354 3.89676C1.32501 3.59592 1.53969 3.31149 1.77468 3.04347C1.94584 2.84655 2.23015 2.78091 2.48545 2.85749L4.10136 3.34157C4.49011 3.05988 4.91947 2.82467 5.37785 2.6469L5.74048 1.08527C5.7985 0.836394 6.00158 0.63948 6.26848 0.598457C6.66883 0.532819 7.08079 0.5 7.50145 0.5C7.92211 0.5 8.33407 0.532819 8.73442 0.595722C9.00132 0.636745 9.2044 0.833659 9.26242 1.08254L9.62506 2.64417C10.0834 2.82194 10.5128 3.05714 10.9015 3.33884L12.5175 2.85476C12.7728 2.77818 13.0571 2.84655 13.2282 3.04073C13.4632 3.30875 13.6779 3.59318 13.8694 3.89402L14.0057 4.11555C14.1827 4.41639 14.3364 4.72817 14.4641 5.05362L14.4612 5.05636ZM7.50145 9.68929C8.11699 9.68929 8.70731 9.45878 9.14256 9.04847C9.57781 8.63815 9.82233 8.08164 9.82233 7.50137C9.82233 6.92109 9.57781 6.36459 9.14256 5.95427C8.70731 5.54395 8.11699 5.31344 7.50145 5.31344C6.88592 5.31344 6.29559 5.54395 5.86034 5.95427C5.42509 6.36459 5.18057 6.92109 5.18057 7.50137C5.18057 8.08164 5.42509 8.63815 5.86034 9.04847C6.29559 9.45878 6.88592 9.68929 7.50145 9.68929Z" fill="black" />
</svg>
 
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path
			d="M14.4612 5.05636C14.554 5.2943 14.4757 5.55958 14.2755 5.72915L13.0193 6.8067C13.0513 7.0337 13.0687 7.26617 13.0687 7.50137C13.0687 7.73657 13.0513 7.96904 13.0193 8.19603L14.2755 9.27359C14.4757 9.44315 14.554 9.70844 14.4612 9.94638C14.3335 10.2718 14.1798 10.5836 14.0028 10.8845L13.8665 11.106C13.675 11.4068 13.4603 11.6912 13.2253 11.9593C13.0542 12.1562 12.7698 12.2218 12.5146 12.1452L10.8986 11.6612C10.5099 11.9429 10.0805 12.1781 9.62216 12.3558L9.25952 13.9175C9.2015 14.1663 8.99842 14.3633 8.73152 14.4043C8.33117 14.4672 7.91921 14.5 7.49855 14.5C7.07789 14.5 6.66593 14.4672 6.26558 14.4043C5.99868 14.3633 5.7956 14.1663 5.73758 13.9175L5.37494 12.3558C4.91657 12.1781 4.48721 11.9429 4.09846 11.6612L2.48545 12.148C2.23015 12.2246 1.94584 12.1562 1.77468 11.962C1.53969 11.694 1.32501 11.4096 1.13354 11.1087L0.997184 10.8872C0.820216 10.5863 0.666458 10.2746 0.53881 9.94911C0.445974 9.71117 0.524304 9.44589 0.72448 9.27632L1.98066 8.19877C1.94874 7.96904 1.93134 7.73657 1.93134 7.50137C1.93134 7.26617 1.94874 7.0337 1.98066 6.8067L0.72448 5.72915C0.524304 5.55958 0.445974 5.2943 0.53881 5.05636C0.666458 4.7309 0.820216 4.41913 0.997184 4.11828L1.13354 3.89676C1.32501 3.59592 1.53969 3.31149 1.77468 3.04347C1.94584 2.84655 2.23015 2.78091 2.48545 2.85749L4.10136 3.34157C4.49011 3.05988 4.91947 2.82467 5.37785 2.6469L5.74048 1.08527C5.7985 0.836394 6.00158 0.63948 6.26848 0.598457C6.66883 0.532819 7.08079 0.5 7.50145 0.5C7.92211 0.5 8.33407 0.532819 8.73442 0.595722C9.00132 0.636745 9.2044 0.833659 9.26242 1.08254L9.62506 2.64417C10.0834 2.82194 10.5128 3.05714 10.9015 3.33884L12.5175 2.85476C12.7728 2.77818 13.0571 2.84655 13.2282 3.04073C13.4632 3.30875 13.6779 3.59318 13.8694 3.89402L14.0057 4.11555C14.1827 4.41639 14.3364 4.72817 14.4641 5.05362L14.4612 5.05636ZM7.50145 9.68929C8.11699 9.68929 8.70731 9.45878 9.14256 9.04847C9.57781 8.63815 9.82233 8.08164 9.82233 7.50137C9.82233 6.92109 9.57781 6.36459 9.14256 5.95427C8.70731 5.54395 8.11699 5.31344 7.50145 5.31344C6.88592 5.31344 6.29559 5.54395 5.86034 5.95427C5.42509 6.36459 5.18057 6.92109 5.18057 7.50137C5.18057 8.08164 5.42509 8.63815 5.86034 9.04847C6.29559 9.45878 6.88592 9.68929 7.50145 9.68929Z"
			fill="{{ fill ?: '#315D90' }}"/>
</svg>
  • Content: 
    // add icons to this array with their filename and type,
// the loop at the bottom of the file will create classes for them

$icons: (
	//'facebook': 'svg',
	//'instagram': 'svg',
	//'twitter': 'svg',
	//'linkedin': 'svg',
	//'youtube': 'svg',
	//'external-primary': 'svg',
	//'phone': 'svg',
	//'mail': 'svg',
	//'pin': 'svg',
);

.icon {
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	text-align: center;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	vertical-align: baseline;
	top: 0.1em;

	svg,
	img {
		display: block;
		width: 100%;
		max-height: 100%;
		vertical-align: middle;
	}

	svg {
		height: 100%;
		//fill: #000;
	}

	&:before {
		font-size: 1em;
		display: inline-block;
	}

	@each $name, $extension in $icons {
		&--#{$name} {
			background-image: url('../img/icon-#{$name}.#{$extension}');
		}
	}

	// Layout

	&--margin-before {
		margin-inline-start: 0.35em;
	}

	&--margin-after {
		margin-inline-end: 0.35em;
	}

	// Themes

	&--primary {
		svg, path {
			fill: $primary !important;
		}
	}

	&--secondary {
		svg, path {
			fill: $secondary !important;
		}
	}

	&--tertiary {
		svg, path {
			fill: $tertiary !important;
		}
	}

	// Variant generator
	// (see loop at top)

	//@each $name, $extension in $icons {
	//	&--#{$name} {
	//		background-image: url('../img/icon-#{$name}.#{$extension}');
	//	}
	//}

	// Special

	@at-root {
		a, button {
			&:where(:has(.svgHeart)) {
				path {
					fill: rgba(white, 0);
					stroke-width: 2;
					stroke: $grey;
					transition: all 100ms;
				}

				&:hover, &:focus {
					path {
						fill: rgba($pink, 0.5);
						stroke-width: 0;
					}
				}

				&:active {
					path {
						fill: $pink;
						stroke-width: 0;
					}
				}
			}

			&:where(:has(.svgHeart--filled)) {
				path {
					transition: all 100ms;
				}

				&:hover, &:focus {
					path {
						fill: rgba($pink, 0.5);
						stroke-width: 0;
					}
				}

				&:active {
					path {
						fill: rgba(white, 0);
						stroke-width: 2;
					}
				}
			}
		}
	}
}
  • URL: /components/raw/icon/_icons.scss
  • Filesystem Path: web/themes/custom/um-ssw/components/icon/_icons.scss
  • Size: 2.1 KB