Socialify

Folder ..

Viewing _pm-color-selector.scss 
69 lines (60 loc) • 1.0 KB

 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
.ColorSelector {

	&-container {
		@include respond-to($breakpoint-small, 'min') {
			max-width: 13em;
		}
	}

	&-item {
		position: relative;
		display: inline-block;
		height: 2.5em;
		width: 2.5em;
		border-radius: 50%;
		padding: 0;
		margin: .125em;
		overflow: hidden;
		cursor: pointer;

		&-mask {
			position: absolute;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			border-radius: 50%;
			z-index: 2;
			background: currentColor;
			border: 2px solid var(--bgcolor-main-area, white);
			pointer-events: none;
			transition: border .1s ease-out;
		}

		&.selected &-mask {
			border:3px solid rgba(0, 0, 0, .1);
		}

		svg {
			opacity: 0;
			color: white;
			display: inline-block;
			transition: opacity .1s linear;
		}

		&:hover svg {
			opacity: .75;
		}

		&.selected svg {
			opacity: 1;
		}

	}

	&-input-color[type="radio"] {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		margin: 0;
		cursor: pointer;
	}
}