numix-gtk-theme/gtk-3.0/scss/widgets/_progress.scss

/*****************
 ! Progress bars *
******************/

@include exports("progressbar") {
	GtkProgressBar {
		padding: 0;
		border-radius: $roundness;
		font-size: smaller;
		color: alpha($fg_color, 0.6);

		-GtkProgressBar-min-horizontal-bar-height: 12;
		-GtkProgressBar-min-vertical-bar-width: 12;

		&.osd {
			-GtkProgressBar-xspacing: 0;
			-GtkProgressBar-yspacing: 0;
			-GtkProgressBar-min-horizontal-bar-height: 3;
		}

		&.trough {
			border: 1px solid alpha(border_normal($bg_color), 0.5);
			background-color: shade($bg_color, 1.08);
			background-image: none;
		}
	}

	.progressbar {
		@include linear-gradient($selected_bg_color);

		border-radius: 0;
		box-shadow: none;

		&.left {
			border-top-left-radius: $roundness;
			border-bottom-left-radius: $roundness;
		}

		&.right {
			border-top-right-radius: $roundness;
			border-bottom-right-radius: $roundness;
		}

		&.left.right { box-shadow: none; }

		&.vertical {
			@include linear-gradient($selected_bg_color, to right);

			&.bottom {
				border-bottom-left-radius: $roundness;
				border-bottom-right-radius: $roundness;
			}

			&.top {
				border-top-left-radius: $roundness;
				border-top-right-radius: $roundness;
			}
		}
	}

	GtkLevelBar {
		-GtkLevelBar-min-block-width: 34;
		-GtkLevelBar-min-block-height: 3;

		&.vertical {
			-GtkLevelBar-min-block-width: 3;
			-GtkLevelBar-min-block-height: 34;
		}
	}

	.level-bar {
		&.trough {
			@include linear-gradient(shade($bg_color, 1.08), to top);

			border: 1px solid alpha(border_normal($bg_color), 0.5);
			border-radius: $roundness;
		}

		&.fill-block {
			@include linear-gradient($selected_bg_color);

			// FIXME: it would be nice to set make fill blocks bigger, but we'd need
			// :nth-child working on discrete indicators
			border-color: transparent;
			border-radius: 0;

			&.indicator-discrete {
				&.horizontal { margin-right: 1px; }
				&.vertical { margin-bottom: 1px; }
			}

			&.level-high {
				background-color: $success_color;
				border-color: transparent;
			}

			&.level-low {
				background-color: $warning_color;
				border-color: transparent;
			}

			&.empty-fill-block {
				background-color: transparent;
				border-color: transparent;
				box-shadow: none;
			}
		}
	}

	.scale {
		-GtkRange-slider-width: 16;
		-GtkRange-trough-border: 1;
		-GtkScale-slider-length: 16;

		padding: 0;
		border-width: 1px;
		border-radius: $roundness;
		outline-offset: -1px;


		&.slider {
			@include linear-gradient(shade($bg_color, 1.08));

			border-radius: 8px;

			/* we will draw the border using box shadow for now */
			box-shadow: inset 1px 0 border_normal($bg_color),
						inset 0 1px border_normal($bg_color),
						inset -1px 0 border_normal($bg_color),
						inset 0 -1px border_normal($bg_color);

			&:hover, &:focus {
				box-shadow: inset 1px 0 border_focus($bg_color),
							inset 0 1px border_focus($bg_color),
							inset -1px 0 border_focus($bg_color),
							inset 0 -1px border_focus($bg_color);
			}

			&:active {
				box-shadow: inset 1px 0 border_active($bg_color),
							inset 0 1px border_active($bg_color),
							inset -1px 0 border_active($bg_color),
							inset 0 -1px border_active($bg_color);
			}

			&:insensitive {
				@include linear-gradient(shade($bg_color, 0.9));

				box-shadow: inset 1px 0 border_insensitive($bg_color),
							inset 0 1px border_insensitive($bg_color),
							inset -1px 0 border_insensitive($bg_color),
							inset 0 -1px border_insensitive($bg_color);
			}
		}

		&.fine-tune {
			&, &.horizontal {
				&:active, &:active:hover {
					background-size: 50%;
					background-repeat: no-repeat;
					background-position: center;
				}
			}
		}

		&.mark { border-color: alpha(border_normal($bg_color), 0.5); }


		&.trough {
			@include linear-gradient(shade($bg_color, 1.08));

			margin: 7px 0;
			border: 1px solid alpha(border_normal($bg_color), 0.5);
			border-radius: $roundness;

			&:insensitive { @include linear-gradient(shade($bg_color, 0.9)); }

			&.vertical { margin: 0 7px; }
		}

		&.highlight {
			&, &.left, &.bottom {
				@include linear-gradient($selected_bg_color);

				border-color: $selected_bg_color;

				&:insensitive {
					@include linear-gradient(shade($bg_color, 0.8));

					border-color: shade($bg_color, 0.7);
				}
			}
		}
	}
}