@finqu/cool 1.0.0

package/scss/_section.scss

@@ -0,0 +1,851 @@
+// Section
+// ---------------------------------------------------------------------------------------------------------------
+
+.section-container {
+    margin-bottom: $section-spacer;
+    @include media-breakpoint-down(sm) {
+        margin-bottom: $section-spacer-mobile;
+    }
+}
+
+.section-subtitle {
+    display: block;
+    margin-bottom: $section-spacer;
+    @include media-breakpoint-down(sm) {
+        margin-bottom: $section-spacer-mobile;
+    }
+}
+
+.section {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    margin-bottom: $section-spacer;
+    box-shadow: $section-box-shadow;
+    border-radius: $border-radius;
+    @include media-breakpoint-down(sm) {
+        margin-bottom: $section-spacer-mobile;
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    &.section-height-auto {
+        height: auto;
+    }
+
+    &.section-parent {
+        > .section-content {
+            padding: 0;
+        }
+    }
+
+    // Guide
+    &.section-guide {
+        &:not(.show-more) {
+            .section-content {
+                @include media-breakpoint-down(md) {
+                    p {
+                        &:not(:first-child) {
+                            display: none;
+                        }
+
+                        &:first-child {
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            margin-bottom: 0;
+                        }
+                    }
+                }
+
+                @include media-breakpoint-up(md) {
+                    [name="guide-read-more"] {
+                        display: none;
+                    }
+                }
+            }
+
+            .guide-videos {
+                @include media-breakpoint-down(md) {
+                    display: none;
+                }
+            }
+        }
+        .guide-content {
+            & + .guide-videos {
+                @include media-breakpoint-down(md) {
+                    margin-top: 20px;
+                }
+            }
+        }
+    }
+
+    // Image
+    .section-image {
+        position: relative;
+        background-color: color('white');
+        background-size: cover;
+        background-repeat: no-repeat;
+        overflow: hidden;
+        border-top-left-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+
+        &.size-sm {
+            min-height: 170px;
+        }
+
+        &.size-md {
+            min-height: 230px;
+        }
+
+        &.size-lg {
+            min-height: 326px;
+        }
+
+        &.darken-image {
+            z-index: 1;
+            &:after {
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                background-color: rgba(0,0,0,0.15);
+                content: '';
+                z-index: -1;
+            }
+        }
+
+        & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+
+        .image-badge {
+            position: absolute;
+            top: 30px;
+            left: -40px;
+            transform: rotate(-40deg);
+            background-color: color('blue');
+            color: color('white');
+            box-shadow: 0 0 3px rgba(0,0,0,0.3);
+            text-align: center;
+            letter-spacing: 1px;
+            width: 220px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            box-sizing: border-box;
+            padding: 10px 0;
+            font-size: 12px;
+
+            .image-badge-content {
+                display: block;
+                width: 145px;
+                height: 18px;
+                margin-left: 28px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
+    }
+
+    // Video
+    .section-video {
+        height: 100%;
+        background-color: color('black');
+        border-radius: $border-radius;
+        overflow: hidden;
+
+        &.size-md {
+            height: 230px;
+        }
+
+        &.size-lg {
+            max-height: 326px;
+        }
+
+        &.has-content {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+    }
+
+    // Bg
+    &.section-bg {
+        .section-content {
+            background-color: transparent;
+            background-size: cover;
+            background-repeat: no-repeat;
+
+            &.darken-bg {
+                position: relative;
+                z-index: 2;
+
+                &:after {
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    left: 0;
+                    background-color: rgba(0,0,0,0.15);
+                    content: '';
+                    z-index: -1;
+                }
+            }
+        }
+    }
+
+    // Diviner
+    .section-hr {
+    	background: $section-bg;
+    	padding-top: $section-padding / 2;
+    	padding-bottom: $section-padding / 2;
+
+        &.content-full-width {
+            &:after {
+                margin-left: 0;
+                margin-right: 0;
+            }
+        }
+
+    	&:after {
+    		display: block;
+    		content: '';
+		    height: 1px;
+		    background: $section-divider-color;
+            margin-left: $section-padding;
+            margin-right: $section-padding;
+    	}
+    }
+
+    // Tabs
+    .section-tabs {
+    	background: $section-tabs-bg;
+    	color: $section-color;
+        border-top-left-radius: $section-border-radius;
+        border-top-right-radius: $section-border-radius;
+
+        & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+
+        & + .section-hr {
+            margin-top: -$section-padding / 2;
+            margin-bottom: -$section-padding / 2;
+        }
+
+        > .tabs-container {
+        	display: flex;
+        	align-items: stretch;
+        	flex-wrap: nowrap;
+        	list-style: none;
+        	padding: 0;
+    		margin: 0;
+    		overflow: visible;
+    		border-bottom: 1px solid $section-tabs-border-color;
+
+        	> .tab-item {
+        		display: flex;
+        		align-items: stretch;
+        		flex-grow: 0;
+        		flex-shrink: 0;
+        		position: relative;
+        		margin: 0;
+
+        		&:first-child {
+        			> .tab-item-action {
+        				margin-left: $section-tabs-item-margin-x;
+        			}
+        		}
+
+        		&.dropdown-container {
+        			display: none;
+        			&.visible {
+        				display: flex;
+        			}
+        		}
+
+        		> .tab-item-action {
+        			display: flex;
+        			align-items: center;
+        			justify-content: center;
+        			flex-grow: 1;
+        			line-height: 1;
+        			position: relative;
+        			text-align: center;
+        			cursor: pointer;
+        			min-width: $section-tabs-item-min-width;
+        			padding: $section-tabs-item-padding-y 0;
+        			margin-right: $section-tabs-item-margin-x;
+        			color: $section-tabs-color;
+        			border-bottom: $section-tabs-border-width solid transparent;
+
+        			&:hover {
+        				color: $section-tabs-hover-color;
+        				border-color: $section-tabs-border-hover-color;
+        			}
+
+        			&.active {
+        				color: $section-tabs-active-color;
+        				border-color: $section-tabs-border-active-color;
+        			}
+        		}
+
+                > span.tab-item-action {
+                    cursor: default;
+                }
+        	}
+        }
+    }
+
+    // Filters
+    .section-filters {
+    	position: absolute;
+    	visibility: hidden;
+    	flex-wrap: wrap;
+    	background: $section-bg;
+    	color: $section-color;
+    	padding: $section-padding / 2;
+    	box-sizing: border-box;
+    	border-top: 1px solid $section-divider-color;
+
+        & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
+            margin-top: -$border-radius;
+        }
+
+        & + .section-hr {
+            margin-top: -$section-padding / 2;
+            margin-bottom: -$section-padding / 2;
+        }
+
+    	&.active {
+    		display: flex;
+    		position: static;
+    		visibility: visible;
+    	}
+
+    	.filter {
+    		position: absolute;
+    		visibility: hidden;
+    		flex: 0 0 25%;
+            max-width: 25%;
+  			padding: $section-padding / 2;
+  			box-sizing: border-box;
+            @include media-breakpoint-only(md) {
+  				flex: 0 0 50%;
+                max-width: 50%;
+            }
+            @include media-breakpoint-down(sm) {
+  				flex: 0 0 100%;
+                max-width: 100%;
+  			}
+
+  			&.active {
+  				position: static;
+    			visibility: visible;
+  			}
+    	}
+    }
+
+    // Bulk actions
+    .section-bulk-actions {
+        position: absolute;
+        visibility: hidden;
+        flex-wrap: wrap;
+        background: $section-bg;
+        color: $section-color;
+        padding: $section-padding / 2;
+        box-sizing: border-box;
+        border-top: 1px solid $section-divider-color;
+
+        & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
+            margin-top: -$border-radius;
+        }
+
+        & + .section-hr {
+            margin-top: -$section-padding / 2;
+            margin-bottom: -$section-padding / 2;
+        }
+
+        &.active {
+            display: flex;
+            position: static;
+            visibility: visible;
+        }
+
+        .bulk-action {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            position: absolute;
+            visibility: hidden;
+            padding: $section-padding / 2;
+            box-sizing: border-box;
+            @include media-breakpoint-down(md) {
+                flex-wrap: wrap;
+                flex-direction: column;
+                align-items: flex-start;
+            }
+
+            &.active {
+                position: static;
+                visibility: visible;
+            }
+
+            .bulk-action-select {
+                display: inline-flex;
+                flex: 1;
+                align-items: center;
+                font-size: 12px;
+                max-width: 200px;
+                width: 100%;
+                @include media-breakpoint-down(md) {
+                    margin-top: 15px;
+                }
+                @include media-breakpoint-up(md) {
+                    margin-left: auto;
+                    margin-right: 10px;
+                }
+
+                & + .bulk-action-actions  {
+                    margin-left: 0;
+                }
+
+                .form-control {
+                    margin-left: 5px;
+                }
+            }
+
+            .bulk-action-actions {
+                @include media-breakpoint-down(md) {
+                    margin-top: 15px;
+                }
+                @include media-breakpoint-up(md) {
+                    margin-left: auto;
+                }
+            }
+        }
+    }
+
+    // Placeholder
+    .section-placeholder {
+        flex-direction: column;
+        flex-grow: 1;
+    	align-items: center;
+    	justify-content: center;
+    	background: $section-bg;
+    	color: $section-color;
+        border-radius: $section-border-radius;
+        padding: $section-padding * 3 $section-padding;
+        overflow-x: auto;
+        box-sizing: border-box;
+
+        & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
+            margin-top: -$border-radius;
+        }
+
+        & + .section-hr {
+            margin-top: -$section-padding / 2;
+            margin-bottom: -$section-padding / 2;
+        }
+
+    	.placeholder-icon {
+    		.icon-container {
+    			display: flex;
+    			align-items: center;
+    			justify-content: center;
+    			border-radius: 50%;
+    			width: 100px;
+    			height: 100px;
+    			color: color('grey-darker');
+    			background-color: color('grey-lighter');
+    			padding: 10px;
+                margin: 0 auto;
+                box-sizing: content-box;
+
+    			.icon {
+    				font-size: 5rem;
+    			}
+    		}
+
+    		& + .placeholder-title,
+    		& + .placeholder-description,
+    		& + .placeholder-action,
+            & + .placeholder-action-secondary {
+    			margin-top: 20px;
+    		}
+    	}
+
+    	.placeholder-title {
+            text-align: center;
+    		color: darken(color('grey-darker'), 10%);
+
+    		& + .placeholder-description {
+    			margin-top: 10px;
+    		}
+
+    		& + .placeholder-action,
+            & + .placeholder-action-secondary {
+    			margin-top: 20px;
+    		}
+    	}
+
+    	.placeholder-description {
+            text-align: center;
+    		font-weight: $font-weight-light;
+    		color: color('grey-darker');
+
+    		.description {
+    			margin-bottom: 0;
+    		}
+
+    		& + .placeholder-action,
+            & + .placeholder-action-secondary {
+    			margin-top: 20px;
+    		}
+    	}
+
+    	.placeholder-action {
+            text-align: center;
+
+            & + .placeholder-action-secondary {
+                margin-top: 20px;
+            }
+        }
+    }
+
+    // Header
+    .section-title,
+    .section-sub-heading {
+    	font-family: $section-header-font-family;
+        font-size: $section-header-font-size;
+        font-weight: $section-header-font-weight;
+        color: $section-header-color;
+        background: $section-header-bg;
+        border-radius: $border-radius;
+        padding: $section-padding;
+        align-items: center;
+        display: flex;
+        @include media-breakpoint-down(sm) {
+        	display: block;
+        }
+
+        & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none):not(.section-collapse),
+        & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
+            margin-top: -$border-radius;
+            padding-top: 0;
+        }
+
+        & + .section-collapse.visible:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
+            padding-top: 0;
+        }
+
+        & + .section-hr {
+            margin-top: -$section-padding / 2;
+            margin-bottom: -$section-padding / 2;
+        }
+
+        .title {
+        	align-self: center;
+	        text-align: left;
+            @include media-breakpoint-down(sm) {
+        		display: block;
+        	}
+
+            p {
+                font-weight: $font-weight-normal;
+                font-size: $font-size-base;
+            }
+        }
+
+        .actions {
+        	color: $section-header-actions-color;
+            font-weight: $font-weight-normal;
+            font-size: $font-size-base;
+        	margin-left: auto;
+            text-align: right;
+            @include media-breakpoint-down(sm) {
+            	display: block;
+            	text-align: left;
+            	margin-top: 15px;
+            }
+        }
+
+        > .title > .icon,
+        > .icon {
+        	color: $section-header-icons-color;
+            font-size: $section-header-icons-size;
+            margin-right: 5px;
+        }
+
+        .btn-group,
+        .form-group {
+            margin: 0;
+        }
+
+        & + .section-content {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+
+        &.inline-actions {
+            display: flex;
+
+            .title {
+                display: flex;
+            }
+
+            .actions {
+                display: flex;
+                margin-top: 0;
+                text-align: right;
+            }
+        }
+    }
+
+    // Content
+    .section-content {
+        flex-direction: column;
+        flex-grow: 1;
+    	background: $section-bg;
+    	color: $section-color;
+        border-radius: $section-border-radius;
+        padding: $section-padding;
+        overflow-x: auto;
+        box-sizing: border-box;
+
+        & + .section-tabs:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-content:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none):not(.section-collapse),
+        & + .section-filters:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-bulk-actions:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-title:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none),
+        & + .section-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
+            margin-top: -$border-radius;
+        }
+
+        & + .section-hr {
+            margin-top: -$section-padding / 2;
+            margin-bottom: -$section-padding / 2;
+        }
+
+        &.section-collapse {
+            transition: padding .35s ease, margin .35s ease;
+
+            &:not(.visible) {
+                margin-top: 0;
+                padding-top: 0;
+                padding-bottom: 0;
+            }
+        }
+
+        &.section-content-parent {
+            padding: 0;
+        }
+
+        &.no-background {
+            padding: 0;
+            background: transparent;
+        }
+
+        &.attribute-trees {
+            padding: 0;
+            background: transparent;
+            padding: 0;
+            border-radius: 0;
+
+            .attribute-tree {
+                padding: 15px;
+                border-radius: $border-radius;
+                background: white;
+                padding: 15px;
+            }
+        }
+
+        & + .section-sub-heading {
+        	border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+
+        .content-full-width {
+            @include media-breakpoint-up(lg) {
+                margin-left: -$section-padding;
+                margin-right: -$section-padding;
+            }
+        }
+
+        .section-content-box {
+            padding: $section-padding;
+            border: 1px solid rgba(0,0,0,0.1);
+            border-radius: 3px;
+        }
+
+        .flex-center {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .definition-spacer {
+            height: 20px;
+        }
+
+        .definition {
+            padding: 2px 0;
+            display: flex;
+            flex-wrap: wrap;
+            @media (min-width: 500px) {
+                flex-wrap: nowrap;
+            }
+
+            &.definition-payment-summary {
+                background: color('grey-lighter');
+                padding: 10px;
+                border-radius: $border-radius;
+                margin: 10px 0;
+                font-weight: 500;
+            }
+
+            &.definition-payment-detail {
+                margin: 5px 0;
+                font-size: 13px;
+                padding: 5px 10px;
+            }
+
+            &.definition-payment-total {
+                border-top: 1px solid $border-color;
+                padding: 10px;
+                margin: 10px 0;
+                font-weight: 500;
+                text-transform: uppercase;
+            }
+
+            .definition-heading {
+                flex: 0 0 100%;
+                color: color('grey-darker');
+                font-size: 12px;
+                @media (min-width: 500px) {
+                    color: $body-color;
+                    font-size: 14px;
+                    flex: 0 1 180px;
+                }
+            }
+
+            .definition-content {
+                flex: 1;
+                order: 1;
+                align-self: center;
+            }
+
+            .definition-edit {
+                order: 2;
+                flex: 0 1 50px;
+            }
+
+            .definition-total {
+                order: 2;
+                text-align: right;
+                flex: 0 1 auto;
+            }
+
+            &.status {
+                padding: 10px;
+
+                .definition-content {
+                    font-size: 30px;
+                }
+
+                .definition-edit {
+                    font-size: 18px;
+                }
+            }
+        }
+
+        p:last-child {
+        	margin-bottom: 0;
+        }
+    }
+
+    // Greeting
+    &.section-greeting {
+        border-radius: 0;
+        box-shadow: none;
+        text-align: center;
+        margin-top: 30px;
+        margin-bottom: 50px;
+        @include media-breakpoint-down(sm) {
+            margin-top: 20px;
+            margin-bottom: 30px;
+        }
+
+        .greeting-title {
+            margin-top: 0;
+            color: color('grey-darkest');
+            font-weight: 300;
+            margin-bottom: 0;
+
+            & + .greeting-description {
+                margin-top: $headings-margin-bottom;
+            }
+
+            strong {
+                font-weight: 400;
+            }
+        }
+
+        .greeting-description {
+            margin-bottom: 0;
+            color: color('grey-darkest');
+            font-weight: 300;
+        }
+    }
+}