Color Picker Styles

Color Picker Styles

.select-color {
  color: #7b8792;
	font-family: "Open Sans", sans-serif;
	font-size: 10px;
	font-weight: bold;
}

/* Ignore this border radius its from CSSHat, the tooltip arrow is throwing it off */
.rounded-rectangle-32 {
  width: 163px;
	height: 93px;
	border: 1px solid #abb3bd;
	@include border-radius(82px 83px 3px 3px / 8px 8px 3px 3px);
	@include background-clip(padding-box);
	background-color: #637381;
	@include box-shadow(0 1px 1px rgba(27,38,54,.21));
	@include background-image(linear-gradient(bottom, #f1f3f9 0%, #fff 100%));
}

.single-color-box{
  width: 16px;
	height: 16px;
	@include border-radius(2px);
	@include background-clip(padding-box);
  /* this background color will be the color of each of the boxes */
	background-color: #adb62d;
	@include box-shadow(0 1px 1px #fff, inset 0 1px 0 rgba(19,25,25,.32));
}

/* currently selected color */
.color-box-selected {
  width: 12px;
	height: 12px;
  /* use color helpers in compass to darken for border */
	border: 2px solid #3f8519;
	@include border-radius(2px);
	@include background-clip(padding-box);
	background-color: #85d359;
	@include box-shadow(0 1px 1px #fff, inset 0 0 0 rgba(19,25,25,.32));
}

/* color dropdown (inside allocation bar) */
/* this will be the same gradient/style as the current allocation bar as a color preview */
.rounded-rectangle-14-copy-18 {
	width: 17px;
	height: 18px;
	border: 1px solid #69b63e;
	@include border-radius(0 10px 10px);
	@include background-clip(padding-box);
	background-color: #fff;
	@include background-image(linear-gradient(bottom, #53992e 0%, #7dc854 8.74%, #89df5b 100%));
}