OwlCyberSecurity - MANAGER

Edit File: _transition_gallery.scss

#ls-transition-window {

&.hide-special-effects {
		#tryorigami {
			display: none;
		}

#transitionmenu {
			margin-top: 60px;
		}
	}

header {

#tryorigami {
			margin-top: 60px;
			width: 100%;
			height: 250px;
			background-image: url(../img/origami-bg.png);
			text-align: center;
			border-radius: 5px;
			cursor: pointer;

img {
				height: 100%;
			}
		}

#transitionmenu {
		margin-top: 20px;
		line-height: 40px;
		font-size: 14px;
		height: 40px;
		border-radius: 5px;
		background: #00a0d2;
		color: white;

&.buildermenu {
				margin-top: 60px;
			}

span, i {
				font-style: normal;
			}

ul {
				list-style: none;
				height: inherit;
				line-height: inherit;
				font-size: inherit;
				color: inherit;
				display: inline-block;

li {
					margin: 0 !important;
					display: inline-block;
					height: 24px;
					line-height: 24px;
					text-transform: uppercase;
					font-size: inherit;
					color: inherit;
					border-radius: 5px;
					position: relative;
					font-weight: 600;
					opacity: .75;

&:hover, &.active {
						opacity: 1;
					}

&.active {
						background: white;
						color: #00a0d2;

&:after {
							content: '';
							position: absolute;
							border: 5px solid transparent;
							border-top-color: white;
							left: 50%;
							margin-left: -5px;
							top: 100%;
						}
					}
				}
			}

i, li {
				cursor: pointer;
			}

span, i, li {
				padding: 0 10px !important;
			}

span, ul {
				float: left;
			}

i {
				display: inline-block;
				float: right;
			}
		}
	}

#ls-transitions-list {

section {
			display: none;
			text-align: left;

&.active {
				display: block;
			}

h4 {
				margin-top: 0;
				text-transform: uppercase;
				color: #00a0d2;
				font-size: 16px !important;
			}

small {
				display: inline-block;
				line-height: 20px;
			}

.ls-description {
				padding: 0 20px !important;
				text-align: justify;
			}

.button-hero {
				border: 3px solid #00a0d2 !important;
				color: #00a0d2 !important;
				background: white !important;
				text-shadow: none !important;
				box-shadow: none !important;
				text-transform: uppercase !important;
				font-size: 16px !important;
				font-weight: 600 !important;
				line-height: 40px !important;
				margin: 0 !important;

&:hover {
					background: #00a0d2 !important;
					color: white !important;
				}
			}

div {
				text-align: justify;
			}

.tr-item,
			.separated {
				box-sizing: border-box;
				display: inline-block;
				text-align: left;

&:nth-child(odd) {
					margin-right: 5px;
				}

&:nth-child(even) {
					margin-left: 5px;
				}
			}

.separated {
				margin: 0 0 10px 0 !important;
				width: 100%;
				border: 2px solid #ddd;
				border-radius: 7px;

table {
					border-collapse: collapse;
					border-spacing: 0;

td {
						padding: 20px;
					}

tr:first-child td:first-child {
						padding-bottom: 0 !important;
						width: 270px;
					}
				}

h4, p.center {
					text-align: center;
				}

h4 {
					font-size: 20px !important;
					margin: 0 !important;
				}

.ls-select-special-transition {
					position: relative;
					display: inline-block !important;
					border-radius: 50px !important;
					border: 3px solid #00a0d2 !important;
					color: #00a0d2 !important;
					background: white !important;
					font-size: 16px !important;
					font-weight: 600 !important;
					height: 40px !important;
					line-height: 40px !important;
					margin: 0 !important;
					text-align: center !important;
					padding: 0 30px !important;
					cursor: pointer !important;

.dashicons-yes {
						font-size: 50px !important;
						height: 100% !important;
						line-height: 42px !important;
						position: relative !important;
						left: -30px !important;
						display: none !important;
					}

.dashicons-lock {
						position: absolute;
						left: 50%;
						top: 6px;
						width: 30px;
						height: 30px;
						margin-left: -11px;

color: #0085af !important;
						font-size: 30px;
						line-height: 30px;
					}

&:hover,
					&.on {
						background: #00a0d2 !important;
						color: white !important;
					}

&.locked {
						background: white !important;
						color: rgba( 0, 160, 210, 0.3) !important;
						border: 3px solid rgba( 0, 160, 210, 0.3) !important;
						cursor: default !important;
					}

&.on {
						.dashicons {
							display: inline-block !important;
						}
					}
				}

.ls-example-link {
					padding-top: 10px !important;

a {
						color: #00a0d2;

&:hover {
							text-decoration: none;
						}
					}
				}

&.ls-future {
					padding: 20px !important;
					border: 2px dashed #ddd !important;

h4 {
						color: #ccc !important;
						text-transform: none !important;
						font-weight: 400 !important;
					}
				}
			}

.tr-item {
				width: calc( 50% - 5px );
				background: #f5f5f5;
				border-bottom: 1px solid #ddd;
				border-radius: 5px;
				padding: 10px;
				cursor: pointer;

&:hover {
					background: #eee;
				}

span {
					float: left;
					display: inline-block;

&:first-child {
						width: 24px;
						margin-right: 10px;
					}

&:last-child {
						text-decoration: none;
						text-align: left;
						width: calc( 100% - 44px ) !important;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}

i:last-child {
						color: #6ea214;
						font-size: 26px;
						margin-left: -5px;
					}
				}

&.added {
					background: rgba(110,162,20,.15);

span:first-child i {
						&:first-child {
							display: none;
						}
						&:last-child {
							display: inline-block;
						}
					}
				}
			}
		}
	}
}

#ls-transition-window .ls-checkbox {
	margin-right: 5px;
	margin-top: 5px;
}

#ls-transition-window table {
	border-spacing: 10px;
	border-collapse: separate;
}

#ls-transition-window section {
	// display: none;
}

#ls-transition-window section.active {
	display: block;
}

#ls-transition-window section a {
}

#ls-transition-window section span i {
	font-style: normal;
}

#ls-transition-window section span i:last-child {
	display: none;
}

#ls-transition-window section span.added i:first-child {
	display: none;
}

#ls-transition-window section span.added i:last-child {
	display: inline-block;
	color: #92BD67;
	line-height: inherit;
	font-size: 25px;
	margin-left: -7px;
}

.ls-icon-star {
	width: 16px;
	height: 16px;
	display: block;
	float: right;
	margin: 2px 8px 0px 10px;
	background: transparent url(../img/sprite.png) 0px -810px no-repeat;
}