@finqu/cool 1.2.29 → 1.3.0

package/scss/_section.scss

@@ -1,977 +0,0 @@
-// 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;
-    font-family: $section-header-font-family;
-    font-size: $section-header-font-size;
-    font-weight: $section-header-font-weight;
-
-    @include media-breakpoint-down(sm) {
-        margin-bottom: $section-spacer-mobile;
-    }
-}
-
-.section {
-    margin-bottom: $section-spacer;
-    box-shadow: $section-box-shadow;
-    border-radius: $section-border-radius;
-    border: $section-border-width solid $section-border-color;
-
-    @include media-breakpoint-down(sm) {
-        margin-bottom: $section-spacer-mobile;
-    }
-
-    &:not([class*="order-"]):last-child,
-    &.last-child {
-        margin-bottom: 0;
-    }
-
-    &.section-height-auto {
-        height: auto;
-    }
-
-    &.section-parent {
-        > .section-content {
-            padding: 0;
-        }
-    }
-
-    // Hover
-    &.section-hover {
-        transition: box-shadow 0.1s linear;
-
-        &:hover {
-            box-shadow: $section-hover-box-shadow;
-        }
-    }
-
-    // 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: #ffffff;
-        background-size: cover;
-        background-repeat: no-repeat;
-        overflow: hidden;
-        border-top-left-radius: $section-border-radius;
-        border-top-right-radius: $section-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: #ffffff;
-            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: #000000;
-        border-radius: $section-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: $section-divider-height;
-		    background: $section-divider-color;
-            margin-left: $section-divider-padding;
-            margin-right: $section-divider-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;
-                font-family: $font-family-title;
-                font-weight: 600;
-
-        		&: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: $border-width 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: -$section-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: -$section-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: -$section-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: theme-color('medium');
-    			//background-color: $grey-100;
-    			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;
-            font-family: $font-family-title;
-            font-weight: 600;
-
-    		& + .placeholder-description {
-    			margin-top: 10px;
-    		}
-
-    		& + .placeholder-action,
-            & + .placeholder-action-secondary {
-    			margin-top: 20px;
-    		}
-    	}
-
-    	.placeholder-description {
-            text-align: center;
-    		color: theme-color('medium');
-
-    		.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 {
-        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: $section-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-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            margin-top: -$section-border-radius;
-            // padding-top: 0;
-        }
-
-        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            margin-top: -$section-border-radius;
-            padding-top: 0;
-        }
-
-        & + .section-collapse.show:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            padding-top: $section-border-radius;
-            margin-top: -$section-border-radius;
-        }
-
-        & + .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;
-            font-family: $font-family-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;
-                flex-direction: column;
-            }
-
-            .actions {
-                display: flex;
-                margin-top: 0;
-                text-align: right;
-            }
-        }
-    }
-
-    .section-sub-heading {
-    	font-family: $section-subheader-font-family;
-        font-size: $section-subheader-font-size;
-        font-weight: $section-subheader-font-weight;
-        color: $section-subheader-color;
-        background: $section-subheader-bg;
-        border-radius: $section-border-radius;
-        padding: $section-padding * 1.5 $section-padding $section-padding / 1.5 $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: -$section-border-radius;
-        }
-
-        & + .section-collapse.show:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            padding-top: $section-border-radius;
-            margin-top: -$section-border-radius;
-        }
-
-        & + .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;
-            font-family: $font-family-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-subheader-icons-color;
-            font-size: $section-subheader-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;
-                flex-direction: column;
-            }
-
-            .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-placeholder:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            margin-top: -$section-border-radius;
-            padding-top: 0;
-        }
-
-        & + .section-sub-heading:not([style*="display:none"]):not([style*="display: none"]):not(.hidden):not(.d-none) {
-            margin-top: -$section-border-radius;
-        }
-
-        & + .section-hr {
-            margin-top: -$section-padding / 2;
-            margin-bottom: -$section-padding / 2;
-        }
-
-        & .section-sub-heading {
-            padding-left: 0;
-            padding-right: 0;
-        }
-
-        & > .section-sub-heading:first-child {
-            padding-top: 0;
-            margin-top: 0;
-        }
-
-        &.section-collapse {
-            position: relative;
-            transition: padding .35s ease, margin .35s ease;
-            overflow: hidden;
-
-            &.show {
-                overflow: visible;
-            }
-
-            .collapse {
-                left: $section-padding;
-                right: $section-padding;
-
-                &.show {
-                    left: auto;
-                    right: auto;
-                }
-            }
-
-            .collapsing {
-                left: auto;
-                right: auto;
-            }
-
-            .collapse,
-            .collapsing {
-
-                .section-hr {
-                    width: 100%;
-                    padding-top: 0;
-                    padding-bottom: 0;
-
-                    &:after {
-                        margin-left: 0;
-                        margin-right: 0;
-                    }
-
-                    &.content-full-width {
-                        position: relative;
-                        margin-left: 0;
-                        margin-right: 0;
-
-                        &:after {
-                            position: absolute;
-                            left: -$section-padding;
-                            right: -$section-padding;
-                        }
-                    }
-                }
-            }
-
-            &:not(.show) {
-                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: $section-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(md) {
-                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-heading {
-                flex: 0 0 100%;
-                color: theme-color('medium');
-                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;
-        }
-    }
-}