From f89ddcd9b833a578fc45bd5b86e5fe54351a0253 Mon Sep 17 00:00:00 2001 From: vktrrdk Date: Fri, 5 Apr 2024 16:04:37 +0000 Subject: [PATCH] fix(Project Overview): Project type logo --- .../projectmanagement/overview.component.html | 40 +- .../projectmanagement/overview.component.ts | 3 + src/scss/_custom.scss | 1325 +++++++++-------- 3 files changed, 693 insertions(+), 675 deletions(-) diff --git a/src/app/projectmanagement/overview.component.html b/src/app/projectmanagement/overview.component.html index 279c5cb3d6..fed9c9544a 100644 --- a/src/app/projectmanagement/overview.component.html +++ b/src/app/projectmanagement/overview.component.html @@ -20,7 +20,6 @@

target="_blank" title="This is an Openstack project" > - - + target="_blank" title="This is a Simple VM project" > - - - - - + {{ project_application?.project_application_name }}

@@ -120,26 +113,17 @@

- - - - - - -

target="_blank" title="This is an Openstack project" > - - + target="_blank" title="This is a Simple VM project" > - - - - - + {{ project_application?.project_application_shortname }}

@@ -861,26 +838,17 @@

- - - - - - - {{ project_application?.project_application_name }} diff --git a/src/app/projectmanagement/overview.component.ts b/src/app/projectmanagement/overview.component.ts index c7901c9121..4c1dcbc466 100644 --- a/src/app/projectmanagement/overview.component.ts +++ b/src/app/projectmanagement/overview.component.ts @@ -122,6 +122,9 @@ export class OverviewComponent extends ApplicationBaseClassComponent implements memberApplicationsLoaded: boolean = false; title: string = 'Project Overview'; + simple_vm_logo: string = 'static/webapp/assets/img/simpleVM_Logo.svg'; + openstack_logo: string = 'static/webapp/assets/img/openstack_plain_red.svg'; + checked_member_list: number[] = []; // modal variables for User list public project_members: ProjectMember[] = []; diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss index a8f11b8e62..973ec46c47 100644 --- a/src/scss/_custom.scss +++ b/src/scss/_custom.scss @@ -6,55 +6,57 @@ // due to change from ngx-perfect-scrollbar to ngx-scrollbar .highlight-filter { - background-color: yellow; + background-color: yellow; } /* Sortable table demo */ th[appSortable] { - cursor: pointer; - user-select: none; - -webkit-user-select: none; + cursor: pointer; + user-select: none; + -webkit-user-select: none; } -th[appSortable].desc:before, th[appSortable].asc:before { - content: ''; - display: block; - background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAmxJREFUeAHtmksrRVEUx72fH8CIGQNJkpGUUmakDEiZSJRIZsRQmCkTJRmZmJgQE0kpX0D5DJKJgff7v+ru2u3O3vvc67TOvsdatdrnnP1Y///v7HvvubdbUiIhBISAEBACQkAICAEhIAQ4CXSh2DnyDfmCPEG2Iv9F9MPlM/LHyAecdyMzHYNwR3fdNK/OH9HXl1UCozD24TCvILxizEDWIEzA0FcM8woCgRrJCoS5PIwrANQSMAJX1LEI9bqpQo4JYNFFKRSvIgsxHDVnqZgIkPnNBM0rIGtYk9YOOsqgbgepRCfdbmFtqhFkVEDVPjJp0+Z6e6hRHhqBKgg6ZDCvYBygVmUoEGoh5JTRvIJwhJo1aUOoh4CLPMyvxxi7EWOMgnCGsXXI1GIXlZUYX7ucU+kbR8NW8lh3O7cue0Pk32MKndfUxQFAwxdirk3fHappAnc0oqDPzDfGTBrCfHP04dM4oTV8cxr0SVzH9FF07xD3ib6xCDE+M+aUcVygtWzzbtGX2rPBrEUYfecfQkaFzYi6HjVnGBdtL7epqAlc1+jRdAap74RrnPc4BCijttY2tRcdN0g17w7HqZrXhdJTYAuS3hd8z+vKgK3V1zWPae0mZDMykadBn1hTQBLnZNwVrJpSe/NwEeDsEwCctEOsJTsgxLvCqUl2ACftEGvJDgjxrnBqkh3ASTvEWrIDQrwrnJpkB3DSDrGW7IAQ7wqnJtkBnLRztejXXVu4+mxz/nQ9jR1w5VB86ejLTFcnnDwhzV+F6T+CHZlx6THSjn76eyyBIOPHyDakhBAQAkJACAgBISAEhIAQYCLwC8JxpAmsEGt6AAAAAElFTkSuQmCC') no-repeat; - background-size: 22px; - width: 22px; - height: 22px; - float: left; - margin-left: -22px; +th[appSortable].desc:before, +th[appSortable].asc:before { + content: ''; + display: block; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAmxJREFUeAHtmksrRVEUx72fH8CIGQNJkpGUUmakDEiZSJRIZsRQmCkTJRmZmJgQE0kpX0D5DJKJgff7v+ru2u3O3vvc67TOvsdatdrnnP1Y///v7HvvubdbUiIhBISAEBACQkAICAEhIAQ4CXSh2DnyDfmCPEG2Iv9F9MPlM/LHyAecdyMzHYNwR3fdNK/OH9HXl1UCozD24TCvILxizEDWIEzA0FcM8woCgRrJCoS5PIwrANQSMAJX1LEI9bqpQo4JYNFFKRSvIgsxHDVnqZgIkPnNBM0rIGtYk9YOOsqgbgepRCfdbmFtqhFkVEDVPjJp0+Z6e6hRHhqBKgg6ZDCvYBygVmUoEGoh5JTRvIJwhJo1aUOoh4CLPMyvxxi7EWOMgnCGsXXI1GIXlZUYX7ucU+kbR8NW8lh3O7cue0Pk32MKndfUxQFAwxdirk3fHappAnc0oqDPzDfGTBrCfHP04dM4oTV8cxr0SVzH9FF07xD3ib6xCDE+M+aUcVygtWzzbtGX2rPBrEUYfecfQkaFzYi6HjVnGBdtL7epqAlc1+jRdAap74RrnPc4BCijttY2tRcdN0g17w7HqZrXhdJTYAuS3hd8z+vKgK3V1zWPae0mZDMykadBn1hTQBLnZNwVrJpSe/NwEeDsEwCctEOsJTsgxLvCqUl2ACftEGvJDgjxrnBqkh3ASTvEWrIDQrwrnJpkB3DSDrGW7IAQ7wqnJtkBnLRztejXXVu4+mxz/nQ9jR1w5VB86ejLTFcnnDwhzV+F6T+CHZlx6THSjn76eyyBIOPHyDakhBAQAkJACAgBISAEhIAQYCLwC8JxpAmsEGt6AAAAAElFTkSuQmCC') no-repeat; + background-size: 22px; + width: 22px; + height: 22px; + float: left; + margin-left: -22px; } th[appSortable].desc:before { - transform: rotate(180deg); - -ms-transform: rotate(180deg); + transform: rotate(180deg); + -ms-transform: rotate(180deg); } .sidebar-minimized .sidebar .sidebar-nav { - padding-bottom: unset; + padding-bottom: unset; } //bb chart /*-- Chart --*/ .bb svg { - font: 10px sans-serif; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + font: 10px sans-serif; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -.bb path, .bb line { - fill: none; - stroke: #000; +.bb path, +.bb line { + fill: none; + stroke: #000; } .bb text { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } .bb-legend-item-tile, @@ -62,226 +64,227 @@ th[appSortable].desc:before { .bb-ygrid, .bb-event-rect, .bb-bars path { - shape-rendering: crispEdges; + shape-rendering: crispEdges; } .bb-chart-arc path { - stroke: #fff; + stroke: #fff; } .bb-chart-arc rect { - stroke: white; - stroke-width: 1; + stroke: white; + stroke-width: 1; } .bb-chart-arc text { - fill: #fff; - font-size: 13px; + fill: #fff; + font-size: 13px; } /*-- Axis --*/ /*-- Grid --*/ .bb-grid line { - stroke: #aaa; + stroke: #aaa; } .bb-grid text { - fill: #aaa; + fill: #aaa; } -.bb-xgrid, .bb-ygrid { - stroke-dasharray: 3 3; +.bb-xgrid, +.bb-ygrid { + stroke-dasharray: 3 3; } /*-- Text on Chart --*/ .bb-text.bb-empty { - fill: #808080; - font-size: 2em; + fill: #808080; + font-size: 2em; } /*-- Line --*/ .bb-line { - stroke-width: 1px; + stroke-width: 1px; } /*-- Point --*/ .bb-circle { - fill: currentColor; + fill: currentColor; } .bb-circle._expanded_ { - stroke-width: 1px; - stroke: white; + stroke-width: 1px; + stroke: white; } .bb-selected-circle { - fill: white; - stroke-width: 2px; + fill: white; + stroke-width: 2px; } /*-- Bar --*/ .bb-bar { - stroke-width: 0; + stroke-width: 0; } .bb-bar._expanded_ { - fill-opacity: 1; - fill-opacity: 0.75; + fill-opacity: 1; + fill-opacity: 0.75; } /*-- Focus --*/ .bb-target.bb-focused { - opacity: 1; + opacity: 1; } -.bb-target.bb-focused path.bb-line, .bb-target.bb-focused path.bb-step { - stroke-width: 2px; +.bb-target.bb-focused path.bb-line, +.bb-target.bb-focused path.bb-step { + stroke-width: 2px; } .bb-target.bb-defocused { - opacity: 0.3 !important; + opacity: 0.3 !important; } /*-- Region --*/ .bb-region { - fill: steelblue; - fill-opacity: 0.1; + fill: steelblue; + fill-opacity: 0.1; } .bb-region text { - fill-opacity: 1; + fill-opacity: 1; } /*-- Brush --*/ .bb-brush .extent { - fill-opacity: 0.1; + fill-opacity: 0.1; } /*-- Select - Drag --*/ /*-- Legend --*/ .bb-legend-item { - font-size: 12px; + font-size: 12px; } .bb-legend-item-hidden { - opacity: 0.15; + opacity: 0.15; } .bb-legend-background { - opacity: 0.75; - fill: white; - stroke: lightgray; - stroke-width: 1; + opacity: 0.75; + fill: white; + stroke: lightgray; + stroke-width: 1; } /*-- Title --*/ .bb-title { - font: 14px sans-serif; + font: 14px sans-serif; } /*-- Tooltip --*/ .bb-tooltip-container { - z-index: 10; + z-index: 10; } .bb-tooltip { - border-collapse: collapse; - border-spacing: 0; - background-color: #fff; - empty-cells: show; - -webkit-box-shadow: 7px 7px 12px -9px #777777; - -moz-box-shadow: 7px 7px 12px -9px #777777; - box-shadow: 7px 7px 12px -9px #777777; - opacity: 0.9; + border-collapse: collapse; + border-spacing: 0; + background-color: #fff; + empty-cells: show; + -webkit-box-shadow: 7px 7px 12px -9px #777777; + -moz-box-shadow: 7px 7px 12px -9px #777777; + box-shadow: 7px 7px 12px -9px #777777; + opacity: 0.9; } .bb-tooltip tr { - border: 1px solid #CCC; + border: 1px solid #CCC; } .bb-tooltip th { - background-color: #aaa; - font-size: 14px; - padding: 2px 5px; - text-align: left; - color: #FFF; + background-color: #aaa; + font-size: 14px; + padding: 2px 5px; + text-align: left; + color: #FFF; } .bb-tooltip td { - font-size: 13px; - padding: 3px 6px; - background-color: #fff; - border-left: 1px dotted #999; + font-size: 13px; + padding: 3px 6px; + background-color: #fff; + border-left: 1px dotted #999; } -.bb-tooltip td > span { - display: inline-block; - width: 10px; - height: 10px; - margin-right: 6px; +.bb-tooltip td>span { + display: inline-block; + width: 10px; + height: 10px; + margin-right: 6px; } .bb-tooltip .value { - text-align: right; + text-align: right; } /*-- Area --*/ .bb-area { - stroke-width: 0; - opacity: 0.2; + stroke-width: 0; + opacity: 0.2; } /*-- Arc --*/ .bb-chart-arcs-title { - dominant-baseline: middle; - font-size: 1.3em; + dominant-baseline: middle; + font-size: 1.3em; } .bb-chart-arcs .bb-chart-arcs-background { - fill: #e0e0e0; - stroke: #FFF; + fill: #e0e0e0; + stroke: #FFF; } .bb-chart-arcs .bb-chart-arcs-gauge-unit { - fill: #000; - font-size: 16px; + fill: #000; + font-size: 16px; } .bb-chart-arcs .bb-chart-arcs-gauge-max { - fill: #777; + fill: #777; } .bb-chart-arcs .bb-chart-arcs-gauge-min { - fill: #777; + fill: #777; } .bb-chart-arc .bb-gauge-value { - fill: #000; - /* font-size: 28px !important;*/ + fill: #000; + /* font-size: 28px !important;*/ } -s -.bb-chart-arc.bb-target g path { - opacity: 1; +s .bb-chart-arc.bb-target g path { + opacity: 1; } .bb-chart-arc.bb-target.bb-focused g path { - opacity: 1; + opacity: 1; } /*-- Zoom --*/ .bb-drag-zoom.enabled { - pointer-events: all !important; - visibility: visible; + pointer-events: all !important; + visibility: visible; } .bb-drag-zoom.disabled { - pointer-events: none !important; - visibility: hidden; + pointer-events: none !important; + visibility: hidden; } .bb-drag-zoom .extent { - fill-opacity: 0.1; + fill-opacity: 0.1; } //de.NBI-Colors: @@ -300,12 +303,13 @@ $slight_danger_indian_red: #CD5C5C; $slight_danger_persian_red: #CA3433; .sidebar .nav-item-maintenance { - background-color: $slight_danger_persian_red; - border-radius: 0; + background-color: $slight_danger_persian_red; + border-radius: 0; } -.sidebar .nav-item-maintenance .nav-link, .sidebar .nav-item-maintenance .nav-link .nav-icon { - color: $deNBI_white; +.sidebar .nav-item-maintenance .nav-link, +.sidebar .nav-item-maintenance .nav-link .nav-icon { + color: $deNBI_white; } @@ -317,1092 +321,1135 @@ $simplevmcolour: #00ADEF; @media (max-width: 992px) { - .app-header .navbar-brand { - position: unset !important; - left: 0% !important; - margin-left: 0px !important; - } + .app-header .navbar-brand { + position: unset !important; + left: 0% !important; + margin-left: 0px !important; + } } .sidebar-fixed .sidebar { - height: calc(100vh - 10.938rem); - border: 1.25rem; - border-radius: 0.625rem; - top: 4.688rem; - margin: 0.938rem; - width: 13rem; + height: calc(100vh - 10.938rem); + border: 1.25rem; + border-radius: 0.625rem; + top: 4.688rem; + margin: 0.938rem; + width: 13rem; } -.row > .ng-star-inserted { - width: unset; +.row>.ng-star-inserted { + width: unset; } .sidebar { - height: calc(100vh - 90px) !important; - padding-bottom: 0px !important; + height: calc(100vh - 90px) !important; + padding-bottom: 0px !important; - color: $deNBI_darkgrey; - background-color: $deNBI_white; - border-radius: 0.625rem; + color: $deNBI_darkgrey; + background-color: $deNBI_white; + border-radius: 0.625rem; - margin-left: 0.9375rem !important; - width: 12.5rem; - margin-top: 5rem !important; + margin-left: 0.9375rem !important; + width: 12.5rem; + margin-top: 5rem !important; } -.sidebar-narrow-unfoldable:not(:hover) .sidebar-toggler, .sidebar-narrow .sidebar-toggler { - position: unset !important; - bottom: 0; +.sidebar-narrow-unfoldable:not(:hover) .sidebar-toggler, +.sidebar-narrow .sidebar-toggler { + position: unset !important; + bottom: 0; } .sidebar .nav-title { - color: $deNBI_darkgrey; + color: $deNBI_darkgrey; } .sidebar .nav-link { - color: $deNBI_darkgrey; + color: $deNBI_darkgrey; } .sidebar .nav-link .nav-icon { - color: $deNBI_darkgrey; + color: $deNBI_darkgrey; } .sidebar .nav-link .nav-icon path { - fill: $deNBI_darkgrey !important; + fill: $deNBI_darkgrey !important; } .nav-pills .nav-link { - background: $deNBI_lightgrey; + background: $deNBI_lightgrey; } .nav-pills .nav-link.active { - background: $deNBI_cyan; + background: $deNBI_cyan; } .nav-pills .nav-link:hover { - background: $deNBI_darkgrey; + background: $deNBI_darkgrey; } .nav-pills .nav-link.active:hover { - background: $deNBI_blue; + background: $deNBI_blue; } .panel { - margin: 10px; + margin: 10px; } .sidebar .nav .nav-item .nav-link { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } .header { - min-height: 3rem; - padding: 0rem; + min-height: 3rem; + padding: 0rem; } .header-left { - background-color: $deNBI_white; - height: 3rem; - border-radius: 10px; - width: calc(100vw - (100vw - 200px)); - position: fixed; - top: 15px; - text-align: center; - margin: auto; - margin-left: 0.9375rem !important; - margin-right: 10px; - z-index: 100; + background-color: $deNBI_white; + height: 3rem; + border-radius: 10px; + width: calc(100vw - (100vw - 200px)); + position: fixed; + top: 15px; + text-align: center; + margin: auto; + margin-left: 0.9375rem !important; + margin-right: 10px; + z-index: 100; } + .sidebar.sidebar-fixed { - z-index: 5 !important; + z-index: 5 !important; } .app-footer { - background-color: $deNBI_white; - width: calc(100vw - (100vw - 200px)); - border-radius: 10px; - font-family: 'Raleway', sans-serif; - align-items: center; - padding: 0 1rem; - display: flex; - bottom: 10px; - position: fixed; - height: 54px; + background-color: $deNBI_white; + width: calc(100vw - (100vw - 200px)); + border-radius: 10px; + font-family: 'Raleway', sans-serif; + align-items: center; + padding: 0 1rem; + display: flex; + bottom: 10px; + position: fixed; + height: 54px; } .app-footer-minimized { - background-color: $deNBI_white; - width: calc(100vw - (100vw - 60px)); - border-radius: 10px; - font-family: 'Raleway', sans-serif; - align-items: center; - padding: 0 1rem; - display: flex; - bottom: 10px; - position: fixed; - height: 54px; + background-color: $deNBI_white; + width: calc(100vw - (100vw - 60px)); + border-radius: 10px; + font-family: 'Raleway', sans-serif; + align-items: center; + padding: 0 1rem; + display: flex; + bottom: 10px; + position: fixed; + height: 54px; } .header-left-minimized { - width: calc(100vw - (100vw - 60px)); - margin-left: 10px; - margin-right: 10px; + width: calc(100vw - (100vw - 60px)); + margin-left: 10px; + margin-right: 10px; } .header-right { - background-color: $deNBI_white; - height: 3rem; - border-radius: 10px; - width: calc(100vw - 250px); + background-color: $deNBI_white; + height: 3rem; + border-radius: 10px; + width: calc(100vw - 250px); - position: fixed; - top: 15px; - right: 15px; - text-align: center; - margin: auto; - z-index: 100; + position: fixed; + top: 15px; + right: 15px; + text-align: center; + margin: auto; + z-index: 100; } .header-right-maximized { - width: calc(100vw - 110px); - margin: auto; + width: calc(100vw - 110px); + margin: auto; } .navbar-brand-full { - bottom: 8px; - position: relative; + bottom: 8px; + position: relative; } .instance-card { - margin-top: 10px; - margin-bottom: 5px; + margin-top: 10px; + margin-bottom: 5px; } .navbar-brand-minimized { - left: 5px; - position: relative; + left: 5px; + position: relative; } .brand-minimized .app-header .navbar-brand { - margin-left: 0px !important; + margin-left: 0px !important; } .status-badge { - font-size: 10px; - position: relative; - top: 3px; - margin: 2px; + font-size: 10px; + position: relative; + top: 3px; + margin: 2px; } .dot { - height: 25px; - width: 25px; - background-color: #bbb; - border-radius: 50%; - display: inline-block; + height: 25px; + width: 25px; + background-color: #bbb; + border-radius: 50%; + display: inline-block; } .dot-colorless { - height: 10px; - width: 10px; - border-radius: 50%; - display: inline-block; + height: 10px; + width: 10px; + border-radius: 50%; + display: inline-block; } .pulseAnim { - border-radius: 50%; - cursor: pointer; - background: rgb(77, 189, 116); - box-shadow: 0 0 0 rgba(77, 189, 116, 0.4); - -moz-animation: pulse 2s infinite !important; - -webkit-animation: pulse 2s infinite !important; - animation: pulse 2s infinite !important; + border-radius: 50%; + cursor: pointer; + background: rgb(77, 189, 116); + box-shadow: 0 0 0 rgba(77, 189, 116, 0.4); + -moz-animation: pulse 2s infinite !important; + -webkit-animation: pulse 2s infinite !important; + animation: pulse 2s infinite !important; } .pulseAnimMigrated { - border-radius: 50%; - cursor: pointer; - background: rgba(43, 153, 255, 0.78) !important; - box-shadow: 0 0 0 rgba(9, 38, 147, 0.4); - -moz-animation: pulse 2s infinite !important; - -webkit-animation: pulse 2s infinite !important; - animation: pulse 2s infinite !important; + border-radius: 50%; + cursor: pointer; + background: rgba(43, 153, 255, 0.78) !important; + box-shadow: 0 0 0 rgba(9, 38, 147, 0.4); + -moz-animation: pulse 2s infinite !important; + -webkit-animation: pulse 2s infinite !important; + animation: pulse 2s infinite !important; } .pulseAnimProcess { - border-radius: 50%; - cursor: pointer; - background: rgba(93, 143, 179, 0.7) !important; - //box-shadow: 0 0 0 rgba(157, 177, 191, 0.75) !important; - -moz-animation: pulse 1.25s infinite !important; - -webkit-animation: pulse 1.25s infinite !important; - animation: pulse 1.25s infinite !important; + border-radius: 50%; + cursor: pointer; + background: rgba(93, 143, 179, 0.7) !important; + //box-shadow: 0 0 0 rgba(157, 177, 191, 0.75) !important; + -moz-animation: pulse 1.25s infinite !important; + -webkit-animation: pulse 1.25s infinite !important; + animation: pulse 1.25s infinite !important; } .rTable { - display: table; - width: 100%; + display: table; + width: 100%; } .rTableRow { - display: table-row; - vertical-align: inherit; - border-color: inherit; + display: table-row; + vertical-align: inherit; + border-color: inherit; } .rTableRowNoBorder { - display: table-row; - vertical-align: inherit; + display: table-row; + vertical-align: inherit; } .rTableHeading { - display: table-header-group; - background-color: #f0f3f5; + display: table-header-group; + background-color: #f0f3f5; } .rTableCell { - display: table-cell; - padding: 3px 10px; - vertical-align: inherit; + display: table-cell; + padding: 3px 10px; + vertical-align: inherit; - border-bottom: 1px solid #999999; + border-bottom: 1px solid #999999; } .rTableHead { - display: table-cell; - vertical-align: inherit; - font-weight: bold; - padding: 3px 10px; + display: table-cell; + vertical-align: inherit; + font-weight: bold; + padding: 3px 10px; - border-bottom: 2px solid #999999; - border-top: 2px solid #999999; + border-bottom: 2px solid #999999; + border-top: 2px solid #999999; } .rTableHeadNoBorder { - display: table-cell; - vertical-align: inherit; - font-weight: bold; - padding: 3px 10px; + display: table-cell; + vertical-align: inherit; + font-weight: bold; + padding: 3px 10px; } -.rTableCellNoBorder, .rTableHeadNoBorder { - display: table-cell; - padding: 3px 10px; +.rTableCellNoBorder, +.rTableHeadNoBorder { + display: table-cell; + padding: 3px 10px; } .rTableFoot { - display: table-footer-group; - font-weight: bold; - background-color: #ddd; + display: table-footer-group; + font-weight: bold; + background-color: #ddd; } .rTableBody { - display: table-row-group; + display: table-row-group; } .sidebar .nav .nav-item { - width: 100%; + width: 100%; } .app-header .navbar-brand { - width: 100%; - margin-right: 10px; + width: 100%; + margin-right: 10px; } .navbar-brand img { - max-width: 90%; + max-width: 90%; } //modals .modal-header { - color: #000 !important; - background-color: #fff !important; + color: #000 !important; + background-color: #fff !important; } .navbar-brand-full { - bottom: 8px; - position: relative; + bottom: 8px; + position: relative; } .instance-card { - margin-top: 10px; - margin-bottom: 5px; + margin-top: 10px; + margin-bottom: 5px; } .navbar-brand-minimized { - left: 5px; - position: relative; + left: 5px; + position: relative; } .brand-minimized .app-header .navbar-brand { - margin-left: 0px !important; + margin-left: 0px !important; } .container-fluid { - max-height: calc(100vh - 90px); - overflow-y: auto; - overflow-x: hidden; - border-radius: 5px; + max-height: calc(100vh - 90px); + overflow-y: auto; + overflow-x: hidden; + border-radius: 5px; } -.btn-outline-primary, .btn-outline-secondary { - color: $deNBI_lightgrey; - border-color: $deNBI_lightgrey; +.btn-outline-primary, +.btn-outline-secondary { + color: $deNBI_lightgrey; + border-color: $deNBI_lightgrey; } -.btn-outline-primary:hover, .btn-outline-secondary:hover { - color: $deNBI_white; - background-color: $deNBI_lightgrey !important;; - border-color: $deNBI_lightgrey; +.btn-outline-primary:hover, +.btn-outline-secondary:hover { + color: $deNBI_white; + background-color: $deNBI_lightgrey !important; + ; + border-color: $deNBI_lightgrey; } -.btn-outline-primary:active, .btn-outline-secondary:active { - color: white; - background-color: $deNBI_darkgrey; +.btn-outline-primary:active, +.btn-outline-secondary:active { + color: white; + background-color: $deNBI_darkgrey; } -.btn-primary, .btn-info, .btn-secondary, .table .btn-primary { - color: white; - background-color: $deNBI_lightgrey !important;; - border: none; +.btn-primary, +.btn-info, +.btn-secondary, +.table .btn-primary { + color: white; + background-color: $deNBI_lightgrey !important; + ; + border: none; } -.btn-primary:disabled, .btn-secondary:disabled, .btn-info:disabled { - background-color: $deNBI_disabled; +.btn-primary:disabled, +.btn-secondary:disabled, +.btn-info:disabled { + background-color: $deNBI_disabled; } -.btn-outline-primary:disabled, .btn-outline-secondary:disabled { - border-color: $deNBI_disabled; +.btn-outline-primary:disabled, +.btn-outline-secondary:disabled { + border-color: $deNBI_disabled; } -.btn-primary:active, .btn-secondary:active, .btn-info:active, .btn-primary:target, .btn-secondary:target, .btn-info:target, .table .btn-primary:active { - background-color: $deNBI_darkgrey !important; - border: none; +.btn-primary:active, +.btn-secondary:active, +.btn-info:active, +.btn-primary:target, +.btn-secondary:target, +.btn-info:target, +.table .btn-primary:active { + background-color: $deNBI_darkgrey !important; + border: none; } -.btn-primary:focus, .btn-secondary:focus, .btn-info:focus { - background-color: $deNBI_cyan !important;; - border: none; +.btn-primary:focus, +.btn-secondary:focus, +.btn-info:focus { + background-color: $deNBI_cyan !important; + ; + border: none; } -.btn-outline-primary:focus, .btn-primary:focus, -{ - background-color: $deNBI_lightgrey !important;; - border-color: $deNBI_lightgrey; - box-shadow: none; +.btn-outline-primary:focus, +.btn-primary:focus, + { + background-color: $deNBI_lightgrey !important; + ; + border-color: $deNBI_lightgrey; + box-shadow: none; } -.btn-outline-primary:focus, .btn-primary:focus, .table .btn-primary:focus { - background-color: $deNBI_darkgrey; - border-color: $deNBI_darkgrey; - box-shadow: none; +.btn-outline-primary:focus, +.btn-primary:focus, +.table .btn-primary:focus { + background-color: $deNBI_darkgrey; + border-color: $deNBI_darkgrey; + box-shadow: none; } .btn:focus { - box-shadow: none; + box-shadow: none; } .form-control:focus { - box-shadow: none; - border-color: $deNBI_lightgrey; + box-shadow: none; + border-color: $deNBI_lightgrey; } -select option:hover, select option:focus, select option:target { - background-color: $deNBI_cyan; +select option:hover, +select option:focus, +select option:target { + background-color: $deNBI_cyan; } -.btn-primary:hover, .btn-secondary:hover, .btn-info:hover, .table .btn-primary:hover { - color: $deNBI_white; - background-color: $deNBI_darkgrey !important;; - border: none; +.btn-primary:hover, +.btn-secondary:hover, +.btn-info:hover, +.table .btn-primary:hover { + color: $deNBI_white; + background-color: $deNBI_darkgrey !important; + ; + border: none; } .form-check-input:checked { - background-color: $deNBI_cyan; + background-color: $deNBI_cyan; } .form-check-input:focus { - box-shadow: none; + box-shadow: none; } .callout-info { - border-left-color: $deNBI_lightgrey; + border-left-color: $deNBI_lightgrey; } .bg-primary { - background-color: $deNBI_cyan !important; + background-color: $deNBI_cyan !important; } .bg-info { - color: white; - background-color: $deNBI_lightgrey !important; + color: white; + background-color: $deNBI_lightgrey !important; } .text-info-denbi { - color: $deNBI_cyan !important; + color: $deNBI_cyan !important; } .sidebar .nav .nav-item .nav-link { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } .sidebar .nav .nav-item { - width: 100%; + width: 100%; } .app-header .navbar-brand { - width: 100%; - margin-right: 10px; - position: unset !important; + width: 100%; + margin-right: 10px; + position: unset !important; } .app-header.navbar { - float: left; - position: fixed; - width: 200px; - left: 0px; + float: left; + position: fixed; + width: 200px; + left: 0px; } app-dashboard { - position: relative; + position: relative; } .nav-group-items { - background-color: white; + background-color: white; } .nav-group-items .nav-item { - background-color: white; + background-color: white; } .nav-group-items .nav-item:hover { - background-color: $deNBI_darkgrey; - color: white; + background-color: $deNBI_darkgrey; + color: white; } .nav-group-items:hover { - color: white; + color: white; } .main { - margin-top: 5rem !important; - margin-left: 13.75rem !important; + margin-top: 5rem !important; + margin-left: 13.75rem !important; } .main-maximized { - margin-left: 5.313rem !important; + margin-left: 5.313rem !important; } .btn { - cursor: pointer; + cursor: pointer; } //colors for buttons and alerts >>> -.alert-primary, .alert-info { - color: #81868A; - background-color: #DFE6ED; - border-color: #BBC1C7; +.alert-primary, +.alert-info { + color: #81868A; + background-color: #DFE6ED; + border-color: #BBC1C7; } -.btn-secondary, .btn-info { - background-color: $deNBI_lightgrey !important;; - border: none; - color: $deNBI_white; +.btn-secondary, +.btn-info { + background-color: $deNBI_lightgrey !important; + ; + border: none; + color: $deNBI_white; } .btn-primary-outline:focus { - background-color: $deNBI_darkgrey; - box-shadow: none; + background-color: $deNBI_darkgrey; + box-shadow: none; } .btn-primary-outline:hover { - border-color: $deNBI_lightgrey !important;; + border-color: $deNBI_lightgrey !important; + ; } .loader { - position: fixed; - top: 50%; - left: 50%; + position: fixed; + top: 50%; + left: 50%; } .btn { - cursor: pointer; + cursor: pointer; } header { - color: red; + color: red; } #header-help { - padding-right: 19px; + padding-right: 19px; } .modal { - background-color: rgba(0, 0, 0, 0.3); + background-color: rgba(0, 0, 0, 0.3); } .danger-border { - border-style: solid; - border-color: red; + border-style: solid; + border-color: red; } .success-border { - border-style: solid; - border-color: #B0DFC5; + border-style: solid; + border-color: #B0DFC5; } .modal-backdrop { - position: relative; + position: relative; } .card-body { - flex: 1 1 auto; - padding: 1.25rem; + flex: 1 1 auto; + padding: 1.25rem; } .collapse_no_margin { - margin: 0; + margin: 0; } .nav-item { - border-radius: 10px; - cursor: pointer; + border-radius: 10px; + cursor: pointer; } .nav { - overflow-x: hidden !important; - overflow-y: visible; + overflow-x: hidden !important; + overflow-y: visible; } .app { - background-color: #F1F1F1; + background-color: #F1F1F1; } .btn-openstack { - @include button-variant($openstackcolour, darken($openstackcolour, 7.5%), darken($openstackcolour, 10%), lighten($openstackcolour, 5%), lighten($openstackcolour, 10%), darken($openstackcolour, 30%)); + @include button-variant($openstackcolour, darken($openstackcolour, 7.5%), darken($openstackcolour, 10%), lighten($openstackcolour, 5%), lighten($openstackcolour, 10%), darken($openstackcolour, 30%)); } .btn-outline-openstack { - @include button-outline-variant($openstackcolour, #222222, lighten($openstackcolour, 5%), $openstackcolour); + @include button-outline-variant($openstackcolour, #222222, lighten($openstackcolour, 5%), $openstackcolour); } .btn-simplevm { - @include button-variant($simplevmcolour, darken($simplevmcolour, 7.5%), darken($simplevmcolour, 10%), lighten($simplevmcolour, 5%), lighten($simplevmcolour, 10%), darken($simplevmcolour, 30%)); + @include button-variant($simplevmcolour, darken($simplevmcolour, 7.5%), darken($simplevmcolour, 10%), lighten($simplevmcolour, 5%), lighten($simplevmcolour, 10%), darken($simplevmcolour, 30%)); } .btn-outline-simplevm { - @include button-outline-variant($simplevmcolour, #222222, lighten($simplevmcolour, 5%), $simplevmcolour); + @include button-outline-variant($simplevmcolour, #222222, lighten($simplevmcolour, 5%), $simplevmcolour); } // Google Font as on landing page. .app-body { - color: $deNBI_darkgrey; - font-size: 0.875rem; - background-color: #ebedef; - font-family: 'Raleway', sans-serif; - overflow-y: hidden; + color: $deNBI_darkgrey; + font-size: 0.875rem; + background-color: #ebedef; + font-family: 'Raleway', sans-serif; + overflow-y: hidden; } .flavor-image-card { - width: 16rem; - margin: 2px; - cursor: pointer; - height: auto; + width: 16rem; + margin: 2px; + cursor: pointer; + height: auto; } .flavor-image-card .card-header { - color: white; + color: white; } .flavor-card-icons { - margin: 0px 5px 10px 0px; - width: 40px; - max-height: 18px; + margin: 0px 5px 10px 0px; + width: 40px; + max-height: 18px; } .not-allowed-cursor { - cursor: not-allowed; + cursor: not-allowed; } .inactive-image-card { - pointer-events: none; - opacity: 0.5; + pointer-events: none; + opacity: 0.5; } .image-card-icons img { - margin: 0px 5px 10px 0px; - width: 40px;; - max-height: 18px; + margin: 0px 5px 10px 0px; + width: 40px; + ; + max-height: 18px; } .image-card-icons img { - width: 15px !important; - margin-left: 10px; + width: 15px !important; + margin-left: 10px; } .flavor-card-icons img { - width: 15px; + width: 15px; } .scroll-flavor { - overflow-y: auto; - overflow-x: hidden; - height: auto; - border-radius: 10px; + overflow-y: auto; + overflow-x: hidden; + height: auto; + border-radius: 10px; } #title_headline { - font-family: Raleway; - font-size: 20px !important; - text-align: center; - bottom: 5px; - color: $deNBI_darkgrey !important; - height: 100%; - margin-top: 15px; - min-width: 25%; + font-family: Raleway; + font-size: 20px !important; + text-align: center; + bottom: 5px; + color: $deNBI_darkgrey !important; + height: 100%; + margin-top: 15px; + min-width: 25%; } .w3-bar-block { - background-color: $deNBI_white; - height: 54px; - border-radius: 10px; - width: calc(100vw - 240px); - position: fixed; - top: 15px; - right: 15px; - text-align: center; - margin: auto; - z-index: 100; + background-color: $deNBI_white; + height: 54px; + border-radius: 10px; + width: calc(100vw - 240px); + position: fixed; + top: 15px; + right: 15px; + text-align: center; + margin: auto; + z-index: 100; } -.nav-link, .nav-link.active { - color: $deNBI_darkgrey; +.nav-link, +.nav-link.active { + color: $deNBI_darkgrey; } -.nav-link:hover, .nav-link:hover { - color: $deNBI_lightgrey; +.nav-link:hover, +.nav-link:hover { + color: $deNBI_lightgrey; } .sidebar .nav-dropdown.show .nav-link:hover { - background-color: $deNBI_darkgrey; - color: $deNBI_white; + background-color: $deNBI_darkgrey; + color: $deNBI_white; } .sidebar .nav-dropdown.show .nav-link:hover .nav-icon { - color: $deNBI_white; + color: $deNBI_white; } .sidebar-toggler { - background-color: white; + background-color: white; } .sidebar .nav-group.show { - color: white; - background-color: $deNBI_darkgrey; + color: white; + background-color: $deNBI_darkgrey; } .sidebar .nav-group.show .nav-group-items .nav-item { - background-color: white; - color: $deNBI_darkgrey; + background-color: white; + color: $deNBI_darkgrey; } -.sidebar .nav-group.show .nav-link.nav-group-toggle, .sidebar .nav-group.show .nav-icon { - color: white; +.sidebar .nav-group.show .nav-link.nav-group-toggle, +.sidebar .nav-group.show .nav-icon { + color: white; } .sidebar .nav-group.show .nav-group-items .nav-link .nav-icon { - color: $deNBI_darkgrey; + color: $deNBI_darkgrey; } .sidebar .nav-group.show .nav-group-items .nav-link:hover .nav-icon { - color: $white; + color: $white; } -.sidebar-nav .nav-item:hover, .sidebar .nav-item:hover > .nav-link { - background-color: $deNBI_lightgrey +.sidebar-nav .nav-item:hover, +.sidebar .nav-item:hover>.nav-link { + background-color: $deNBI_lightgrey } .sidebar-nav .nav-group-toggle::after { - color: $deNBI_darkgrey; + color: $deNBI_darkgrey; } .sidebar-nav .nav-group-toggle:hover::after { - color: white; + color: white; } .sidebar .nav-group-toggle .nav-link:hover { - background-color: $deNBI_lightgrey; - color: $deNBI_white; + background-color: $deNBI_lightgrey; + color: $deNBI_white; } .sidebar .nav-group-toggle .nav-link:hover path { - fill: #FFF !important; + fill: #FFF !important; } .sidebar .nav-link:hover { - width: 100%; - background-color: $deNBI_lightgrey; + width: 100%; + background-color: $deNBI_lightgrey; } .sidebar .nav-link.active { - background-color: $deNBI_darkgrey; - color: $deNBI_white; + background-color: $deNBI_darkgrey; + color: $deNBI_white; } .sidebar .nav-group.show .nav-link.active .nav-icon { - color: white; + color: white; } .scroll-image { - max-height: 120px; - min-height: 120px; - overflow-y: auto; + max-height: 120px; + min-height: 120px; + overflow-y: auto; } .collapse_no_margin { - margin: 0; + margin: 0; } .card.border-success { - border-width: 3px; + border-width: 3px; +} + +.po-logo { + width: 30px; + aspect-ratio: auto; + margin: 1rem; } .bg-info-flavor { - background-color: $deNBI_lightgrey; + background-color: $deNBI_lightgrey; } .bg-info-image { - background-color: $deNBI_lightgrey; - color: $deNBI_white; + background-color: $deNBI_lightgrey; + color: $deNBI_white; } .card-header.bg-info-image { - color: $deNBI_white; + color: $deNBI_white; } -a, .text-primary { - text-decoration: unset; - color: $deNBI_cyan; +a, +.text-primary { + text-decoration: unset; + color: $deNBI_cyan; } -a:hover, .text-primary:hover { - color: $deNBI_blue; +a:hover, +.text-primary:hover { + color: $deNBI_blue; } -a:visited, .text-primary:visited { - color: $deNBI_blue; +a:visited, +.text-primary:visited { + color: $deNBI_blue; } a.btn-outline-success:visited { - color: rgb(46, 184, 92); + color: rgb(46, 184, 92); } .bg-info-blue { - background-color: $deNBI_cyan; + background-color: $deNBI_cyan; } .bg-info-image { - background-color: $deNBI_lightgrey; - color: $deNBI_white; + background-color: $deNBI_lightgrey; + color: $deNBI_white; } -.btn-outline-success:hover, a.btn-outline-success:visited:hover { +.btn-outline-success:hover, +a.btn-outline-success:visited:hover { - color: white; + color: white; } -.btn-primary:visited, .btn-secondary:visited, .table .btn-primary:visited, .table .btn-primary { - color: white; +.btn-primary:visited, +.btn-secondary:visited, +.table .btn-primary:visited, +.table .btn-primary { + color: white; } .btn-openstack { - @include button-variant($openstackcolour, darken($openstackcolour, 7.5%), darken($openstackcolour, 10%), lighten($openstackcolour, 5%), lighten($openstackcolour, 10%), darken($openstackcolour, 30%)); + @include button-variant($openstackcolour, darken($openstackcolour, 7.5%), darken($openstackcolour, 10%), lighten($openstackcolour, 5%), lighten($openstackcolour, 10%), darken($openstackcolour, 30%)); } .btn-outline-openstack { - @include button-outline-variant($openstackcolour, #222222, lighten($openstackcolour, 5%), $openstackcolour); + @include button-outline-variant($openstackcolour, #222222, lighten($openstackcolour, 5%), $openstackcolour); } .btn-simplevm { - @include button-variant($simplevmcolour, darken($simplevmcolour, 7.5%), darken($simplevmcolour, 10%), lighten($simplevmcolour, 5%), lighten($simplevmcolour, 10%), darken($simplevmcolour, 30%)); + @include button-variant($simplevmcolour, darken($simplevmcolour, 7.5%), darken($simplevmcolour, 10%), lighten($simplevmcolour, 5%), lighten($simplevmcolour, 10%), darken($simplevmcolour, 30%)); } .btn-outline-simplevm { - @include button-outline-variant($simplevmcolour, #222222, lighten($simplevmcolour, 5%), $simplevmcolour); + @include button-outline-variant($simplevmcolour, #222222, lighten($simplevmcolour, 5%), $simplevmcolour); } .sidebar .nav-dropdown.open .nav-link { - color: $deNBI_blue; - background-color: $deNBI_white; + color: $deNBI_blue; + background-color: $deNBI_white; } .sidebar .nav-dropdown-items .nav-item { - color: $deNBI_blue; - background-color: $deNBI_white; + color: $deNBI_blue; + background-color: $deNBI_white; } #newsbadge { - margin: 15px !important; - position: relative !important; - border-radius: 10px; - background-color: rgba(255, 255, 255, 1); - padding: 10px !important; - max-width: 200px; + margin: 15px !important; + position: relative !important; + border-radius: 10px; + background-color: rgba(255, 255, 255, 1); + padding: 10px !important; + max-width: 200px; } #newsimage { - width: 100%; - position: relative; - transition: 0.5s; + width: 100%; + position: relative; + transition: 0.5s; } #newsbadge:hover { - opacity: 0.8; - transition: 0.5s; + opacity: 0.8; + transition: 0.5s; } .modal .table-responsive tbody tr td button { - width: 200px; + width: 200px; } -.brand-minimized .app-header.navbar, .brand-minimized .app-footer { - width: 50px !important; +.brand-minimized .app-header.navbar, +.brand-minimized .app-footer { + width: 50px !important; } .brand-minimized .app-header.navbar { - margin-right: 0px; - padding: 1px; + margin-right: 0px; + padding: 1px; } @media(max-width: 575px) { - .app-footer { - left: 15px !important; - } + .app-footer { + left: 15px !important; + } } @media(max-width: 1210px) { - .hideMe { - display: none; - } + .hideMe { + display: none; + } } @media(min-width: 1211px) { - .showMe { - display: none; - } + .showMe { + display: none; + } } // project-icon part >>> @font-face { - font-family: 'os_pr'; - src: url('../static/webapp/assets/fonts/os_pr.eot'); - src: url('../static/webapp/assets/fonts/os_pr.eot') format('embedded-opentype'), - url('../static/webapp/assets/fonts/os_pr.ttf') format('truetype'), - url('../static/webapp/assets/fonts/os_pr.woff') format('woff'), - url('../static/webapp/assets/fonts/os_pr.svg') format('svg'); - font-weight: normal; - font-style: normal; - font-display: block; -} - -[class^="project-"], [class*=" project-"] { - /* use !important to prevent issues with browser extensions that change fonts */ - font-family: 'os_pr' !important; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.project-simpleVM_Logo_bluebg .path1:before { - content: "\e902"; - color: #00adef; + font-family: 'os_pr'; + src: url('../static/webapp/assets/fonts/os_pr.eot'); + src: url('../static/webapp/assets/fonts/os_pr.eot') format('embedded-opentype'), + url('../static/webapp/assets/fonts/os_pr.ttf') format('truetype'), + url('../static/webapp/assets/fonts/os_pr.woff') format('woff'), + url('../static/webapp/assets/fonts/os_pr.svg') format('svg'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +[class^="project-"], +[class*=" project-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'os_pr' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -.project-simpleVM_Logo_bluebg .path2:before { - content: "\e903"; - margin-left: -1em; - color: rgb(255, 255, 255); -} - -.project-simpleVM_Logo_bluebg .path3:before { - content: "\e904"; - margin-left: -1em; - color: rgb(255, 255, 255); -} - -.project-simpleVM_Logo_bluebg .path4:before { - content: "\e905"; - margin-left: -1em; - color: rgb(255, 255, 255); -} - -.project-simpleVM_Logo_bluebg .path5:before { - content: "\e906"; - margin-left: -1em; - color: rgb(255, 255, 255); -} - -.project-openstack_plain_white_redbg .path1:before { - content: "\e900"; - color: rgb(255, 255, 255); -} - -.project-openstack_plain_white_redbg .path2:before { - content: "\e901"; - margin-left: -1em; - color: rgb(255, 0, 0); -} .col-1 { - width: 100%*math.div(1, 12) !important; + width: 100%*math.div(1, 12) !important; } .col-2 { - width: 100%*math.div(2, 12) !important; + width: 100%*math.div(2, 12) !important; } .col-3 { - width: 100%*math.div(3, 12) !important; + width: 100%*math.div(3, 12) !important; } .col-4 { - width: 100%*math.div(4, 12) !important; + width: 100%*math.div(4, 12) !important; } .col-5 { - width: 100%*math.div(5, 12) !important; + width: 100%*math.div(5, 12) !important; } .col-6 { - width: 100%*math.div(6, 12) !important; + width: 100%*math.div(6, 12) !important; } .col-7 { - width: 100%*math.div(7, 12) !important; + width: 100%*math.div(7, 12) !important; } .col-8 { - width: 100%*math.div(8, 12) !important; + width: 100%*math.div(8, 12) !important; } .col-9 { - width: 100%*math.div(9, 12) !important; + width: 100%*math.div(9, 12) !important; } .col-10 { - width: 100%*math.div(10, 12) !important; + width: 100%*math.div(10, 12) !important; } .col-11 { - width: 100%*math.div(11, 12) !important; + width: 100%*math.div(11, 12) !important; } .col-12 { - width: 100%*math.div(12, 12) !important; + width: 100%*math.div(12, 12) !important; } @media(min-width: 768px) { - .col-lg-1, .col-md-1, .col-sm-1 { - width: 100%*math.div(1, 12) !important; - } - - .col-lg-2, .col-md-2, .col-sm-2 { - width: 100%*math.div(2, 12) !important; - } - - .col-lg-3, .col-md-3, .col-sm-3 { - width: 100%*math.div(3, 12) !important; - } - - .col-lg-4, .col-md-4, .col-sm-4 { - width: 100%*math.div(4, 12) !important; - } - - .col-lg-5, .col-md-5, .col-sm-5 { - width: 100%*math.div(5, 12) !important; - } - - .col-lg-6, .col-md-6, .col-sm-6 { - width: 100%*math.div(6, 12) !important; - } - - .col-lg-7, .col-md-7, .col-sm-7 { - width: 100%*math.div(7, 12) !important; - } - - .col-lg-8, .col-md-8, .col-sm-8 { - width: 100%*math.div(8, 12) !important; - } - .col-lg-9, .col-md-9, .col-sm-9 { - width: 100%*math.div(9, 12) !important; - } - - .col-lg-10, .col-md-10, .col-sm-10 { - width: 100%*math.div(10, 12) !important; - } - - .col-lg-11, .col-md-11, .col-sm-11 { - width: 100%*math.div(11, 12) !important; - } - - .col-lg-12, .col-md-12, .col-sm-12 { - width: 100%*math.div(12, 12) !important; - } -} + .col-lg-1, + .col-md-1, + .col-sm-1 { + width: 100%*math.div(1, 12) !important; + } + + .col-lg-2, + .col-md-2, + .col-sm-2 { + width: 100%*math.div(2, 12) !important; + } + + .col-lg-3, + .col-md-3, + .col-sm-3 { + width: 100%*math.div(3, 12) !important; + } + + .col-lg-4, + .col-md-4, + .col-sm-4 { + width: 100%*math.div(4, 12) !important; + } + + .col-lg-5, + .col-md-5, + .col-sm-5 { + width: 100%*math.div(5, 12) !important; + } + + .col-lg-6, + .col-md-6, + .col-sm-6 { + width: 100%*math.div(6, 12) !important; + } + + .col-lg-7, + .col-md-7, + .col-sm-7 { + width: 100%*math.div(7, 12) !important; + } + + .col-lg-8, + .col-md-8, + .col-sm-8 { + width: 100%*math.div(8, 12) !important; + } + + .col-lg-9, + .col-md-9, + .col-sm-9 { + width: 100%*math.div(9, 12) !important; + } + + .col-lg-10, + .col-md-10, + .col-sm-10 { + width: 100%*math.div(10, 12) !important; + } + + .col-lg-11, + .col-md-11, + .col-sm-11 { + width: 100%*math.div(11, 12) !important; + } + + .col-lg-12, + .col-md-12, + .col-sm-12 { + width: 100%*math.div(12, 12) !important; + } +} \ No newline at end of file