ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / lab2454c / fcxpro.com / wp-content / plugins / webon-core / inc / shortcodes / progress-bar / assets / css / scss

/* ==========================================================================
   Progress Bar shortcode styles
   ========================================================================== */

.qodef-progress-bar {
	@include qodefRelativeLayout();
	visibility: hidden;
	
	.qodef-m-inner {
		position: relative;
		display: flex;
		flex-direction: column;
	}
	
	.qodef-m-canvas {
		@include qodefRelativeLayout();
		
		svg {
			display: block;
		}
	}
	
	.percentCount {
		font-weight: 700;
	}
	
	.qodef-m-title {
		margin: 40px 0 0;
	}
	
	.qodef-m-text {
		margin: 14px 0 0;
		color: $text-color;
	}
	
	&.qodef--init {
		visibility: visible;
	}
	
	&:not(.qodef-layout--line) {
		
		.progressbar-text {
			@include qodefAbsoluteLayout();
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			margin: 0;
			@include qodefHeadingStyle('h3');
			letter-spacing: -.05em;
		}
		
		.progressbar-text-inner {
			position: relative;
			display: flex;
			line-height: 1em;
		}
		
		.progressbar-percentage {
			position: relative;
			display: inline-flex;
			top: 0;
			right: 0;
			font-size: 27px;
			line-height: 1;
		}
	}
	
	&.qodef-layout--circle {
		
		.qodef-m-inner-border {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			width: 90%;
			height: 90%;
			border: 1px solid $border-color;
			border-radius: 50%;
			box-sizing: border-box;
		}
		
		&.qodef-content--right {
			
			@media only screen and (min-width: $screen-size-481) {
				
				.qodef-m-inner {
					flex-direction: row;
					align-items: center;
				}
				
				.qodef-m-canvas {
					margin-right: 45px;
				}
				
				.qodef-m-title {
					margin: 0;
				}
			}
			
			@media only screen and (min-width: $screen-size-1280) and (max-width: $screen-size-1440) {
				
				.qodef-m-canvas {
					margin-right: 30px;
				}
			}
			
			@include qodefScreenSize680 {
				
				.qodef-m-canvas {
					max-width: 180px;
				}
			}
			
			.qodef-m-content {
				@include qodefRelativeLayout();
			}
		}
	}
	
	&.qodef-layout--semi-circle {
		
		.progressbar-text {
			padding-top: 20px;
			transform: none !important;
		}
	}
	
	&.qodef-layout--line {
		
		.qodef-m-inner {
			flex-direction: column-reverse;
		}
		
		.qodef-m-canvas {
			padding-bottom: 5px;
			border-bottom: 1px solid;
			border-color: $border-color;
		}
		
		.proggress {
			width: 0;
		}
		
		.percentCount {
			position: absolute;
			top: -28px;
			right: 0;
			width: auto;
		}
		
		.qodef-m-title {
			margin: 0 0 3px;
		}
		
		p.qodef-m-title {
			font-weight: 700;
		}
		
		&.qodef-percentage--floating {
			
			.percentCount {
				left: 0;
				right: auto;
				transform: translateX(-100%);
			}
		}
	}
}

[+] ..
[-] _progress-bar-default.scss [edit]