@finqu/cool 1.2.29 → 2.0.2

package/less/section.less

@@ -1,793 +0,0 @@
-// Section
-.section-container {
-    margin-bottom: @section-spacer;
-    @media screen and (max-width: 767px) {
-        margin-bottom: @section-spacer-mobile;
-    }
-}
-
-.section-subtitle {
-    display: block;
-    margin-bottom: @section-spacer;
-    @media screen and (max-width: 767px) {
-        margin-bottom: @section-spacer-mobile;
-    }
-}
-
-.section {
-    margin-bottom: @section-spacer;
-    box-shadow: @section-box-shadow;
-    border-radius: @border-radius;
-    @media screen and (max-width: 767px) {
-        margin-bottom: @section-spacer-mobile;
-    }
-
-    &:last-child {
-        margin-bottom: 0;
-    }
-
-    &.section-parent {
-        > .section-content {
-            padding: 0;
-        }
-    }
-
-    // Guide
-    &.section-guide {
-        &:not(.show-more) {
-            .section-content {
-                @media screen and (max-width: 1024px) {
-                    p {
-                        &:not(:first-child) {
-                            display: none;
-                        }
-                        &:first-child {
-                            white-space: nowrap;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            margin-bottom: 0;
-                        }
-                    }
-                }
-                @media screen and (min-width: 1024px) {
-                    [name="guide-read-more"] {
-                        display: none;
-                    }
-                }
-            }
-            .guide-videos {
-                @media screen and (max-width: 1024px) {
-                    display: none;
-                }
-            }
-        }
-        .guide-content {
-            & + .guide-videos {
-                @media screen and (max-width: 767px) {
-                    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: 1;
-                &: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;
-  			@media screen and (min-width: 768px) and (max-width: 1024px) {
-  				flex: 0 0 50%;
-                max-width: 50%;
-  			}
-  			@media screen and (max-width: 767px) {
-  				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;
-            @media screen and (max-width: 1024px) {
-                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%;
-                @media screen and (max-width: 1024px) {
-                    margin-top: 15px;
-                }
-                @media screen and (min-width: 1024px) {
-                    margin-left: auto;
-                    margin-right: 10px;
-                }
-                & + .bulk-action-actions  {
-                    margin-left: 0;
-                }
-                .form-control {
-                    margin-left: 5px;
-                }
-            }
-            .bulk-action-actions {
-                @media screen and (max-width: 1024px) {
-                    margin-top: 15px;
-                }
-                @media screen and (min-width: 1024px) {
-                    margin-left: auto;
-                }
-                .btn {
-                    font-size: 13px;
-                    padding: 6px 14px
-                }
-            }
-        }
-    }
-
-    // Placeholder
-    .section-placeholder {
-    	display: flex;
-    	flex-direction: column;
-    	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 {
-    			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;
-    			i {
-    				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 {
-            & + .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: baseline;
-        display: flex;
-        @media screen and (max-width: 767px) {
-        	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),
-        & + .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-hr {
-            margin-top: -@section-padding / 2;
-            margin-bottom: -@section-padding / 2;
-        }
-
-        .title {
-        	align-self: center;
-	        text-align: left;
-        	@media screen and (max-width: 767px) {
-        		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;
-            @media screen and (max-width: 767px) {
-            	display: block;
-            	text-align: left;
-            	margin-top: 15px;
-            }
-        }
-
-        > .title > .fa,
-        > .title > .fas,
-        > .title > .far,
-        > .title > .fal,
-        > .title > .fab,
-        > .fa,
-        > .fas,
-        > .far,
-        > .fal,
-        > .fab {
-        	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 {
-    	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),
-        & + .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(.collapsed) {
-                margin-top: 0;
-                padding-top: 4px;
-                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 {
-            @media screen and (min-width: 901px) {
-                margin-left: -@section-padding;
-                margin-right: -@section-padding;
-            }
-        }
-
-        .section-content-box {
-            padding: 15px;
-            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 screen and (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 @color-border;
-                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 screen and (min-width: 500px) {
-                    color: @color-text;
-                    font-size: 14px;
-                    flex: 0 1 200px;
-                }
-            }
-
-            .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;
-        @media screen and (max-width: 767px) {
-            margin-top: 20px;
-            margin-bottom: 30px;
-        }
-        .greeting-title {
-            margin-top: 0;
-            color: @color-grey-darkest;
-            font-weight: 300;
-            strong {
-                font-weight: 400;
-            }
-        }
-        .greeting-description {
-            margin-bottom: 0;
-            color: @color-grey-darkest;
-            font-weight: 300;
-        }
-    }
-}