From 1272456ab2cb77f29b27f3839563b09a709cbc06 Mon Sep 17 00:00:00 2001 From: Vitalii Lysak Date: Wed, 13 Jul 2022 15:46:06 +0300 Subject: move sila-dev to _sila --- src/assets/images/_sila/Radiobutton.svg | 4 + src/assets/images/_sila/amperage-icon.svg | 3 + src/assets/images/_sila/arrow-down.svg | 3 + src/assets/images/_sila/arrow-left.svg | 3 + src/assets/images/_sila/arrow-right.svg | 3 + src/assets/images/_sila/arrow-up.svg | 3 + src/assets/images/_sila/calendar-icon.svg | 3 + src/assets/images/_sila/console-images.svg | 12 + src/assets/images/_sila/edit-no.svg | 3 + src/assets/images/_sila/edit-ok.svg | 3 + src/assets/images/_sila/event-logs/archive.svg | 3 + src/assets/images/_sila/event-logs/fans.svg | 3 + .../images/_sila/event-logs/memory-module.svg | 3 + .../images/_sila/event-logs/not-resolved.svg | 3 + src/assets/images/_sila/event-logs/processor.svg | 3 + .../images/_sila/event-logs/raid-controllers.svg | 3 + .../images/_sila/event-logs/resolved-button.svg | 3 + src/assets/images/_sila/event-logs/resolved.svg | 3 + .../images/_sila/event-logs/sort-icon-rotate.svg | 3 + src/assets/images/_sila/event-logs/sort-icon.svg | 3 + src/assets/images/_sila/event-logs/time.svg | 3 + src/assets/images/_sila/fans-page/fans-icon.svg | 3 + src/assets/images/_sila/frequency-icon.svg | 3 + src/assets/images/_sila/header/header-avatar.svg | 10 + src/assets/images/_sila/header/header-clock.svg | 3 + .../images/_sila/header/icon-notification.svg | 5 + src/assets/images/_sila/header/logout-icon.svg | 3 + src/assets/images/_sila/icon-chevron-red.svg | 3 + src/assets/images/_sila/icon-chevron.svg | 3 + src/assets/images/_sila/icon-clear-red.svg | 3 + src/assets/images/_sila/icon-edit.svg | 3 + src/assets/images/_sila/icon-no.svg | 3 + src/assets/images/_sila/icon-ok.svg | 3 + src/assets/images/_sila/icon-options.svg | 3 + src/assets/images/_sila/icon-reload-red.svg | 3 + src/assets/images/_sila/icon-settings-red.svg | 3 + src/assets/images/_sila/labels/critical.svg | 4 + src/assets/images/_sila/labels/non-normal.svg | 4 + src/assets/images/_sila/labels/shutdown.svg | 3 + src/assets/images/_sila/labels/warning.svg | 3 + .../_sila/login/autrorization-left-image.svg | 11 + .../images/_sila/login/hidden-password-icon.svg | 3 + src/assets/images/_sila/login/vector1.svg | 3 + src/assets/images/_sila/login/vector2.svg | 3 + src/assets/images/_sila/logo-header-sila.svg | 4 + src/assets/images/_sila/popups/red-sign.svg | 3 + src/assets/images/_sila/popups/x-icon.svg | 3 + src/assets/images/_sila/power-error-icon.svg | 3 + src/assets/images/_sila/power-icon.svg | 3 + .../images/_sila/processors-page/error-icon.svg | 4 + src/assets/images/_sila/refresh.svg | 3 + src/assets/images/_sila/search-icon.svg | 3 + .../images/_sila/sila-server-navbar-icon.svg | 3 + src/assets/images/_sila/status/off.svg | 3 + src/assets/images/_sila/status/on.svg | 3 + src/assets/images/_sila/temperature-icon.svg | 3 + .../_sila/textarea-buttons/button-icon-bold.svg | 3 + .../textarea-buttons/button-icon-crossline.svg | 3 + .../_sila/textarea-buttons/button-icon-cursive.svg | 3 + .../_sila/textarea-buttons/button-icon-link.svg | 3 + .../_sila/textarea-buttons/button-icon-list.svg | 3 + .../textarea-buttons/button-icon-number-list.svg | 3 + .../textarea-buttons/button-icon-underline.svg | 3 + src/assets/images/_sila/usage-icon.svg | 3 + src/assets/images/_sila/voltage-icon.svg | 3 + src/assets/styles/_obmc-sila.scss | 2 + src/assets/styles/bmc/_sila/custom/_alert.scss | 70 + src/assets/styles/bmc/_sila/custom/_badge.scss | 21 + src/assets/styles/bmc/_sila/custom/_base.scss | 295 ++++ .../styles/bmc/_sila/custom/_bootstrap-grid.scss | 8 + src/assets/styles/bmc/_sila/custom/_buttons.scss | 222 +++ src/assets/styles/bmc/_sila/custom/_calendar.scss | 17 + src/assets/styles/bmc/_sila/custom/_card.scss | 19 + src/assets/styles/bmc/_sila/custom/_dropdown.scss | 36 + src/assets/styles/bmc/_sila/custom/_forms.scss | 273 ++++ src/assets/styles/bmc/_sila/custom/_index.scss | 20 + src/assets/styles/bmc/_sila/custom/_kvm.scss | 16 + src/assets/styles/bmc/_sila/custom/_logs.scss | 78 + src/assets/styles/bmc/_sila/custom/_modal.scss | 69 + .../styles/bmc/_sila/custom/_pagination.scss | 34 + src/assets/styles/bmc/_sila/custom/_popover.scss | 72 + .../styles/bmc/_sila/custom/_section-divider.scss | 7 + src/assets/styles/bmc/_sila/custom/_sol.scss | 3 + src/assets/styles/bmc/_sila/custom/_tables.scss | 409 ++++++ src/assets/styles/bmc/_sila/custom/_toasts.scss | 61 + src/assets/styles/bmc/_sila/helpers/_colors.scss | 75 + .../styles/bmc/_sila/helpers/_functions.scss | 9 + src/assets/styles/bmc/_sila/helpers/_index.scss | 4 + src/assets/styles/bmc/_sila/helpers/_motion.scss | 14 + .../styles/bmc/_sila/helpers/_variables.scss | 24 + src/components/_sila/AppHeader/AppHeader.vue | 173 ++- .../_sila/AppNavigation/AppNavigation.vue | 207 ++- .../_sila/AppNavigation/AppNavigationMixin.js | 343 ++++- src/components/_sila/Global/Alert.vue | 4 +- src/components/_sila/Global/FormFile.vue | 64 +- src/components/_sila/Global/InfoTooltip.vue | 1 + .../_sila/Global/InputPasswordToggle.vue | 26 +- src/components/_sila/Global/LoadingBar.vue | 4 +- src/components/_sila/Global/PageContainer.vue | 13 +- src/components/_sila/Global/PageSection.vue | 14 +- src/components/_sila/Global/PageTitle.vue | 40 +- src/components/_sila/Global/Popover.vue | 287 ++++ src/components/_sila/Global/PopoverInfo.vue | 40 + src/components/_sila/Global/Search.vue | 9 +- .../Global/SilaComponents/ApplySettingsPopover.vue | 163 +++ .../_sila/Global/SilaComponents/DataTabs.vue | 136 ++ .../_sila/Global/SilaComponents/DateSwitch.vue | 123 ++ .../SilaComponents/InventoryControlSystem.vue | 195 +++ .../_sila/Global/SilaComponents/NtpPopover.vue | 132 ++ .../Global/SilaComponents/PopoverWithSlot.vue | 228 +++ .../SilaComponents/Tables/AccessoryTable.vue | 88 ++ .../Tables/AccessoryTableDrivers.vue | 90 ++ .../SilaComponents/Tables/AccessoryTablePower.vue | 91 ++ .../Tables/AccessoryTableWithLabel.vue | 99 ++ .../Global/SilaComponents/TwoChiocePopover.vue | 117 ++ .../_sila/Global/SilaComponents/colors.js | 8 + src/components/_sila/Global/StatusIcon.vue | 12 +- src/components/_sila/Global/TableCellCount.vue | 2 +- src/components/_sila/Global/TableDateFilter.vue | 8 +- src/components/_sila/Global/TableToolbar.vue | 29 +- src/components/_sila/Global/TableToolbarExport.vue | 13 +- src/components/_sila/SubHeader/SubHeader.vue | 179 +++ src/components/_sila/SubHeader/index.js | 1 + src/layouts/_sila/AppLayout.vue | 18 +- src/layouts/_sila/LoginLayout.vue | 141 +- src/locales/en-US.json | 2 + src/locales/ru-RU.json | 2 + .../_sila/BMC/Configuration/BMCConfiguration.vue | 105 ++ .../BMC/Configuration/BMCConfigurationControl.vue | 121 ++ .../BMC/Configuration/BMCConfigurationTable.vue | 91 ++ .../BMC/Configuration/SettingsImportPopup.vue | 291 ++++ src/views/_sila/BMC/Configuration/index.js | 2 + src/views/_sila/BMC/Firmware/FirmwarePage.vue | 273 ++++ src/views/_sila/BMC/Firmware/index.js | 2 + src/views/_sila/BMC/Settings/SettingsPage.vue | 439 ++++++ src/views/_sila/BMC/Settings/index.js | 2 + .../Fans/DynamicInformation/FansDynamicPage.vue | 118 ++ .../Fans/DynamicInformation/FansDynamicTable.vue | 126 ++ .../Fans/DynamicInformation/IndicatorsTable.vue | 167 +++ src/views/_sila/Fans/DynamicInformation/helpers.js | 820 +++++++++++ src/views/_sila/Fans/DynamicInformation/index.js | 2 + .../Fans/StaticInformation/FansStaticPage.vue | 152 ++ src/views/_sila/Fans/StaticInformation/index.js | 2 + .../_sila/HardwareStatus/Inventory/Inventory.vue | 196 +++ .../Inventory/InventoryServiceIndicator.vue | 82 ++ .../Inventory/InventoryTableAssembly.vue | 160 ++ .../Inventory/InventoryTableBmcManager.vue | 254 ++++ .../Inventory/InventoryTableChassis.vue | 199 +++ .../Inventory/InventoryTableDimmSlot.vue | 263 ++++ .../Inventory/InventoryTableFans.vue | 198 +++ .../Inventory/InventoryTablePowerSupplies.vue | 216 +++ .../Inventory/InventoryTableProcessors.vue | 275 ++++ .../Inventory/InventoryTableSystem.vue | 236 +++ src/views/_sila/HardwareStatus/Inventory/index.js | 2 + src/views/_sila/HardwareStatus/Sensors/Sensors.vue | 7 +- .../_sila/InformationAndFAQ/InformationAndFAQ.vue | 9 + src/views/_sila/InformationAndFAQ/index.js | 1 + src/views/_sila/Login/Login.vue | 86 +- src/views/_sila/Login/index.js | 3 +- src/views/_sila/Logs/Dumps/DumpsForm.vue | 6 +- .../_sila/Logs/Dumps/DumpsModalConfirmation.vue | 4 +- src/views/_sila/Logs/EventLogs/EventLogs.vue | 337 +++-- src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue | 256 ++-- .../DynamicInfo/MemoryDynamicPage.vue | 224 +++ .../MemoryModules/DynamicInfo/TemperatureTable.vue | 126 ++ .../_sila/MemoryModules/DynamicInfo/helpers.js | 458 ++++++ src/views/_sila/MemoryModules/DynamicInfo/index.js | 2 + .../Specification/MemoryStaticPage.vue | 228 +++ .../_sila/MemoryModules/Specification/index.js | 2 + .../DynamicInfo/MotherboardDynamicPage.vue | 159 ++ .../Motherboard/DynamicInfo/TemperatureTable.vue | 112 ++ src/views/_sila/Motherboard/DynamicInfo/helpers.js | 458 ++++++ src/views/_sila/Motherboard/DynamicInfo/index.js | 2 + .../Specification/MotherboardSpecificationPage.vue | 83 ++ src/views/_sila/Motherboard/Specification/index.js | 2 + .../Operations/ConsoleSettings/ConsoleSettings.vue | 154 ++ .../_sila/Operations/ConsoleSettings/index.js | 2 + .../_sila/Operations/FactoryReset/FactoryReset.vue | 13 +- src/views/_sila/Operations/Firmware/Firmware.vue | 13 +- .../Firmware/FirmwareAlertServerPower.vue | 2 +- .../_sila/Operations/Firmware/FirmwareCardsBmc.vue | 8 +- .../Operations/Firmware/FirmwareCardsHost.vue | 2 +- .../Operations/Firmware/FirmwareFormUpdate.vue | 11 +- src/views/_sila/Operations/KeyClear/KeyClear.vue | 17 +- src/views/_sila/Operations/Kvm/Kvm.vue | 4 +- src/views/_sila/Operations/Kvm/KvmConsole.vue | 26 +- src/views/_sila/Operations/RebootBmc/RebootBmc.vue | 40 +- .../SerialOverLan/SerialOverLanConsole.vue | 2 +- .../ServerPowerOperations/BootSettings.vue | 41 +- .../ServerPowerOperations.vue | 193 +-- .../VirtualMedia/ModalConfigureConnection.vue | 25 +- .../_sila/Operations/VirtualMedia/VirtualMedia.vue | 68 +- src/views/_sila/Overview/Inventory/index.js | 2 - src/views/_sila/Overview/Network/index.js | 2 - src/views/_sila/Overview/Overview.vue | 6 +- src/views/_sila/Overview/OverviewDumps.vue | 2 +- src/views/_sila/Overview/OverviewEvents.vue | 4 +- src/views/_sila/Overview/OverviewFirmware.vue | 2 +- src/views/_sila/Overview/OverviewNetwork.vue | 2 +- src/views/_sila/Overview/OverviewPower.vue | 2 +- src/views/_sila/Overview/OverviewQuickLinks.vue | 2 +- src/views/_sila/Overview/OverviewServer.vue | 4 +- .../PowerSupplies/DynamicInfo/PowerDynamicPage.vue | 592 ++++++++ .../_sila/PowerSupplies/DynamicInfo/PowerTable.vue | 126 ++ .../PowerSupplies/DynamicInfo/TemperatureTable.vue | 126 ++ .../_sila/PowerSupplies/DynamicInfo/UsingTable.vue | 126 ++ .../PowerSupplies/DynamicInfo/VoltageTable.vue | 126 ++ .../_sila/PowerSupplies/DynamicInfo/helpers.js | 1526 ++++++++++++++++++++ src/views/_sila/PowerSupplies/DynamicInfo/index.js | 2 + .../Specification/PowerStaticPage.vue | 137 ++ .../_sila/PowerSupplies/Specification/index.js | 2 + .../Processors/DynamicInfo/FrequencyTable.vue | 107 ++ .../_sila/Processors/DynamicInfo/PowerTable.vue | 126 ++ .../DynamicInfo/ProcessorsDynamicPage.vue | 361 +++++ .../Processors/DynamicInfo/TemperatureTable.vue | 126 ++ src/views/_sila/Processors/DynamicInfo/helpers.js | 1398 ++++++++++++++++++ src/views/_sila/Processors/DynamicInfo/index.js | 2 + .../AcceleratorSpecificationTable.vue | 146 ++ .../Specification/ProcessorsSpecificationPage.vue | 117 ++ .../Specification/ProcessorsSpecificationTable.vue | 251 ++++ .../_sila/Processors/Specification/helpers.js | 254 ++++ src/views/_sila/Processors/Specification/index.js | 2 + .../SILA/AnalyticalPanel/AnalyticalPanelPage.vue | 272 ++++ .../_sila/SILA/AnalyticalPanel/PowerTable.vue | 82 ++ .../SILA/AnalyticalPanel/TemperatureTable.vue | 115 ++ src/views/_sila/SILA/AnalyticalPanel/helpers.js | 196 +++ src/views/_sila/SILA/AnalyticalPanel/index.js | 2 + .../NetworkAdapters/Dynamic/NetworkDynamicPage.vue | 135 ++ .../NetworkAdapters/Dynamic/TemperatureTable.vue | 112 ++ .../_sila/SILA/NetworkAdapters/Dynamic/helpers.js | 356 +++++ .../_sila/SILA/NetworkAdapters/Dynamic/index.js | 1 + .../EthernetAdapters/EthernetAdaptersPage.vue | 399 +++++ .../NetworkAdapters/EthernetAdapters/helpers.js | 99 ++ .../SILA/NetworkAdapters/EthernetAdapters/index.js | 1 + .../FcHbaAdapters/FcHbaAdaptersPage.vue | 211 +++ .../SILA/NetworkAdapters/FcHbaAdapters/helpers.js | 42 + .../SILA/NetworkAdapters/FcHbaAdapters/index.js | 1 + src/views/_sila/SILA/PciDevices/PciDevicesPage.vue | 115 ++ src/views/_sila/SILA/PciDevices/index.js | 1 + .../DynamicInfo/DriversDynamicPage.vue | 204 +++ .../DynamicInfo/TemperatureTable.vue | 126 ++ .../SILA/PhysicalDrivers/DynamicInfo/helpers.js | 564 ++++++++ .../SILA/PhysicalDrivers/DynamicInfo/index.js | 1 + .../StaticInfo/DriversStaticPage.vue | 133 ++ .../_sila/SILA/PhysicalDrivers/StaticInfo/index.js | 1 + src/views/_sila/SILA/RAID/Cache/RAIDCachePage.vue | 107 ++ src/views/_sila/SILA/RAID/Cache/index.js | 1 + .../SILA/RAID/Settings/ActionSettingsPopover.vue | 131 ++ .../_sila/SILA/RAID/Settings/OptionsPopover.vue | 87 ++ .../_sila/SILA/RAID/Settings/RAIDSettingsPage.vue | 288 ++++ src/views/_sila/SILA/RAID/Settings/TomeModal.vue | 179 +++ src/views/_sila/SILA/RAID/Settings/helpers.js | 62 + src/views/_sila/SILA/RAID/Settings/index.js | 1 + .../RAID/Specification/RAIDSpecificationPage.vue | 221 +++ src/views/_sila/SILA/RAID/Specification/index.js | 1 + .../SILA/VirtualDrivers/VirtualDriversPage.vue | 122 ++ src/views/_sila/SILA/VirtualDrivers/index.js | 1 + .../Certificates/Certificates.vue | 192 +-- .../Certificates/ModalGenerateCsr.vue | 167 ++- .../_sila/SecurityAndAccess/Policies/Policies.vue | 215 +-- .../_sila/SecurityAndAccess/Sessions/Sessions.vue | 8 +- .../UserManagement/UserManagement.vue | 11 +- src/views/_sila/Settings/DateTime/DateTime.vue | 435 ++++++ src/views/_sila/Settings/DateTime/index.js | 2 + src/views/_sila/Settings/Network/ModalDns.vue | 92 ++ src/views/_sila/Settings/Network/ModalHostname.vue | 110 ++ src/views/_sila/Settings/Network/ModalIpv4.vue | 165 +++ .../_sila/Settings/Network/ModalMacAddress.vue | 109 ++ src/views/_sila/Settings/Network/Network.vue | 166 +++ .../Settings/Network/NetworkGlobalSettings.vue | 161 +++ .../Settings/Network/NetworkInterfaceSettings.vue | 117 ++ src/views/_sila/Settings/Network/TableDns.vue | 156 ++ src/views/_sila/Settings/Network/TableIpv4.vue | 183 +++ src/views/_sila/Settings/Network/index.js | 2 + .../PowerRestorePolicy/PowerRestorePolicy.vue | 8 +- src/views/_sila/Support/Support.vue | 9 + src/views/_sila/Support/index.js | 1 + .../Info/InventoryTableSystem.vue | 81 ++ .../SystemDescription/Info/SystemDescription.vue | 148 ++ src/views/_sila/SystemDescription/Info/index.js | 2 + .../Network/InventoryIPv4Settings.vue | 277 ++++ .../Network/InventoryIPv6Settings.vue | 263 ++++ .../SystemDescription/Network/SystemNetwork.vue | 101 ++ src/views/_sila/SystemDescription/Network/index.js | 2 + .../ServerParametrs/ServerParametrs.vue | 21 + .../ServerParametrs/ServereParametrsSection.vue | 128 ++ .../SystemDescription/ServerParametrs/index.js | 2 + 287 files changed, 25458 insertions(+), 1093 deletions(-) create mode 100644 src/assets/images/_sila/Radiobutton.svg create mode 100644 src/assets/images/_sila/amperage-icon.svg create mode 100644 src/assets/images/_sila/arrow-down.svg create mode 100644 src/assets/images/_sila/arrow-left.svg create mode 100644 src/assets/images/_sila/arrow-right.svg create mode 100644 src/assets/images/_sila/arrow-up.svg create mode 100644 src/assets/images/_sila/calendar-icon.svg create mode 100644 src/assets/images/_sila/console-images.svg create mode 100644 src/assets/images/_sila/edit-no.svg create mode 100644 src/assets/images/_sila/edit-ok.svg create mode 100644 src/assets/images/_sila/event-logs/archive.svg create mode 100644 src/assets/images/_sila/event-logs/fans.svg create mode 100644 src/assets/images/_sila/event-logs/memory-module.svg create mode 100644 src/assets/images/_sila/event-logs/not-resolved.svg create mode 100644 src/assets/images/_sila/event-logs/processor.svg create mode 100644 src/assets/images/_sila/event-logs/raid-controllers.svg create mode 100644 src/assets/images/_sila/event-logs/resolved-button.svg create mode 100644 src/assets/images/_sila/event-logs/resolved.svg create mode 100644 src/assets/images/_sila/event-logs/sort-icon-rotate.svg create mode 100644 src/assets/images/_sila/event-logs/sort-icon.svg create mode 100644 src/assets/images/_sila/event-logs/time.svg create mode 100644 src/assets/images/_sila/fans-page/fans-icon.svg create mode 100644 src/assets/images/_sila/frequency-icon.svg create mode 100644 src/assets/images/_sila/header/header-avatar.svg create mode 100644 src/assets/images/_sila/header/header-clock.svg create mode 100644 src/assets/images/_sila/header/icon-notification.svg create mode 100644 src/assets/images/_sila/header/logout-icon.svg create mode 100644 src/assets/images/_sila/icon-chevron-red.svg create mode 100644 src/assets/images/_sila/icon-chevron.svg create mode 100644 src/assets/images/_sila/icon-clear-red.svg create mode 100644 src/assets/images/_sila/icon-edit.svg create mode 100644 src/assets/images/_sila/icon-no.svg create mode 100644 src/assets/images/_sila/icon-ok.svg create mode 100644 src/assets/images/_sila/icon-options.svg create mode 100644 src/assets/images/_sila/icon-reload-red.svg create mode 100644 src/assets/images/_sila/icon-settings-red.svg create mode 100644 src/assets/images/_sila/labels/critical.svg create mode 100644 src/assets/images/_sila/labels/non-normal.svg create mode 100644 src/assets/images/_sila/labels/shutdown.svg create mode 100644 src/assets/images/_sila/labels/warning.svg create mode 100644 src/assets/images/_sila/login/autrorization-left-image.svg create mode 100644 src/assets/images/_sila/login/hidden-password-icon.svg create mode 100644 src/assets/images/_sila/login/vector1.svg create mode 100644 src/assets/images/_sila/login/vector2.svg create mode 100644 src/assets/images/_sila/logo-header-sila.svg create mode 100644 src/assets/images/_sila/popups/red-sign.svg create mode 100644 src/assets/images/_sila/popups/x-icon.svg create mode 100644 src/assets/images/_sila/power-error-icon.svg create mode 100644 src/assets/images/_sila/power-icon.svg create mode 100644 src/assets/images/_sila/processors-page/error-icon.svg create mode 100644 src/assets/images/_sila/refresh.svg create mode 100644 src/assets/images/_sila/search-icon.svg create mode 100644 src/assets/images/_sila/sila-server-navbar-icon.svg create mode 100644 src/assets/images/_sila/status/off.svg create mode 100644 src/assets/images/_sila/status/on.svg create mode 100644 src/assets/images/_sila/temperature-icon.svg create mode 100644 src/assets/images/_sila/textarea-buttons/button-icon-bold.svg create mode 100644 src/assets/images/_sila/textarea-buttons/button-icon-crossline.svg create mode 100644 src/assets/images/_sila/textarea-buttons/button-icon-cursive.svg create mode 100644 src/assets/images/_sila/textarea-buttons/button-icon-link.svg create mode 100644 src/assets/images/_sila/textarea-buttons/button-icon-list.svg create mode 100644 src/assets/images/_sila/textarea-buttons/button-icon-number-list.svg create mode 100644 src/assets/images/_sila/textarea-buttons/button-icon-underline.svg create mode 100644 src/assets/images/_sila/usage-icon.svg create mode 100644 src/assets/images/_sila/voltage-icon.svg create mode 100644 src/assets/styles/bmc/_sila/custom/_alert.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_badge.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_base.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_bootstrap-grid.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_buttons.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_calendar.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_card.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_dropdown.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_forms.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_index.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_kvm.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_logs.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_modal.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_pagination.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_popover.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_section-divider.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_sol.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_tables.scss create mode 100644 src/assets/styles/bmc/_sila/custom/_toasts.scss create mode 100644 src/assets/styles/bmc/_sila/helpers/_colors.scss create mode 100644 src/assets/styles/bmc/_sila/helpers/_functions.scss create mode 100644 src/assets/styles/bmc/_sila/helpers/_index.scss create mode 100644 src/assets/styles/bmc/_sila/helpers/_motion.scss create mode 100644 src/assets/styles/bmc/_sila/helpers/_variables.scss create mode 100644 src/components/_sila/Global/Popover.vue create mode 100644 src/components/_sila/Global/PopoverInfo.vue create mode 100644 src/components/_sila/Global/SilaComponents/ApplySettingsPopover.vue create mode 100644 src/components/_sila/Global/SilaComponents/DataTabs.vue create mode 100644 src/components/_sila/Global/SilaComponents/DateSwitch.vue create mode 100644 src/components/_sila/Global/SilaComponents/InventoryControlSystem.vue create mode 100644 src/components/_sila/Global/SilaComponents/NtpPopover.vue create mode 100644 src/components/_sila/Global/SilaComponents/PopoverWithSlot.vue create mode 100644 src/components/_sila/Global/SilaComponents/Tables/AccessoryTable.vue create mode 100644 src/components/_sila/Global/SilaComponents/Tables/AccessoryTableDrivers.vue create mode 100644 src/components/_sila/Global/SilaComponents/Tables/AccessoryTablePower.vue create mode 100644 src/components/_sila/Global/SilaComponents/Tables/AccessoryTableWithLabel.vue create mode 100644 src/components/_sila/Global/SilaComponents/TwoChiocePopover.vue create mode 100644 src/components/_sila/Global/SilaComponents/colors.js create mode 100644 src/components/_sila/SubHeader/SubHeader.vue create mode 100644 src/components/_sila/SubHeader/index.js create mode 100644 src/views/_sila/BMC/Configuration/BMCConfiguration.vue create mode 100644 src/views/_sila/BMC/Configuration/BMCConfigurationControl.vue create mode 100644 src/views/_sila/BMC/Configuration/BMCConfigurationTable.vue create mode 100644 src/views/_sila/BMC/Configuration/SettingsImportPopup.vue create mode 100644 src/views/_sila/BMC/Configuration/index.js create mode 100644 src/views/_sila/BMC/Firmware/FirmwarePage.vue create mode 100644 src/views/_sila/BMC/Firmware/index.js create mode 100644 src/views/_sila/BMC/Settings/SettingsPage.vue create mode 100644 src/views/_sila/BMC/Settings/index.js create mode 100644 src/views/_sila/Fans/DynamicInformation/FansDynamicPage.vue create mode 100644 src/views/_sila/Fans/DynamicInformation/FansDynamicTable.vue create mode 100644 src/views/_sila/Fans/DynamicInformation/IndicatorsTable.vue create mode 100644 src/views/_sila/Fans/DynamicInformation/helpers.js create mode 100644 src/views/_sila/Fans/DynamicInformation/index.js create mode 100644 src/views/_sila/Fans/StaticInformation/FansStaticPage.vue create mode 100644 src/views/_sila/Fans/StaticInformation/index.js create mode 100644 src/views/_sila/HardwareStatus/Inventory/Inventory.vue create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryServiceIndicator.vue create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryTableAssembly.vue create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryTableBmcManager.vue create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryTableChassis.vue create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryTableDimmSlot.vue create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryTableFans.vue create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryTableProcessors.vue create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryTableSystem.vue create mode 100644 src/views/_sila/HardwareStatus/Inventory/index.js create mode 100644 src/views/_sila/InformationAndFAQ/InformationAndFAQ.vue create mode 100644 src/views/_sila/InformationAndFAQ/index.js create mode 100644 src/views/_sila/MemoryModules/DynamicInfo/MemoryDynamicPage.vue create mode 100644 src/views/_sila/MemoryModules/DynamicInfo/TemperatureTable.vue create mode 100644 src/views/_sila/MemoryModules/DynamicInfo/helpers.js create mode 100644 src/views/_sila/MemoryModules/DynamicInfo/index.js create mode 100644 src/views/_sila/MemoryModules/Specification/MemoryStaticPage.vue create mode 100644 src/views/_sila/MemoryModules/Specification/index.js create mode 100644 src/views/_sila/Motherboard/DynamicInfo/MotherboardDynamicPage.vue create mode 100644 src/views/_sila/Motherboard/DynamicInfo/TemperatureTable.vue create mode 100644 src/views/_sila/Motherboard/DynamicInfo/helpers.js create mode 100644 src/views/_sila/Motherboard/DynamicInfo/index.js create mode 100644 src/views/_sila/Motherboard/Specification/MotherboardSpecificationPage.vue create mode 100644 src/views/_sila/Motherboard/Specification/index.js create mode 100644 src/views/_sila/Operations/ConsoleSettings/ConsoleSettings.vue create mode 100644 src/views/_sila/Operations/ConsoleSettings/index.js create mode 100644 src/views/_sila/PowerSupplies/DynamicInfo/PowerDynamicPage.vue create mode 100644 src/views/_sila/PowerSupplies/DynamicInfo/PowerTable.vue create mode 100644 src/views/_sila/PowerSupplies/DynamicInfo/TemperatureTable.vue create mode 100644 src/views/_sila/PowerSupplies/DynamicInfo/UsingTable.vue create mode 100644 src/views/_sila/PowerSupplies/DynamicInfo/VoltageTable.vue create mode 100644 src/views/_sila/PowerSupplies/DynamicInfo/helpers.js create mode 100644 src/views/_sila/PowerSupplies/DynamicInfo/index.js create mode 100644 src/views/_sila/PowerSupplies/Specification/PowerStaticPage.vue create mode 100644 src/views/_sila/PowerSupplies/Specification/index.js create mode 100644 src/views/_sila/Processors/DynamicInfo/FrequencyTable.vue create mode 100644 src/views/_sila/Processors/DynamicInfo/PowerTable.vue create mode 100644 src/views/_sila/Processors/DynamicInfo/ProcessorsDynamicPage.vue create mode 100644 src/views/_sila/Processors/DynamicInfo/TemperatureTable.vue create mode 100644 src/views/_sila/Processors/DynamicInfo/helpers.js create mode 100644 src/views/_sila/Processors/DynamicInfo/index.js create mode 100644 src/views/_sila/Processors/Specification/AcceleratorSpecificationTable.vue create mode 100644 src/views/_sila/Processors/Specification/ProcessorsSpecificationPage.vue create mode 100644 src/views/_sila/Processors/Specification/ProcessorsSpecificationTable.vue create mode 100644 src/views/_sila/Processors/Specification/helpers.js create mode 100644 src/views/_sila/Processors/Specification/index.js create mode 100644 src/views/_sila/SILA/AnalyticalPanel/AnalyticalPanelPage.vue create mode 100644 src/views/_sila/SILA/AnalyticalPanel/PowerTable.vue create mode 100644 src/views/_sila/SILA/AnalyticalPanel/TemperatureTable.vue create mode 100644 src/views/_sila/SILA/AnalyticalPanel/helpers.js create mode 100644 src/views/_sila/SILA/AnalyticalPanel/index.js create mode 100644 src/views/_sila/SILA/NetworkAdapters/Dynamic/NetworkDynamicPage.vue create mode 100644 src/views/_sila/SILA/NetworkAdapters/Dynamic/TemperatureTable.vue create mode 100644 src/views/_sila/SILA/NetworkAdapters/Dynamic/helpers.js create mode 100644 src/views/_sila/SILA/NetworkAdapters/Dynamic/index.js create mode 100644 src/views/_sila/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue create mode 100644 src/views/_sila/SILA/NetworkAdapters/EthernetAdapters/helpers.js create mode 100644 src/views/_sila/SILA/NetworkAdapters/EthernetAdapters/index.js create mode 100644 src/views/_sila/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue create mode 100644 src/views/_sila/SILA/NetworkAdapters/FcHbaAdapters/helpers.js create mode 100644 src/views/_sila/SILA/NetworkAdapters/FcHbaAdapters/index.js create mode 100644 src/views/_sila/SILA/PciDevices/PciDevicesPage.vue create mode 100644 src/views/_sila/SILA/PciDevices/index.js create mode 100644 src/views/_sila/SILA/PhysicalDrivers/DynamicInfo/DriversDynamicPage.vue create mode 100644 src/views/_sila/SILA/PhysicalDrivers/DynamicInfo/TemperatureTable.vue create mode 100644 src/views/_sila/SILA/PhysicalDrivers/DynamicInfo/helpers.js create mode 100644 src/views/_sila/SILA/PhysicalDrivers/DynamicInfo/index.js create mode 100644 src/views/_sila/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue create mode 100644 src/views/_sila/SILA/PhysicalDrivers/StaticInfo/index.js create mode 100644 src/views/_sila/SILA/RAID/Cache/RAIDCachePage.vue create mode 100644 src/views/_sila/SILA/RAID/Cache/index.js create mode 100644 src/views/_sila/SILA/RAID/Settings/ActionSettingsPopover.vue create mode 100644 src/views/_sila/SILA/RAID/Settings/OptionsPopover.vue create mode 100644 src/views/_sila/SILA/RAID/Settings/RAIDSettingsPage.vue create mode 100644 src/views/_sila/SILA/RAID/Settings/TomeModal.vue create mode 100644 src/views/_sila/SILA/RAID/Settings/helpers.js create mode 100644 src/views/_sila/SILA/RAID/Settings/index.js create mode 100644 src/views/_sila/SILA/RAID/Specification/RAIDSpecificationPage.vue create mode 100644 src/views/_sila/SILA/RAID/Specification/index.js create mode 100644 src/views/_sila/SILA/VirtualDrivers/VirtualDriversPage.vue create mode 100644 src/views/_sila/SILA/VirtualDrivers/index.js create mode 100644 src/views/_sila/Settings/DateTime/DateTime.vue create mode 100644 src/views/_sila/Settings/DateTime/index.js create mode 100644 src/views/_sila/Settings/Network/ModalDns.vue create mode 100644 src/views/_sila/Settings/Network/ModalHostname.vue create mode 100644 src/views/_sila/Settings/Network/ModalIpv4.vue create mode 100644 src/views/_sila/Settings/Network/ModalMacAddress.vue create mode 100644 src/views/_sila/Settings/Network/Network.vue create mode 100644 src/views/_sila/Settings/Network/NetworkGlobalSettings.vue create mode 100644 src/views/_sila/Settings/Network/NetworkInterfaceSettings.vue create mode 100644 src/views/_sila/Settings/Network/TableDns.vue create mode 100644 src/views/_sila/Settings/Network/TableIpv4.vue create mode 100644 src/views/_sila/Settings/Network/index.js create mode 100644 src/views/_sila/Support/Support.vue create mode 100644 src/views/_sila/Support/index.js create mode 100644 src/views/_sila/SystemDescription/Info/InventoryTableSystem.vue create mode 100644 src/views/_sila/SystemDescription/Info/SystemDescription.vue create mode 100644 src/views/_sila/SystemDescription/Info/index.js create mode 100644 src/views/_sila/SystemDescription/Network/InventoryIPv4Settings.vue create mode 100644 src/views/_sila/SystemDescription/Network/InventoryIPv6Settings.vue create mode 100644 src/views/_sila/SystemDescription/Network/SystemNetwork.vue create mode 100644 src/views/_sila/SystemDescription/Network/index.js create mode 100644 src/views/_sila/SystemDescription/ServerParametrs/ServerParametrs.vue create mode 100644 src/views/_sila/SystemDescription/ServerParametrs/ServereParametrsSection.vue create mode 100644 src/views/_sila/SystemDescription/ServerParametrs/index.js (limited to 'src') diff --git a/src/assets/images/_sila/Radiobutton.svg b/src/assets/images/_sila/Radiobutton.svg new file mode 100644 index 000000000..9647a19fe --- /dev/null +++ b/src/assets/images/_sila/Radiobutton.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/_sila/amperage-icon.svg b/src/assets/images/_sila/amperage-icon.svg new file mode 100644 index 000000000..299777ff5 --- /dev/null +++ b/src/assets/images/_sila/amperage-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/arrow-down.svg b/src/assets/images/_sila/arrow-down.svg new file mode 100644 index 000000000..d20227fcf --- /dev/null +++ b/src/assets/images/_sila/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/arrow-left.svg b/src/assets/images/_sila/arrow-left.svg new file mode 100644 index 000000000..feeb6c2f5 --- /dev/null +++ b/src/assets/images/_sila/arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/arrow-right.svg b/src/assets/images/_sila/arrow-right.svg new file mode 100644 index 000000000..ce3658ebe --- /dev/null +++ b/src/assets/images/_sila/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/arrow-up.svg b/src/assets/images/_sila/arrow-up.svg new file mode 100644 index 000000000..dc9971f71 --- /dev/null +++ b/src/assets/images/_sila/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/calendar-icon.svg b/src/assets/images/_sila/calendar-icon.svg new file mode 100644 index 000000000..cee494ec6 --- /dev/null +++ b/src/assets/images/_sila/calendar-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/console-images.svg b/src/assets/images/_sila/console-images.svg new file mode 100644 index 000000000..741f9d36b --- /dev/null +++ b/src/assets/images/_sila/console-images.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/images/_sila/edit-no.svg b/src/assets/images/_sila/edit-no.svg new file mode 100644 index 000000000..4cb0d8e82 --- /dev/null +++ b/src/assets/images/_sila/edit-no.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/edit-ok.svg b/src/assets/images/_sila/edit-ok.svg new file mode 100644 index 000000000..2534daca1 --- /dev/null +++ b/src/assets/images/_sila/edit-ok.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/event-logs/archive.svg b/src/assets/images/_sila/event-logs/archive.svg new file mode 100644 index 000000000..3fe4703f4 --- /dev/null +++ b/src/assets/images/_sila/event-logs/archive.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/event-logs/fans.svg b/src/assets/images/_sila/event-logs/fans.svg new file mode 100644 index 000000000..ecee5ea39 --- /dev/null +++ b/src/assets/images/_sila/event-logs/fans.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/event-logs/memory-module.svg b/src/assets/images/_sila/event-logs/memory-module.svg new file mode 100644 index 000000000..842ad6763 --- /dev/null +++ b/src/assets/images/_sila/event-logs/memory-module.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/event-logs/not-resolved.svg b/src/assets/images/_sila/event-logs/not-resolved.svg new file mode 100644 index 000000000..6778cd172 --- /dev/null +++ b/src/assets/images/_sila/event-logs/not-resolved.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/event-logs/processor.svg b/src/assets/images/_sila/event-logs/processor.svg new file mode 100644 index 000000000..fdf1a119a --- /dev/null +++ b/src/assets/images/_sila/event-logs/processor.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/event-logs/raid-controllers.svg b/src/assets/images/_sila/event-logs/raid-controllers.svg new file mode 100644 index 000000000..a81c887ae --- /dev/null +++ b/src/assets/images/_sila/event-logs/raid-controllers.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/event-logs/resolved-button.svg b/src/assets/images/_sila/event-logs/resolved-button.svg new file mode 100644 index 000000000..40e76bf0e --- /dev/null +++ b/src/assets/images/_sila/event-logs/resolved-button.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/event-logs/resolved.svg b/src/assets/images/_sila/event-logs/resolved.svg new file mode 100644 index 000000000..ae48e6aa9 --- /dev/null +++ b/src/assets/images/_sila/event-logs/resolved.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/event-logs/sort-icon-rotate.svg b/src/assets/images/_sila/event-logs/sort-icon-rotate.svg new file mode 100644 index 000000000..b4c8833aa --- /dev/null +++ b/src/assets/images/_sila/event-logs/sort-icon-rotate.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/event-logs/sort-icon.svg b/src/assets/images/_sila/event-logs/sort-icon.svg new file mode 100644 index 000000000..885ae23d0 --- /dev/null +++ b/src/assets/images/_sila/event-logs/sort-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/event-logs/time.svg b/src/assets/images/_sila/event-logs/time.svg new file mode 100644 index 000000000..2a8c2cfd0 --- /dev/null +++ b/src/assets/images/_sila/event-logs/time.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/fans-page/fans-icon.svg b/src/assets/images/_sila/fans-page/fans-icon.svg new file mode 100644 index 000000000..eddb89ab5 --- /dev/null +++ b/src/assets/images/_sila/fans-page/fans-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/frequency-icon.svg b/src/assets/images/_sila/frequency-icon.svg new file mode 100644 index 000000000..65a3d9139 --- /dev/null +++ b/src/assets/images/_sila/frequency-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/header/header-avatar.svg b/src/assets/images/_sila/header/header-avatar.svg new file mode 100644 index 000000000..70a97d0f4 --- /dev/null +++ b/src/assets/images/_sila/header/header-avatar.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/_sila/header/header-clock.svg b/src/assets/images/_sila/header/header-clock.svg new file mode 100644 index 000000000..dae2f062b --- /dev/null +++ b/src/assets/images/_sila/header/header-clock.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/header/icon-notification.svg b/src/assets/images/_sila/header/icon-notification.svg new file mode 100644 index 000000000..22b5ecc04 --- /dev/null +++ b/src/assets/images/_sila/header/icon-notification.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/images/_sila/header/logout-icon.svg b/src/assets/images/_sila/header/logout-icon.svg new file mode 100644 index 000000000..c0e8cee28 --- /dev/null +++ b/src/assets/images/_sila/header/logout-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/icon-chevron-red.svg b/src/assets/images/_sila/icon-chevron-red.svg new file mode 100644 index 000000000..7fcd68d42 --- /dev/null +++ b/src/assets/images/_sila/icon-chevron-red.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/icon-chevron.svg b/src/assets/images/_sila/icon-chevron.svg new file mode 100644 index 000000000..597287ef0 --- /dev/null +++ b/src/assets/images/_sila/icon-chevron.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/icon-clear-red.svg b/src/assets/images/_sila/icon-clear-red.svg new file mode 100644 index 000000000..2f50ed016 --- /dev/null +++ b/src/assets/images/_sila/icon-clear-red.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/icon-edit.svg b/src/assets/images/_sila/icon-edit.svg new file mode 100644 index 000000000..9897aacd4 --- /dev/null +++ b/src/assets/images/_sila/icon-edit.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/icon-no.svg b/src/assets/images/_sila/icon-no.svg new file mode 100644 index 000000000..4cb0d8e82 --- /dev/null +++ b/src/assets/images/_sila/icon-no.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/icon-ok.svg b/src/assets/images/_sila/icon-ok.svg new file mode 100644 index 000000000..2534daca1 --- /dev/null +++ b/src/assets/images/_sila/icon-ok.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/icon-options.svg b/src/assets/images/_sila/icon-options.svg new file mode 100644 index 000000000..b9ab31bb3 --- /dev/null +++ b/src/assets/images/_sila/icon-options.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/icon-reload-red.svg b/src/assets/images/_sila/icon-reload-red.svg new file mode 100644 index 000000000..c6e8e9ff1 --- /dev/null +++ b/src/assets/images/_sila/icon-reload-red.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/icon-settings-red.svg b/src/assets/images/_sila/icon-settings-red.svg new file mode 100644 index 000000000..8ed9156a1 --- /dev/null +++ b/src/assets/images/_sila/icon-settings-red.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/labels/critical.svg b/src/assets/images/_sila/labels/critical.svg new file mode 100644 index 000000000..a154ad18d --- /dev/null +++ b/src/assets/images/_sila/labels/critical.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/_sila/labels/non-normal.svg b/src/assets/images/_sila/labels/non-normal.svg new file mode 100644 index 000000000..2a31e325d --- /dev/null +++ b/src/assets/images/_sila/labels/non-normal.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/_sila/labels/shutdown.svg b/src/assets/images/_sila/labels/shutdown.svg new file mode 100644 index 000000000..0404f2777 --- /dev/null +++ b/src/assets/images/_sila/labels/shutdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/labels/warning.svg b/src/assets/images/_sila/labels/warning.svg new file mode 100644 index 000000000..3d31df376 --- /dev/null +++ b/src/assets/images/_sila/labels/warning.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/login/autrorization-left-image.svg b/src/assets/images/_sila/login/autrorization-left-image.svg new file mode 100644 index 000000000..364afa5e6 --- /dev/null +++ b/src/assets/images/_sila/login/autrorization-left-image.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/images/_sila/login/hidden-password-icon.svg b/src/assets/images/_sila/login/hidden-password-icon.svg new file mode 100644 index 000000000..08347d6bd --- /dev/null +++ b/src/assets/images/_sila/login/hidden-password-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/login/vector1.svg b/src/assets/images/_sila/login/vector1.svg new file mode 100644 index 000000000..b91b4724c --- /dev/null +++ b/src/assets/images/_sila/login/vector1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/login/vector2.svg b/src/assets/images/_sila/login/vector2.svg new file mode 100644 index 000000000..b59c97919 --- /dev/null +++ b/src/assets/images/_sila/login/vector2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/logo-header-sila.svg b/src/assets/images/_sila/logo-header-sila.svg new file mode 100644 index 000000000..dee454aed --- /dev/null +++ b/src/assets/images/_sila/logo-header-sila.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/images/_sila/popups/red-sign.svg b/src/assets/images/_sila/popups/red-sign.svg new file mode 100644 index 000000000..fdc2e146b --- /dev/null +++ b/src/assets/images/_sila/popups/red-sign.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/popups/x-icon.svg b/src/assets/images/_sila/popups/x-icon.svg new file mode 100644 index 000000000..74d403f68 --- /dev/null +++ b/src/assets/images/_sila/popups/x-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/power-error-icon.svg b/src/assets/images/_sila/power-error-icon.svg new file mode 100644 index 000000000..e9400b204 --- /dev/null +++ b/src/assets/images/_sila/power-error-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/power-icon.svg b/src/assets/images/_sila/power-icon.svg new file mode 100644 index 000000000..9af289881 --- /dev/null +++ b/src/assets/images/_sila/power-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/processors-page/error-icon.svg b/src/assets/images/_sila/processors-page/error-icon.svg new file mode 100644 index 000000000..a154ad18d --- /dev/null +++ b/src/assets/images/_sila/processors-page/error-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/_sila/refresh.svg b/src/assets/images/_sila/refresh.svg new file mode 100644 index 000000000..0b84e1a1e --- /dev/null +++ b/src/assets/images/_sila/refresh.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/search-icon.svg b/src/assets/images/_sila/search-icon.svg new file mode 100644 index 000000000..b1565187b --- /dev/null +++ b/src/assets/images/_sila/search-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/sila-server-navbar-icon.svg b/src/assets/images/_sila/sila-server-navbar-icon.svg new file mode 100644 index 000000000..8bcd2712b --- /dev/null +++ b/src/assets/images/_sila/sila-server-navbar-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/status/off.svg b/src/assets/images/_sila/status/off.svg new file mode 100644 index 000000000..d84bedbc7 --- /dev/null +++ b/src/assets/images/_sila/status/off.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/status/on.svg b/src/assets/images/_sila/status/on.svg new file mode 100644 index 000000000..e97abf4a3 --- /dev/null +++ b/src/assets/images/_sila/status/on.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/temperature-icon.svg b/src/assets/images/_sila/temperature-icon.svg new file mode 100644 index 000000000..8feecae45 --- /dev/null +++ b/src/assets/images/_sila/temperature-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/textarea-buttons/button-icon-bold.svg b/src/assets/images/_sila/textarea-buttons/button-icon-bold.svg new file mode 100644 index 000000000..53e675028 --- /dev/null +++ b/src/assets/images/_sila/textarea-buttons/button-icon-bold.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/textarea-buttons/button-icon-crossline.svg b/src/assets/images/_sila/textarea-buttons/button-icon-crossline.svg new file mode 100644 index 000000000..347eee6f3 --- /dev/null +++ b/src/assets/images/_sila/textarea-buttons/button-icon-crossline.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/textarea-buttons/button-icon-cursive.svg b/src/assets/images/_sila/textarea-buttons/button-icon-cursive.svg new file mode 100644 index 000000000..4632587dc --- /dev/null +++ b/src/assets/images/_sila/textarea-buttons/button-icon-cursive.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/textarea-buttons/button-icon-link.svg b/src/assets/images/_sila/textarea-buttons/button-icon-link.svg new file mode 100644 index 000000000..41e44097c --- /dev/null +++ b/src/assets/images/_sila/textarea-buttons/button-icon-link.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/textarea-buttons/button-icon-list.svg b/src/assets/images/_sila/textarea-buttons/button-icon-list.svg new file mode 100644 index 000000000..4a3d56a54 --- /dev/null +++ b/src/assets/images/_sila/textarea-buttons/button-icon-list.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/textarea-buttons/button-icon-number-list.svg b/src/assets/images/_sila/textarea-buttons/button-icon-number-list.svg new file mode 100644 index 000000000..015330665 --- /dev/null +++ b/src/assets/images/_sila/textarea-buttons/button-icon-number-list.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/textarea-buttons/button-icon-underline.svg b/src/assets/images/_sila/textarea-buttons/button-icon-underline.svg new file mode 100644 index 000000000..61801b1b4 --- /dev/null +++ b/src/assets/images/_sila/textarea-buttons/button-icon-underline.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/usage-icon.svg b/src/assets/images/_sila/usage-icon.svg new file mode 100644 index 000000000..9fda1696a --- /dev/null +++ b/src/assets/images/_sila/usage-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/_sila/voltage-icon.svg b/src/assets/images/_sila/voltage-icon.svg new file mode 100644 index 000000000..dce7dae8b --- /dev/null +++ b/src/assets/images/_sila/voltage-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/styles/_obmc-sila.scss b/src/assets/styles/_obmc-sila.scss index ea2507f0a..1f8bc62bc 100644 --- a/src/assets/styles/_obmc-sila.scss +++ b/src/assets/styles/_obmc-sila.scss @@ -4,3 +4,5 @@ // IBS BMC styles @import "./bmc/_sila"; +@import "./bmc/_sila/helpers"; +@import "./bmc/_sila/custom"; diff --git a/src/assets/styles/bmc/_sila/custom/_alert.scss b/src/assets/styles/bmc/_sila/custom/_alert.scss new file mode 100644 index 000000000..0e78ba64b --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_alert.scss @@ -0,0 +1,70 @@ +.alert { + display: flex; + padding: $spacer; + border-width: 0 0 0 3px; + color: gray("800"); + margin-bottom: $spacer; + + &.small { + padding: $spacer / 2; + font-size: 1rem; + } + + .close { + font-weight: 300; + opacity: 1; + } + + .alert-icon { + display: inline-flex; + align-items: flex-start; + margin-right: $spacer; + margin-bottom: $spacer; + + @include media-breakpoint-up(sm) { + margin-bottom: 0; + } + } + + .alert-content { + flex: 1 1 auto; + } + + .alert-title { + margin-bottom: $spacer / 2; + } + + .alert-msg { + p + p { + margin-bottom: $spacer; + } + + p:last-of-type { + margin-bottom: 0; + } + } + + &.alert-info { + border-left-color: theme-color("info"); + background-color: theme-color-light("info"); + fill: theme-color("info"); + } + + &.alert-success { + border-left-color: theme-color("success"); + background-color: theme-color-light("success"); + fill: theme-color("success"); + } + + &.alert-danger { + border-left-color: theme-color("danger"); + background-color: theme-color-light("danger"); + fill: theme-color("danger"); + } + + &.alert-warning { + border-left-color: theme-color("warning"); + background-color: theme-color-light("warning"); + fill: theme-color("warning"); + } + } \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_badge.scss b/src/assets/styles/bmc/_sila/custom/_badge.scss new file mode 100644 index 000000000..0b88b499b --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_badge.scss @@ -0,0 +1,21 @@ +.badge-pill { + // Need to explicitly set border-radius + // for pill variant because global $enable-rounded + // Bootstrap setting removes rounded pill style + border-radius: 10rem; + fill: currentColor; + font-weight: 400; + line-height: 1.5; + display: inline-flex; + .close { + font-size: 1em; + margin-left: $spacer/2; + font-weight: inherit; + color: inherit; + } +} + +.badge-primary { + background-color: theme-color-light("info"); + color: theme-color("info"); +} \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_base.scss b/src/assets/styles/bmc/_sila/custom/_base.scss new file mode 100644 index 000000000..1e3abf718 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_base.scss @@ -0,0 +1,295 @@ +body { + overflow-y: hidden; +} + +.scroll-container { + overflow-y: overlay; + height: calc(100vh - #{$header-height}); + &::-webkit-scrollbar { + margin-top: $header-height; + position: absolute; + width: 10px; + } + &::-webkit-scrollbar-thumb { + margin-top: $header-height; + border: 4px solid transparent; + background: $faint-secondary-primary-20; + border-radius: 16px; + background-clip: content-box; + } +} + +@-moz-document url-prefix() { + #logs-table-wrapper div, + #table-event-logs div, + .scroll-container, + .nav-container { + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: $faint-secondary-primary-20 transparent; +} +} + +.pointer { + cursor: pointer; +} + +.icon-edit, +.icon-options { + display: block; + margin: 2px 12px 0 auto; + cursor: pointer; +} + +h3, +.h3 { + font-size: 1.75rem; + font-weight: 400; + line-height: 1.2857; +} + +h4, +.h4 { + font-size: 1.25rem; + font-weight: 400; + line-height: 1.3; +} + +h5, +.h5 { + font-size: 1rem; + font-weight: 500; + line-height: 1.375; +} + +h6, +.h6 { + font-size: 0.875rem; + font-weight: 500; + line-height: 1.2857; +} + +.regular-12px { + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-primary; + &.red { + color: $red-brand-primary + } + &.underline { + text-decoration: underline; + cursor: pointer; + } + &.tretiatry { + color: $text-tretiatry; + } + &.quaternary { + color: $text-quaternary; + } +} + +.light-12px { + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 300; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-secondary; +} + +.caption-12px { + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-tretiatry; +} + + +.semi-bold-12px { + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 600; + line-height: 16px; + letter-spacing: 0em; + text-align: left; +} + +.semi-bold-12px__caps { + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 600; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + text-transform: uppercase; + color: $text-primary; + &:hover { + color: $text-primary; + } + &.tretiatry { + color: $text-tretiatry !important; + } +} + +.bold-12px__caps { + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 700; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-secondary; + text-transform: uppercase; +} + +.medium-12px { + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-primary; +} + +.modal-body, +#page-network dd, +.page-inventory dd, +.custom-radio, +.regular-14px { + font-family: 'Inter', sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: $text-secondary; +} + +#page-network dt, +.page-inventory dt, +.semi-bold-14px { + font-family: 'Inter', sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 600; + line-height: 20px; + color: $text-primary; +} + +#date-time dd, +.regular-16px { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 20px; + letter-spacing: 0em; + text-align: left; +} + +#date-time dt, +.semi-bold-16px { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 20px; + color: $text-primary; +} + +.medium-16px { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: $text-primary; +} + +.bold-16px { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; +} + +.bold-16px__caps { + font-family: 'Inter', sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + text-transform: uppercase; + color: $text-secondary; +} + +h2, .h2, +.modal-title, +.semi-bold-20px { + font-family: 'Inter', sans-serif; + font-size: 20px !important; + font-style: normal; + font-weight: 600; + line-height: 24px; + letter-spacing: 0em; +} + +.bold-24px { + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: bold; + font-weight: 700; + font-size: 24px; + line-height: 28px; + color: $text-primary; + margin: 0; +} + +.auth-description { + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 16px; + color: $login-page-description-color; +} + +.icon-expand { + height: 1.2rem; + width: 1.2rem; + float: right; + transition: 0.3s linear; + margin: $spacer/4 35px 0 auto; +} + +.icon-expand-right { + height: 1.2rem; + width: 1.2rem; + float: right; + transition: 0.3s linear; + margin: $spacer/4 5px 0 0; +} \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_bootstrap-grid.scss b/src/assets/styles/bmc/_sila/custom/_bootstrap-grid.scss new file mode 100644 index 000000000..7ad7c81b7 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_bootstrap-grid.scss @@ -0,0 +1,8 @@ +.container-xl { + // Fluid layout container class sets 100% + // width until xl breakpoint. Once a max-width + // is set, setting the left margin to 0 is needed + // so the content doesn't center align + // https://bootstrap-vue.org/docs/components/layout#fluid-width-container + margin-left: 0; +} \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_buttons.scss b/src/assets/styles/bmc/_sila/custom/_buttons.scss new file mode 100644 index 000000000..04a97c211 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_buttons.scss @@ -0,0 +1,222 @@ +.btn { + display: inline-flex; + align-items: center; + justify-content: space-around; + height: 36px; + &:disabled { + color: gray("600"); + fill: currentColor; + box-shadow: none !important; + &:not(.btn-link) { + border-color: gray("400"); + background-color: gray("400"); + } + } + &svg { + padding-right: 8px; + } +} + +.btn-md { + width: 220px; + height: 36px; +} + +.btn-lg { + width: 290px; + height: 36px; +} + +.btn-danger, +.btn-primary { + background-color: $red-brand-primary; + border-radius: 8px; + border: none; + box-shadow: 1px 2px 2px -1px rgb(79 37 37 / 40%) inset; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 20px; + &:hover { + background-color: $red-brand-primary-hover; + } + &:not(:disabled):not(.disabled):active:focus, + &:focus-visible { + border: none; + box-shadow: none; + background-color: $red-brand-primary-click; + } + &:focus { + border: none; + box-shadow: 0px 0px 0px 4px rgba(225, 23, 23, 0.5); + background-color: $red-brand-primary; + } + &:active { + border: none; + box-shadow: none; + background-color: $red-brand-primary; + } +} + +.btn-secondary, +.modal-header button { + background-color: $faint-secondary-primary-5; + color: $red-brand-primary; + border-radius: 8px; + border: none; + box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 20px; + &:hover { + background-color: $faint-secondary-primary-5-hover; + color: $red-brand-primary; + } + &:focus { + border: none; + box-shadow: 0px 0px 0px 4px rgba(225, 23, 23, 0.5); + color: $red-brand-primary; + background-color: $faint-secondary-primary-5; + } + &:not(:disabled):not(.disabled):active:focus, + &:focus-visible { + border: none; + box-shadow: none; + color: $red-brand-primary; + background-color: $faint-secondary-primary-20; + } + // style for standard close button in modal and popups + &.close { + width: 32px; + height: 22px; + padding: 0px; + margin: 0px; + background-color: $faint-secondary-primary-1; + border: 1px solid $faint-secondary-primary-10; + border-radius: 7px; + &:hover { + background-color: $faint-secondary-primary-2; + } + } +} + +.btn-unstyled { + border: none; + &:focus { + box-shadow: none; + } + &:active { + box-shadow: none; + } +} + +.btn-popover { + border: none; + color: $red-brand-primary; + height: 28px; + border-radius: 8px; + font-weight: 500; + font-size: 12px; + transition: ease-in 0.2s; + &:hover { + color: $white; + transition: ease-in 0.2s; + } + &:focus { + box-shadow: none; + } + &:active { + box-shadow: none; + } + &.selected-unit-button { + transition: ease-in 0.2s; + color: $white; + } + &.selected-choice-button { + transition: ease-in 0.2s; + color: $white; + } +} + +.btn-toogle-popover { + justify-content: flex-start; + width: 25px; + height: 16px; + padding: 0; + &:focus { + box-shadow: none; + } + &:active { + box-shadow: none; + } +} + +.btn-link { + color: $text-primary; + text-decoration: none !important; + &:hover { + background-color: gray("200"); + color: theme-color("primary"); + } + &:active { + background-color: gray("300"); + } + &:disabled { + box-shadow: $btn-focus-box-shadow; + } + &.collapsed { + .icon-expand { + transform: rotate(180deg); + transition: 0.3s linear; + } + .icon-expand-right { + transform: rotate(180deg); + transition: 0.3s linear; + } + } +} + +// Icon only buttons +.btn-icon-only svg { + margin-right: 0; +} + +// Datepicker, clear search and Password toggle buttons +.input-action-btn, +.btn-datepicker { + position: absolute; + right: 0; + top: 0; + z-index: $zindex-dropdown + 1; +} + +// Contain input buttons within input +.btn-datepicker .dropdown-toggle, +.input-action-btn { + padding: 7px; + margin: 1px; +} + +.collapse-button { + height: 56px; + width: 100%; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + gap: 8px; + &:active, + &:focus { + box-shadow: none; + } + &:hover { + color: $text-primary; + } +} + +.table-toolbar-button { + width: 220px; + height: 36px; +} \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_calendar.scss b/src/assets/styles/bmc/_sila/custom/_calendar.scss new file mode 100644 index 000000000..0307a6ce6 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_calendar.scss @@ -0,0 +1,17 @@ +.b-calendar-nav { + .btn { + &:hover { + background: none; + color: theme-color("dark"); + } + } +} + +.b-calendar-grid .btn { + display: inline-block; +} + +// Date picker focus +.b-calendar .b-calendar-grid { + padding: 6px 12px; +} \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_card.scss b/src/assets/styles/bmc/_sila/custom/_card.scss new file mode 100644 index 000000000..db8d076b4 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_card.scss @@ -0,0 +1,19 @@ +.card { + .bg-success { + background-color: theme-color-light('success')!important; + } + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 16px; +} + +.card-header { + border-radius: 15px 15px 0 0; + background-color: $faint-secondary-primary-10 !important; + color: $text-primary !important; + .nav-tabs .nav-link { + border-radius: 10px 10px 0 0 ; + &:hover { + background-color: $faint-secondary-primary-2; + } + } +} \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_dropdown.scss b/src/assets/styles/bmc/_sila/custom/_dropdown.scss new file mode 100644 index 000000000..1ea80d9f5 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_dropdown.scss @@ -0,0 +1,36 @@ +// Make calendar visible over the table +.dropdown-menu { + border-radius: 5px; + z-index: $zindex-dropdown + 1; + padding: 0; + a { + border-radius: 5px; + } +} +.dropdown-item { + padding-left: $spacer/4; + margin-top: -1 * $spacer/4; + background-color: $white; +} +// .b-dropdown-form { +// padding: $spacer/2; +// .form-group { +// margin-bottom: $spacer/2; +// } +// } +// Table filter dropdown clear button style +.table-filter { + .dropdown-item { + &:hover { + background-color: gray("200"); + } + &:active { + background-color: gray("300"); + } + &:focus { + outline: none; + background-color: transparent; + box-shadow: inset 0 0 0 2px theme-color("primary"); + } + } +} \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_forms.scss b/src/assets/styles/bmc/_sila/custom/_forms.scss new file mode 100644 index 000000000..bf69795a5 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_forms.scss @@ -0,0 +1,273 @@ +// Helper text +.form-text { + font-size: $form-label-font-size; + line-height: $form-line-height; + margin-top: -$spacer / 4; + margin-bottom: $spacer / 2; + color: gray("700")!important; +} + +// Legend label +.col-form-label { + color: gray("800"); + font-size: $form-label-font-size; + line-height: $form-line-height; +} + +.custom-select, +.form-control, +.input-group-text { + // border-color: gray("500") !important; + background-color: gray("100"); +} + +.custom-select, +.form-control { + // &:active { + // border: 1px solid $primary!important; + // } + // &:focus { + // color: theme-color("dark"); + // background-color: gray("100"); + // box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important; + // } + &:disabled { + background-color: gray("400"); + color: gray("600"); + } + &.is-invalid, + &:invalid { + border: 1px solid theme-color("danger") !important; + } +} + +.form-control::-webkit-outer-spin-button, +.form-control::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +.form-control[type='number'] { + -moz-appearance: textfield; +} + +// .custom-select, +// .custom-control-label, +.form-control { + border-radius: 8px; + border: none; + background-color: $faint-secondary-primary-5; + &:hover { + background-color: $faint-secondary-primary-5-hover; + } +} + +.select-per-page { + padding: 0 0 0 5px; + width: 146px !important; + height: 24px; + background-color: transparent; + border: 1px solid $on-surface-tretiatry; + border-radius: 4px; + background-image: url('~@/assets/images/_sila/icon-chevron.svg'); +} + +// Inverted form colors +.form-background { + background-color: none; + .custom-select, + .form-control { + border-radius: 8px; + border: none; + background-color: $faint-secondary-primary-5; + &:hover { + // opacity: 0.1; + background-color: $faint-secondary-primary-5-hover; + } + &:focus { + border: 1px solid gray("400"); + } + &:disabled { + background-color: gray("400"); + color: gray("600"); + } + &.is-valid { + border: 1px solid gray("400"); + } + } +} + +.invalid-feedback { + font-size: $form-label-font-size; + line-height: $form-line-height; +} + +.custom-checkbox { + line-height: 23px; +} + +.custom-radio { + line-height: 23px !important; +} + +.custom-checkbox ::before { + box-shadow: none !important; + border: 2px solid $on-surface-secondary; + background-color: #fff; + border-radius: 3px; +} + +.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after, +.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before, +.custom-control-input:checked ~ .custom-control-label::before { + border-radius: 3px; + background-color: $red-brand-primary; + border-color: $red-brand-primary; + cursor: pointer; + &:focus { + box-shadow: none !important; + } +} + +.custom-control { + .custom-control-input[disabled=disabled] { + & + .custom-control-label { + // Disabled label for checkbox, radio, + // switch bootstrap form components + color: gray("600")!important; + } + } +} + +.custom-switch { + width: 28px; + height: 16px; +} + +.custom-switch +.custom-control-input:focus ~ .custom-control-label::before { + box-shadow: none; +} + +.custom-switch +.custom-control-input ~ .custom-control-label::after { + border: 1px solid $faint-secondary-primary-20; + background: $white; +} + +.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { + border-color: $faint-secondary-primary-20; +} + +.custom-control-input:not(:disabled):active ~ .custom-control-label::before { + background-color: rgba(4, 10, 15, 0.3); + border-color: $faint-secondary-primary-20; +} + +.custom-switch +.custom-control-input ~ .custom-control-label::before { + border: 1px solid $faint-secondary-primary-20; + background: rgba(4, 10, 15, 0.3); +} + +.custom-switch +.custom-control-input:checked ~ .custom-control-label::before { + background: $red-brand-primary; + border: 1px solid $faint-secondary-primary-20; + border-radius: 8px; +} + +.custom-control-label::after { + cursor: pointer; +} + +.b-form-tag-remove { + // X button to remove tag + font-weight: normal; +} + +.b-form-tags-button { + // Add button inside input field + white-space: nowrap; + margin-right: -$spacer; + &.btn-link-primary { + color: theme-color("primary"); + fill: currentColor; + } +} + +// Form validation icon + .form-control.is-invalid, + .form-control.is-valid { + background-position: right 1rem bottom 50%; + } + +// Form validation icon with datepicker or password toggle icon +.form-control-with-button { + &.is-invalid, + &.is-valid { + background-position: right 3rem bottom 50%; + } +} + +// Global style progress bar +.progress { + width: 120px; + height: 8px; + border-radius: 4px; + background-color: $faint-secondary-primary-10; +} + +.progress-bar { + background-color: $red-brand-primary; + border-radius: 4px; +} + +.progress_bar_percent { + color: $red-brand-primary; +} + +.cb label{ + padding-top: 4px; +} +.system-control__radio label { + padding-top: 4px; +} + +//radio buttons style + .custom-radio ::before { + border: 1px solid $red-brand-primary; + background-color: #fff; + border-radius: 100%; +} + +.custom-radio +.custom-control-input:checked +~ .custom-control-label::before { + border: 2px solid $red-brand-primary; + background-color: $red-brand-primary; + box-shadow: 0px 0px 0px 2.4px $white inset; + border-radius: 100%; +} + + .custom-radio + .custom-control-input:hover + ~ .custom-control-label::before { + background-color: $red-brand-primary-hover !important; + box-shadow: 0px 0px 0px 2.4px $white inset; + border-color: $red-brand-primary-hover; +} + +.custom-radio +.custom-control-input:checked +~ .custom-control-label::after { + background-image: none !important; + border-radius: 100%; +} + +.custom-radio +.custom-control-input:active +~ .custom-control-label::before { + background-color: $red-brand-primary-active !important; + box-shadow: 0px 0px 0px 2.4px $white inset; + border-color: $red-brand-primary-active; +} diff --git a/src/assets/styles/bmc/_sila/custom/_index.scss b/src/assets/styles/bmc/_sila/custom/_index.scss new file mode 100644 index 000000000..40995ce95 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_index.scss @@ -0,0 +1,20 @@ +// OpenBMC Global Style Overrides of out of the box +// Bootstrap styles +@import "./alert"; +@import "./badge"; +@import "./base"; +@import "./bootstrap-grid"; +@import "./buttons"; +@import "./calendar"; +@import "./card"; +@import "./dropdown"; +@import "./forms"; +@import "./kvm"; +@import "./modal"; +@import "./pagination"; +@import "./section-divider"; +@import "./sol"; +@import "./tables"; +@import "./toasts"; +@import "./popover"; +@import "./logs"; \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_kvm.scss b/src/assets/styles/bmc/_sila/custom/_kvm.scss new file mode 100644 index 000000000..74b61c7e4 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_kvm.scss @@ -0,0 +1,16 @@ +#terminal-kvm { + height: 100vw; + display: flex; + &.full-window { + height: calc(100vh - 80px); + } + div:nth-child(1) { + background: transparent !important; + display: block !important; + overflow: hidden !important; + canvas { + max-height: 579px; + max-width: 740px; + } + } +} diff --git a/src/assets/styles/bmc/_sila/custom/_logs.scss b/src/assets/styles/bmc/_sila/custom/_logs.scss new file mode 100644 index 000000000..237205c6d --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_logs.scss @@ -0,0 +1,78 @@ +.logs-section .table.b-table > thead > tr > [aria-sort='ascending'] { + background-image: url('~@/assets/images/_sila/event-logs/sort-icon-rotate.svg'); +} + +.logs-section .table.b-table > thead > tr > [aria-sort='descending'], +.table.b-table > thead > tr > [aria-sort='none'] { + background-image: url('~@/assets/images/_sila/event-logs/sort-icon.svg'); +} + +.logs-section .b-table-sort-icon-left { + background-size: 15px !important; +} + +.logs-head-container { + position: absolute; + width: 50%; + top: calc(#{$header-height}); + right: 0px; + display: flex; + flex-flow: row nowrap; + justify-content: flex-end; + align-items: baseline; + gap: 6px; + z-index: 1001; +} + +#logs-table-wrapper div { + max-height: calc(100vh - 194px - #{$header-height}); +} + +#logs-table, +#table-event-logs { + margin: 0 !important; +} + +// scrollbar styles +#logs-table-wrapper div, +#table-event-logs div { + overflow-y: overlay; + &::-webkit-scrollbar { + position: absolute; + width: 10px; + } + &::-webkit-scrollbar-thumb { + border: 4px solid transparent; + border-top: 52px solid transparent; + background: $faint-secondary-primary-20; + border-radius: 16px; + background-clip: content-box; + } +} + +.logs-table__th { + background-color: #f8f8f8 !important; + border-bottom: 1px solid $faint-secondary-primary-20 !important; + border-top: 1px solid $faint-secondary-primary-20 !important; + color: $text-primary !important; +} + +.logs-table__td { + border-bottom: 1px solid $faint-secondary-primary-10 !important; + height: 64px; +} + +.logs-pagination-container { + width: calc(100% - #{$navigation-width}); + height: $toolbar-height; + position: fixed; + bottom: 0; + right: 0; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06); + z-index: $zindex-dropdown; + background-color: $white; +} + +.table-pagination-select { + line-height: 1.8rem; +} diff --git a/src/assets/styles/bmc/_sila/custom/_modal.scss b/src/assets/styles/bmc/_sila/custom/_modal.scss new file mode 100644 index 000000000..803d95d83 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_modal.scss @@ -0,0 +1,69 @@ +.modal-dialog { + margin: 25vh auto 0; +} + +.modal-content { + border-radius: 16px; +} + +.modal-header { + align-items: center; + border-bottom: 1px solid $faint-secondary-primary-10; + .close { + font-weight: normal; + color: theme-color("dark"); + opacity: 1; + } +} + +.modal-body { + display: flex; + justify-content: flex-start; +} + +.modal-footer { + border-top: 1px solid $faint-secondary-primary-10; +} + +#modal-reset .modal-body { + flex-direction: column; +} + +#generate-csr .custom-select, +#upload-certificate .custom-select, +#modal-user .custom-select { + background-color: transparent; + border: 1px solid $on-surface-tretiatry; + border-radius: 4px; + background-image: url('~@/assets/images/_sila/icon-chevron.svg'); +} + +// file-input-modal +.modal-file-body { + display: flex; + padding: 0; + justify-content: center; +} + +.file-input_container > .custom-file { + width: 432px; + height: 357px; +} + +.custom-file-input ~ .custom-file-label { + background-color: transparent; + border: 1px dashed rgba(12, 28, 41, 0.6); + box-sizing: border-box; + border-radius: 8px; + width: 432px; + height: 357px; + display: flex; + align-items: center; + text-align: center; + white-space: normal; + justify-content: center; +} + +.custom-file-input ~ .custom-file-label::after { + display: none; +} diff --git a/src/assets/styles/bmc/_sila/custom/_pagination.scss b/src/assets/styles/bmc/_sila/custom/_pagination.scss new file mode 100644 index 000000000..bce593eff --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_pagination.scss @@ -0,0 +1,34 @@ +.table-pagination-select { + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; + select { + width: fit-content; + } + label { + margin-left: $spacer; + line-height: $spacer * 2; + } +} + +.b-pagination { + @include media-breakpoint-up(sm) { + justify-content: flex-end; + } + + .page-link { + border: transparent; + &:hover { + background-color: transparent; + } + &:focus { + box-shadow: none; + } + } + .page-item.active button { + color: theme-color("dark"); + background-color: color("white"); + border-color: transparent; + box-shadow: inset 0px -3px theme-color("primary"); + } +} \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_popover.scss b/src/assets/styles/bmc/_sila/custom/_popover.scss new file mode 100644 index 000000000..8611fb0e7 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_popover.scss @@ -0,0 +1,72 @@ +.b-popover { + display: flex; + flex-direction: column; + align-items: flex-start; + background: $white; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05); + border-radius: 4px; + position: relative; + max-width: 400px; + width: 400px; + height: auto; + will-change: unset !important; +} + +.popover-header { + background-color: transparent; + border: none; + padding: 24px 0px 0px 24px; + width: 400px; +} + +.arrow { + visibility: hidden; +} + +.popover-heigth-100 { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + background: $white; + border: 1px solid $faint-secondary-primary-10; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05); + padding: 5px; + border-radius: 8px; + max-width: 100px; +} + +.popover-heigth-100 .popover-body { + padding: 0px; + +} + +.apply-reload-popover { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + background: $white; + border: 1px solid $faint-secondary-primary-10; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05); + padding: 5px; + border-radius: 8px; + max-width: 250px; +} + +.apply-reload-popover .popover-body { + padding: 0px; +} + +.boot-popover { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + background: $white; + border: 1px solid $faint-secondary-primary-10; + box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05); + padding: 5px; + border-radius: 8px; + max-width: 200px; +} diff --git a/src/assets/styles/bmc/_sila/custom/_section-divider.scss b/src/assets/styles/bmc/_sila/custom/_section-divider.scss new file mode 100644 index 000000000..79b14476c --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_section-divider.scss @@ -0,0 +1,7 @@ +.section-divider { + border-bottom: 1px solid gray('400'); + } + +.page-collapse-decorator { + border-bottom: 1px solid $faint-secondary-primary-10; +} \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_sol.scss b/src/assets/styles/bmc/_sila/custom/_sol.scss new file mode 100644 index 000000000..6987cf795 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_sol.scss @@ -0,0 +1,3 @@ +#terminal .xterm .xterm-viewport { + overflow: auto; +} \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/custom/_tables.scss b/src/assets/styles/bmc/_sila/custom/_tables.scss new file mode 100644 index 000000000..23baf7571 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_tables.scss @@ -0,0 +1,409 @@ +.table { + position: relative; + z-index: $zindex-dropdown; + border-radius: 10px; + + td { + vertical-align: middle; + + // Table action buttons + .btn-link { + height: 20px; + border-radius: 2px; + padding: 4px !important; + display: inline-flex; + justify-content: center; + align-items: center; + } + } + + // thead-light added for specificity + .thead-light th { + text-align: left !important; + vertical-align: middle; + border-bottom: 1px solid gray("300"); + &:focus { + outline: none; + } + } + + .status-icon svg { + width: 1.2rem; + height: auto; + } + + .b-table-has-details { + td { + border-bottom: none; + } + .table-row-expand svg { + transform: rotate(180deg); + } + } + + .b-table-details { + background-color: theme-color("light"); + td { + padding: 0px 16px 16px 16px; + } + dl { + margin: 0; + } + dt { + float: left; + clear: left; + margin-right: $spacer / 2; + } + dd { + line-height: 1.2 + } + } + + .table-row-expand { + width: 50px; + .btn { + padding: 0; + width: 27px; + } + } + .b-table-sort-icon-left { + padding-left: calc(1.2rem + 0.65em) !important; + &:focus { + outline: none; + box-shadow: inset 0 0 0 2px theme-color('primary') !important; + } + &:hover { + background-color: theme-color-dark('light'); + } + } +} + +.b-table-sticky-header td { + border-top: none; +} + +// Table stacked style for small screen only +@include media-breakpoint-down(xs) { + .b-table-stacked-sm { + border: 1px solid gray("300"); + + tr { + + &:not(:first-child) > td[aria-colindex='1'] { + padding-top: 0.625rem; + } + + &:not(.b-table-empty-row) { + position: relative; // Restrict background color to get zebra striping for the row + + &::before, + &::after { + position: absolute; + top: 0; + height: 100%; + z-index: -1; + } + + &:before { + content: ''; + background-color: gray("200"); + width: 40%; + border-right: 1px solid gray("300"); + } + + &:after { + content: ''; + right: 0; + width: 60%; + } + + &:nth-child(even)::after { + background-color: gray("100"); // Zebra striping for the row + } + } + + td { + border: 0; + padding: 0.75rem; + text-align: left !important; + + &:last-of-type { + border-right: 0; + } + } + } + } + + .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] { + &::before { + text-align: left; + padding-left: $spacer /2; + } + + > div { + padding-left: 1rem; + } + } +} + +.b-table-details > td { + padding: 0px !important; +} + +.indicators-Critical { + color: $indicators-errors !important; +} + +.indicators-Warning { + color: $indicators-warning !important; +} + +.indicators-OK { + color: $indicators-succes !important; +} + +.bootstrap-table__section { + position: relative; + margin: 16px 2rem 24px 2rem; + width: 90%; +} +// 1 // +.bootstrap-table { + border-top: none !important; + border: 1px solid rgba(26, 62, 91, 0.1); + background-color: $faint-secondary-primary-5; +} + +// style for rounded tables +// add style for page ID +#page-inventory table, +#page-system-network table, +#page-network table, +#page-bmc-settings table, +#page-memory-specification table, +#page-processors table, +// add style for class +#main-content .table-rounded { + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + border: 1px solid rgba(26, 62, 91, 0.3); + background-color: none; + + tr { + border-radius: 10px 10px 0 0; + -webkit-border-radius: 10px 10px 0 0; + -moz-border-radius: 10px 10px 0 0; + // font styles + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 600; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-primary; + &:hover { + background-color: $faint-secondary-primary-2-hover; + } + &.b-table-details:hover { + background-color: transparent; + } + } + + th { + border-top: none; + border-bottom: none; + text-transform: uppercase; + border-left: 1px solid rgba(26, 62, 91, 0.3); + background-color: $faint-secondary-primary-10 !important; + color: $text-primary !important; + &:first-child { + border-left: none; + border-radius: 10px 0 0 0; + } + &:last-child { + border-right: none; + border-radius: 0 10px 0 0; + } + } + + td { + // font styles + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: $text-secondary; + } +} +.table-network__icon { + max-width: 20%; + margin: 0 5px 0 auto !important; +} + +// stripes table // +#main-content .table-stripes { + border-top: none !important; + border: 1px solid rgba(26, 62, 91, 0.1); + background-color: $faint-secondary-primary-5; + tr:nth-of-type(even) { + background-color: rgb(255 255 255); + } + th { + border-top: none; + display: none; + &:first-child { + border-top: none; + } + &:last-child { + border-top: none; + } + } + + td { + border-top: 1px solid rgba(26, 62, 91, 0.1); + // font styles + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-secondary; + &:first-child { + width: 70%; + } + &:first-child { + border-right: 1px solid rgba(26, 62, 91, 0.1); + } + .col > .custom-switch { + padding-top: 5px; + margin: -10px 0 0 auto; + } + } +} + +// table accessory // +#main-content .table-accessory, +#main-content .table-firmware { + + th { + // padding: 10px 5px !important; + background-color: transparent !important; + color: $text-primary !important; + border-top: none !important; + border-bottom: 1px solid $faint-secondary-primary-10; + // font styles + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 600; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + } + + td { + padding: 5px !important; + border-top: none !important; + // font styles + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 300; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-secondary; + } +} +#main-content .table-accessory{ + th { + padding: 10px 5px !important; + } +} +.bootstrap-table__section + .table.b-table + > thead + > tr + > [aria-sort='ascending'] { + background-image: url('~@/assets/images/_sila/event-logs/sort-icon-rotate.svg'); +} + +.bootstrap-table__section + .table.b-table + > thead + > tr + > [aria-sort='descending'], +.table.b-table > thead > tr > [aria-sort='none'] { + background-image: url('~@/assets/images/_sila/event-logs/sort-icon.svg'); +} + +// table analytical // +#main-content .table-analytical { + border: 1px solid rgba(26, 62, 91, 0.3); + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + tr { + border-top: none !important; + border-radius: 0 0 0 0; + -webkit-border-radius: 0 0 0 0; + -moz-border-radius: 0 0 0 0; + &:hover { + background-color: $faint-secondary-primary-2-hover; + } + &.b-table-details:hover { + background-color: transparent; + } + } + + th { + border-top: none !important; + border-bottom: 1px solid rgba(26, 62, 91, 0.3) !important; + background-color: $white !important; + color: $text-primary !important; + // font styles + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 600; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + text-transform: uppercase; + color: $text-primary; + &:first-child { + border-radius: 4px 0 0 0; + -webkit-border-radius: 4px 0 0 0; + -moz-border-radius: 4px 0 0 0; + } + &:last-child { + border-radius: 0 4px 0 0; + -webkit-border-radius: 0 4px 0 0; + -moz-border-radius: 0 4px 0 0; + } + } + + td { + border-top: none !important; + padding: 10px !important; + border-radius: 0; + -webkit-border-radius: 0; + -moz-border-radius: 0; + // font styles + font-family: 'Inter', sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + color: $text-secondary; + } +} diff --git a/src/assets/styles/bmc/_sila/custom/_toasts.scss b/src/assets/styles/bmc/_sila/custom/_toasts.scss new file mode 100644 index 000000000..a3480fda7 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_toasts.scss @@ -0,0 +1,61 @@ +.b-toaster { + top: 95px!important; // make sure toasts do not hide top header +} + +// Toast component and status icon style +.toast { + padding: $spacer/2 $spacer/2 $spacer/2 $spacer+2; + border-width: 0 0 0 3px; + box-shadow: $box-shadow; + .close { + font-weight: 300; + opacity: 1; + } +} + +.toast-header { + display: flex; + align-items: flex-start; + background-color: inherit!important; //override specificity + border: none; + color: theme-color("dark")!important; //override specificity + padding-bottom: 0; +} + +.toast-icon { + display: flex; + margin-right: 1rem; + + svg { + margin-left: -2.5rem; + } + + + .close { + line-height: .9; + } +} + +.toast-body { + color: theme-color("dark"); + padding-top: 0; +} + +.b-toast-success .toast { + border-left-color: theme-color("success")!important; + background-color: theme-color-light("success")!important; +} + +.b-toast-info .toast { + border-left-color: theme-color("info")!important; + background-color: theme-color-light("info")!important; +} + +.b-toast-danger .toast { + border-left-color: theme-color("danger")!important; + background-color: theme-color-light("danger")!important; +} + +.b-toast-warning .toast { + border-left-color: theme-color("warning")!important; + background-color: theme-color-light("warning")!important; +} \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/helpers/_colors.scss b/src/assets/styles/bmc/_sila/helpers/_colors.scss new file mode 100644 index 000000000..028d962bb --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_colors.scss @@ -0,0 +1,75 @@ +// Sass Color Variables +$black: #000; +$white: #FFFFFF; + +$blue-500: #2d60e5; +$green-500: #4EBF19; +$red-500: #FF4141; +$yellow-500: #F0AC0C; +$dark-blue: #1A3E5B; + +$gray-100: #f4f4f4; +$gray-200: #e6e6e6; +$gray-300: #d8d8d8; +$gray-400: #cccccc; +$gray-500: #b3b3b3; +$gray-600: #999999; +$gray-700: #666666; +$gray-800: #3f3f3f; +$gray-900: #161616; + + +// Sass Base Color Variables +$blue: $blue-500; +$green: $green-500; +$red: $red-500; +$yellow: $yellow-500; + +// Sass Theme Color Variables +// Can be used as variants +$danger: $red; +$dark: $dark-blue; +$info: $blue; +$light: $white; +$primary: $dark-blue; +$secondary: #1A3E5B; +$success: $green; +$warning: $yellow; + +$loading-color: $primary; +$navbar-color: $primary; + +$login-page-description-color: rgba(12, 28, 41, 0.6); + +$text-primary: #0C1C29; +$text-secondary: #0C1C29E5; +$text-tretiatry: rgba(12, 28, 41, 0.6); +$text-quaternary: rgba(12, 28, 41, 0.3); + +$indicators-errors: #FF4141; +$indicators-succes: #4EBF19; +$indicators-warning: #F0AC0C; +$indicators-complementary:rgba(26, 62, 91, 0.6);; + +$on-surface-primary: #040A0F; + +$surface-secondary: #F3F4F5; +$on-surface-secondary: rgba(4, 10, 15, 0.6); +$on-surface-tretiatry: #040A0F4D; + +$faint-secondary-primary-1: rgba(26, 62, 91, 0.01); +$faint-secondary-primary-2: rgba(26, 62, 91, 0.02); +$faint-secondary-primary-2-hover: rgba(26, 62, 91, 0.03); + +$faint-secondary-primary-5: rgba(26, 62, 91, 0.05); +$faint-secondary-primary-5-hover: rgba(20, 39, 53, 0.1); +$faint-secondary-primary-10: rgba(26, 62, 91, 0.1); +$faint-secondary-primary-20: rgba(26, 62, 91, 0.2); +$faint-brand-primary-40:rgba(225, 23, 23, 0.4); + +$red-brand-primary: #E11717; +$red-brand-primary-hover: #FC2A2A; +$red-brand-primary-active: #df2323; +$red-brand-primary-disabled: #E17171; +$red-brand-primary-click: #C71414; +$red-brand-primary-5: rgba(225, 23, 23, 0.05); diff --git a/src/assets/styles/bmc/_sila/helpers/_functions.scss b/src/assets/styles/bmc/_sila/helpers/_functions.scss new file mode 100644 index 000000000..57956c99e --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_functions.scss @@ -0,0 +1,9 @@ +// This function is usually used to get a lighter +// theme variant color to use as a background color +@function theme-color-light($variant) { + @return theme-color-level($variant, -11.3); +} + +@function theme-color-dark($variant) { + @return theme-color-level($variant, 2); +} \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/helpers/_index.scss b/src/assets/styles/bmc/_sila/helpers/_index.scss new file mode 100644 index 000000000..ce0631a78 --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_index.scss @@ -0,0 +1,4 @@ +@import "./colors"; +@import "./motion"; +@import "./variables"; +@import "./functions"; \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/helpers/_motion.scss b/src/assets/styles/bmc/_sila/helpers/_motion.scss new file mode 100644 index 000000000..55a3eed97 --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_motion.scss @@ -0,0 +1,14 @@ +$duration--fast-01: 70ms; //Micro-interactions such as button and toggle +$duration--fast-02: 110ms; //Micro-interactions such as fade +$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements +$duration--moderate-02: 240ms; //Expansion, system communication, toast +$duration--slow-01: 400ms; //Large expansion, important system notifications +$duration--slow-02: 700ms; //Background dimming + +// https://www.carbondesignsystem.com/guidelines/motion/basics/#easing +$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9); +$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1); +$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9); +$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1); +$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9); +$exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1); \ No newline at end of file diff --git a/src/assets/styles/bmc/_sila/helpers/_variables.scss b/src/assets/styles/bmc/_sila/helpers/_variables.scss new file mode 100644 index 000000000..9e3a3aed6 --- /dev/null +++ b/src/assets/styles/bmc/_sila/helpers/_variables.scss @@ -0,0 +1,24 @@ +// Override Bootstrap Variables - node_modules/Bootstrap/scss/_variables.scss +$enable-rounded: false; +$enable-validation-icons: false; +$transition-base: all $duration--moderate-02 $standard-easing--productive; +$transition-fade: opacity $duration--moderate-01 $standard-easing--productive; +$transition-collapse: height $duration--slow-01 $standard-easing--expressive; + +// OpenBMC Custom Variables +$responsive-layout-bp: lg; +$first-header-height: 48px; +$second-header-height: 39px; +$header-height: 87px; +$headerHeight: 40px; +$navigation-width: 320px; +$toolbar-height: 60px; +$form-label-font-size: .875rem; +$form-line-height: 1.25rem; +$box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); +$focus-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, +border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + +// :export { +// headerHeight: $header-height; +// } \ No newline at end of file diff --git a/src/components/_sila/AppHeader/AppHeader.vue b/src/components/_sila/AppHeader/AppHeader.vue index 84e4588f1..96c93fbb5 100644 --- a/src/components/_sila/AppHeader/AppHeader.vue +++ b/src/components/_sila/AppHeader/AppHeader.vue @@ -31,39 +31,89 @@
- | - {{ assetTag }} - {{ modelType }} - {{ serialNumber }} + | + {{ + assetTag + }} + {{ modelType }} + {{ serialNumber }}
- - + + + + +
  • + + + {{ $t('appHeader.health') }} + +
    • +
  • + + + {{ $t('appHeader.power') }} + +
  • - @@ -241,6 +292,7 @@ export default { box-shadow: inset 0 0 0 3px $padding-color, inset 0 0 0 5px $outline-color; } .app-header { + flex-grow: 1; .link-skip-nav { position: absolute; top: -60px; @@ -252,39 +304,52 @@ export default { transition-timing-function: $entrance-easing--expressive; } } + + .app-logo { + margin-top: 10px; + } + .nav-top-button { + color: $white; + padding: 0px; + margin: 0px 8px; + } + + .active-route-top-nav { + background-color: $faint-brand-primary-40; + border-radius: 4px; + } + .navbar-text, .nav-link, .btn-link { - color: color('white') !important; - fill: currentColor; - padding: 0.68rem 1rem !important; + border-radius: 4px; + color: $white !important; &:hover { - background-color: theme-color-level(light, 10); + background-color: $faint-brand-primary-40; } &:active { - background-color: theme-color-level(light, 9); - } - &:focus { - @include focus-box-shadow; - outline: 0; + background-color: $faint-brand-primary-40; } } - .nav-item { - fill: theme-color('light'); - } - .navbar { padding: 0; background-color: $navbar-color; + svg { + margin-right: 2px; + } + .status-icon { + svg { + vertical-align: text-bottom; + } + } @include media-breakpoint-up($responsive-layout-bp) { - height: $header-height; + height: $first-header-height; } .helper-menu { @include media-breakpoint-down(sm) { - background-color: gray('800'); width: 100%; justify-content: flex-end; @@ -292,11 +357,6 @@ export default { .btn { padding: $spacer / 1.125 $spacer / 2; } - - .nav-link:focus, - .btn:focus { - @include focus-box-shadow($gray-800); - } } .responsive-text { @@ -311,14 +371,13 @@ export default { @include media-breakpoint-up($responsive-layout-bp) { padding: 0 $spacer; } - align-items: center; + align-items: baseline; .navbar-brand, .nav-link { transition: $focus-transition; } .nav-tags { - color: theme-color-level(light, 3); @include media-breakpoint-down(xs) { @include sr-only; } @@ -332,8 +391,8 @@ export default { .nav-trigger { fill: theme-color('light'); - width: $header-height; - height: $header-height; + width: $first-header-height; + height: $first-header-height; transition: none; display: inline-flex; flex: 0 0 20px; @@ -374,11 +433,25 @@ export default { .navbar-brand { padding: $spacer/2; - height: $header-height; + height: $first-header-height; line-height: 1; &:focus { box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white'); outline: 0; } } + +.app-header-logout, +.app-header-notification { + margin: 0 5px; + background: none; + border: none; + width: 30px; + height: 30px; + &:hover { + background: $faint-brand-primary-40; + border-radius: 5px; + border: none; + } +} diff --git a/src/components/_sila/AppNavigation/AppNavigation.vue b/src/components/_sila/AppNavigation/AppNavigation.vue index acfabe76b..1228968d6 100644 --- a/src/components/_sila/AppNavigation/AppNavigation.vue +++ b/src/components/_sila/AppNavigation/AppNavigation.vue @@ -2,8 +2,8 @@