seitime-frappe/frappe/public/scss/website.scss

@import "variables";
@import 'frappe/public/css/font-awesome';
@import "~bootstrap/scss/bootstrap";
@import 'multilevel-dropdown';
@import 'website-image';
@import 'page-builder';
@import 'markdown';

.container {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

@include media-breakpoint-up(sm) {
	.container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@include media-breakpoint-up(md) {
	.container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@include media-breakpoint-up(lg) {
	.container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@include media-breakpoint-up(xl) {
	.container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

.navbar-light {
	border-bottom: 1px solid $border-color;
}

.navbar-light .navbar-nav .nav-link {
	color: $gray-900;
	font-size: $font-size-sm;
	font-weight: 500;

	&:hover,
	&:focus, &.active {
		color: $primary;
	}
}

.navbar-brand {
	img {
		display: inline-block;
		max-width: 150px;
		max-height: 25px;
	}
}

.dropdown-menu {
	padding: 0.25rem;
}

.dropdown-item {
	border-radius: $dropdown-border-radius;
}

.navbar.bg-dark {
	.dropdown-menu {
		font-size: 0.75rem;
		background-color: $dark;
		border-radius: 0;
	}

	.nav-link {
		white-space: nowrap;
		color: $light;

		&:hover {
			color: $primary;
		}
	}

	.nav-item {
		padding: 0rem 1rem;
	}

	.dropdown-item {
		color: $light;

		&:hover {
			background-color: $dark;
			color: $primary;
		}
	}
}

.input-dark {
	background-color: $dark;
	border-color: darken($primary, 40%);
	color: $light;
}

.breadcrumb {
	padding-left: 0;
	padding-right: 0;
	background-color: white;
}

a.card {
	text-decoration: none;
}

.hidden {
	@extend .d-none;
}

.hide-control {
	@extend .d-none;
}

.text-underline {
	text-decoration: underline;
}

.text-extra-muted {
	color: #d1d8dd !important;
}

// footer

.web-footer {
	padding: 5rem 0;
	min-height: 140px;
}

.footer-logo {
	width: 5rem;
	height: 2rem;
	object-fit: contain;
}

.footer-link, .footer-child-item a {
	font-weight: 500;
	color: $gray-900;

	&:hover {
		color: $primary;
		text-decoration: none;
	}
}

.footer-col-left, .footer-col-right {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.footer-col-right {
	@include media-breakpoint-up(sm) {
		text-align: right;
	}
}

.footer-col-left .footer-link {
	margin-right: 1rem;
}

.footer-col-right .footer-link {
	margin-right: 1rem;
	@include media-breakpoint-up(sm) {
		margin-right: 0;
		margin-left: 1rem;
	}
}

.footer-group-label {
	color: $text-muted;
}

.footer-parent-item {
	margin-bottom: 0.5rem;
}

.footer-info {
	border-top: 1px solid $border-color;
	color: $text-muted;
	font-size: $font-size-sm;
}

.no-underline {
	text-decoration: none !important;
}

.indicator {
	font-size: inherit;
}

h4.modal-title {
	font-size: 1em;
}

h5.modal-title {
	margin: 0px !important;
}

.col-xs-1 {
	@extend .col-1;
}
.col-xs-2 {
	@extend .col-2;
}
.col-xs-3 {
	@extend .col-3;
}
.col-xs-4 {
	@extend .col-4;
}
.col-xs-5 {
	@extend .col-5;
}
.col-xs-6 {
	@extend .col-6;
}
.col-xs-7 {
	@extend .col-7;
}
.col-xs-8 {
	@extend .col-8;
}
.col-xs-9 {
	@extend .col-9;
}
.col-xs-10 {
	@extend .col-10;
}
.col-xs-11 {
	@extend .col-11;
}
.col-xs-12 {
	@extend .col-12;
}

.btn-default {
	@extend .btn-light;
}

.btn-xs {
	@extend .btn-sm;
}

.hidden-xs {
	@extend .d-none;
	@extend .d-sm-block;
}

.visible-xs {
	@extend .d-block;
	@extend .d-sm-none;
}

.form-section {
	margin-right: -45px;
}

.form-section .section-body {
	width: 100%;
	padding: 15px;
	@extend .row;
}

.pull-right {
	float: right;
}

.btn-primary-light {
	$primary-light: lighten($primary, 42%);
	@include button-variant(
		$background: $primary-light,
		$border: $primary-light,
		$hover-background: lighten($primary-light, 1%),
		$hover-border: $primary-light,
		$active-background: lighten($primary-light, 1%),
		$active-border: darken($primary-light, 12.5%)
	);

	color: darken($primary, 5%);
	&:hover {
		color: darken($primary, 5%);
	}
}

.image-with-blur {
	transition: filter 300ms ease-in-out;
	filter: blur(1.5rem);
}

.image-loaded {
	filter: blur(0rem);
}