Lisbet Alvarez
72f7c8a92d
* fix: 🐛 properly show username for oidc auth method in user menu * test: 💍 fix admin ui tests * test: 💍 fix desktop ui tests * refactor: 💡 admin to not store username in authenticated object * refactor: 💡 use getter in app controller * test: 💍 POC for how we could update our tests to use auth account * refactor: 💡 remove unused service * test: 💍 fix all tests in ui/admin * test: 💍 revert one change * refactor: 💡 update ui/desktop w/ feedback + fix tests * refactor: 💡 add in error handling * refactor: 💡 cleanup unused service * test: 💍 fix e2e test selector ✅ Closes: https://hashicorp.atlassian.net/browse/ICU-17231
1043 lines
19 KiB
SCSS
1043 lines
19 KiB
SCSS
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: BUSL-1.1
|
|
*/
|
|
|
|
@use 'rose/variables/sizing';
|
|
@use 'rose/variables/media';
|
|
@use 'rose/utilities/type';
|
|
|
|
@use 'rose';
|
|
@use 'notify';
|
|
@use '@hashicorp/ember-asciinema-player';
|
|
|
|
.rose-layout-global {
|
|
.rose-layout-global-body {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.rose-layout-centered {
|
|
> .rose-layout-page {
|
|
width: sizing.rems(l) * 18;
|
|
}
|
|
|
|
@media (width <= (media.width(small))) {
|
|
display: block;
|
|
|
|
> .rose-layout-page {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rose-nav-sidebar {
|
|
margin-top: sizing.rems(xxl);
|
|
|
|
& + .rose-nav-sidebar {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.hds-icon {
|
|
margin-right: sizing.rems(xs);
|
|
}
|
|
}
|
|
|
|
.rose-form {
|
|
&:not(.full-width) {
|
|
width: 66%;
|
|
}
|
|
}
|
|
|
|
.rose-header {
|
|
position: relative;
|
|
|
|
.logotype {
|
|
display: none;
|
|
}
|
|
|
|
&.loading {
|
|
&::after {
|
|
// animation: gradient 1s linear infinite;
|
|
// background: repeating-linear-gradient(
|
|
// to right,
|
|
// var(--subtle),
|
|
// var(--subtle),
|
|
// var(--info),
|
|
// var(--subtle),
|
|
// var(--subtle)
|
|
// );
|
|
background-position: -100% 0;
|
|
background-size: 200% auto;
|
|
content: ' ';
|
|
height: 3px;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 100%;
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: -100% 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[class*='session-status-'] {
|
|
color: var(--ui-gray-subtler-2);
|
|
}
|
|
|
|
.session-status-active {
|
|
color: var(--success);
|
|
}
|
|
|
|
.nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// Onboarding styles
|
|
.create-resources {
|
|
width: sizing.rems(xl) * 15;
|
|
|
|
.create-resources-form {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: sizing.rems(s);
|
|
}
|
|
|
|
.hds-form-group {
|
|
margin-top: sizing.rems(l);
|
|
|
|
.image-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: sizing.rems(l);
|
|
}
|
|
}
|
|
|
|
.create-resources-item {
|
|
margin-bottom: sizing.rems(xxl);
|
|
|
|
.create-resources-item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
align-self: center;
|
|
gap: 8px;
|
|
margin-bottom: sizing.rems(s);
|
|
|
|
h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.hds-icon-tile {
|
|
color: var(--token-color-foreground-success);
|
|
}
|
|
}
|
|
|
|
.hds-link-standalone {
|
|
margin-bottom: sizing.rems(xs);
|
|
}
|
|
|
|
.create-resources-item-controller {
|
|
margin-top: sizing.rems(xl);
|
|
|
|
.create-resources-item-controller-copyable {
|
|
margin: sizing.rems(xxs) 0 sizing.rems(l) 0;
|
|
}
|
|
|
|
.image-container > svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* stylelint-disable selector-class-pattern */
|
|
.oidc-prompts {
|
|
margin-left: 2.5rem;
|
|
|
|
.hds-form-group__control-field {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
/* stylelint-enable selector-class-pattern */
|
|
|
|
.worker-create-section {
|
|
border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
|
|
border-radius: sizing.rems(xxs);
|
|
margin-bottom: sizing.rems(xl);
|
|
padding: sizing.rems(l);
|
|
|
|
> div {
|
|
margin-bottom: sizing.rems(l);
|
|
}
|
|
|
|
> p span {
|
|
background-color: var(--token-color-surface-strong);
|
|
border-radius: 5px;
|
|
padding: sizing.rems(xxxs) sizing.rems(xxs);
|
|
}
|
|
|
|
.worker-auth-token {
|
|
align-items: flex-end;
|
|
display: flex;
|
|
gap: sizing.rems(m);
|
|
|
|
[class*='hds-form-field--layout'] {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.worker-success {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
> div {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: sizing.rems(xs);
|
|
|
|
p {
|
|
margin-bottom: sizing.rems(xxs);
|
|
}
|
|
|
|
&:first-child {
|
|
width: 40%;
|
|
|
|
svg {
|
|
flex: none;
|
|
}
|
|
|
|
p {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.info-field {
|
|
.hds-form-field--layout-vertical {
|
|
grid-template-areas: 'label' 'text-input' 'helper-text';
|
|
|
|
.hds-form-label {
|
|
font-size: sizing.rems(m);
|
|
grid-area: label;
|
|
line-height: sizing.rems(m) + sizing.rems(xxs);
|
|
}
|
|
|
|
.hds-form-text-input {
|
|
background-color: transparent;
|
|
border: 0;
|
|
color: var(--token-form-label-color);
|
|
grid-area: text-input;
|
|
font-size: sizing.rems(m);
|
|
padding: 0;
|
|
}
|
|
|
|
.hds-form-helper-text {
|
|
color: var(--token-form-label-color);
|
|
grid-area: helper-text;
|
|
}
|
|
}
|
|
|
|
&.has-icon {
|
|
.hds-icon {
|
|
position: absolute;
|
|
transform: translateY(sizing.rems(xl) - sizing.rems(xs));
|
|
}
|
|
|
|
.hds-form-helper-text,
|
|
.hds-form-text-input {
|
|
margin-left: sizing.rems(l) + sizing.rems(xs);
|
|
}
|
|
}
|
|
}
|
|
|
|
// json secret editor
|
|
.secret-editor {
|
|
// Secret Editor body and gutter colors are based on the Monokai color template
|
|
// and are used for both the Editor and the Skeleton views
|
|
--button-shadow: #000004;
|
|
--secret-editor-body: #272822; // body and button background
|
|
--secret-editor-gutter: #31332b; // gutter background
|
|
--secret-editor-height: 210px;
|
|
|
|
background: var(--secret-editor-body);
|
|
border-radius: sizing.rems(xxs);
|
|
height: var(--secret-editor-height);
|
|
margin-bottom: sizing.rems(l);
|
|
width: 100%;
|
|
|
|
.secret-editor-json {
|
|
.CodeMirror {
|
|
border-radius: sizing.rems(xxs);
|
|
height: var(--secret-editor-height);
|
|
display: block;
|
|
}
|
|
|
|
.CodeMirror-gutters {
|
|
background: var(--secret-editor-gutter);
|
|
}
|
|
}
|
|
|
|
.secret-editor-skeleton-wrapper {
|
|
// using ui-gray directly so it does not change when
|
|
// user is in dark mode since the secret editor
|
|
// does not change theme colors between light and dark
|
|
color: var(--token-color-palette-neutral-300);
|
|
display: flex;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.secret-editor-skeleton-gutter {
|
|
background: var(--secret-editor-gutter);
|
|
border-radius: sizing.rems(xxs) 0 0 sizing.rems(xxs);
|
|
width: sizing.rems(xxl) + sizing.rems(xxs); // 52
|
|
}
|
|
|
|
.secret-editor-skeleton-body {
|
|
width: 100%;
|
|
|
|
// skeleton text rows for detail and edit views
|
|
// applies general styles to child div of skeleton-body
|
|
// then adds dynamic width to each child
|
|
// depending on the class (e.g., s, m, l)
|
|
> div {
|
|
background: var(--secret-editor-gutter);
|
|
border-radius: sizing.rems(m);
|
|
height: sizing.rems(xs);
|
|
margin: sizing.rems(s) - sizing.rems(xxxxs); // 11
|
|
|
|
&:first-child {
|
|
margin-top: sizing.rems(m);
|
|
}
|
|
|
|
&.s {
|
|
width: 5%;
|
|
}
|
|
|
|
&.m {
|
|
width: 10%;
|
|
}
|
|
|
|
&.l {
|
|
width: 15%;
|
|
}
|
|
|
|
&.xl {
|
|
width: 20%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.secret-editor-skeleton-message {
|
|
font-size: sizing.rems(s) + sizing.rems(xxxs); // 14
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: sizing.rems(xxxs);
|
|
|
|
// centers message with editor body and gutter
|
|
transform: translate(-50%, -50%);
|
|
z-index: 1;
|
|
}
|
|
|
|
.secret-editor-skeleton-button {
|
|
@media (prefers-color-scheme: light) {
|
|
.ember-application:not(.rose-theme-dark) & {
|
|
background: var(--token-color-palette-neutral-600);
|
|
color: var(--token-color-palette-neutral-50);
|
|
border-color: var(--token-color-palette-neutral-50);
|
|
}
|
|
}
|
|
|
|
.ember-application.rose-theme-light & {
|
|
background: var(--token-color-palette-neutral-600);
|
|
color: var(--token-color-palette-neutral-50);
|
|
border-color: var(--token-color-palette-neutral-50);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ordered-series-diagram {
|
|
--group-title-line-height: 2.25rem;
|
|
|
|
width: 100%;
|
|
display: flex;
|
|
margin-bottom: 1rem;
|
|
|
|
&-item {
|
|
display: flex;
|
|
margin-top: var(--group-title-line-height);
|
|
|
|
&-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
&-title {
|
|
margin-top: 0.5rem;
|
|
width: 4rem;
|
|
}
|
|
|
|
&:last-child {
|
|
> .ordered-series-diagram-separator-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-group {
|
|
&-content {
|
|
border-radius: 0.5rem;
|
|
padding: 0 0.75rem 0.75rem;
|
|
}
|
|
|
|
&-items {
|
|
display: flex;
|
|
|
|
& .ordered-series-diagram-item {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
&-title {
|
|
font-size: var(--token-typography-display-100-font-size);
|
|
line-height: var(--group-title-line-height);
|
|
text-align: center;
|
|
}
|
|
|
|
&:last-child {
|
|
> .ordered-series-diagram-separator-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-separator-icon {
|
|
color: var(--token-color-foreground-faint);
|
|
margin: 0.75rem 0.5rem;
|
|
}
|
|
}
|
|
|
|
// target worker filters
|
|
.target-workers {
|
|
.accordion-item-toggle-content {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.rose-form-actions {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.worker-diagram {
|
|
min-height: 15rem;
|
|
margin-top: 1rem;
|
|
|
|
.ordered-series-diagram {
|
|
min-height: 10rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.enable-session-recording-toggle {
|
|
width: 50%;
|
|
margin-top: 1.5rem;
|
|
|
|
.hds-form-field--layout-vertical,
|
|
.hds-link-standalone {
|
|
margin-left: 2.5rem;
|
|
}
|
|
|
|
.hds-link-standalone {
|
|
margin-top: 0.75rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
}
|
|
|
|
// target sidebar
|
|
.target-sidebar {
|
|
.hds-link-standalone {
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
|
|
.target-sidebar-aliases {
|
|
margin-bottom: 3rem;
|
|
|
|
.hds-link-standalone {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.link-list-item:first-of-type {
|
|
width: 90%;
|
|
}
|
|
|
|
.link-list-item {
|
|
margin-bottom: 0.5rem;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* stylelint-disable selector-class-pattern */
|
|
.hds-card__container > ul {
|
|
display: flex;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.hds-link-standalone__text {
|
|
margin: 1rem 0;
|
|
}
|
|
/* stylelint-enable selector-class-pattern */
|
|
|
|
.hds-dropdown .hds-dropdown-toggle-icon {
|
|
color: var(--stark);
|
|
}
|
|
}
|
|
|
|
.link-list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
align-items: center;
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
&__info {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
margin-left: 0.25rem;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
&__text {
|
|
color: var(--token-color-foreground-primary);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.hds-icon-arrow-right {
|
|
color: var(--token-color-foreground-faint);
|
|
}
|
|
}
|
|
|
|
.list-wrapper-field {
|
|
border: 0;
|
|
|
|
/* stylelint-disable selector-class-pattern */
|
|
.hds-table__thead {
|
|
.hds-table__th {
|
|
height: auto;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
.hds-table__thead,
|
|
.hds-table__tbody {
|
|
.hds-table__tr {
|
|
// Remove background color on all cells (especially header cells)
|
|
background-color: transparent;
|
|
}
|
|
|
|
.hds-table__th,
|
|
.hds-table__td {
|
|
// Remove table borders from cells.
|
|
border: none;
|
|
padding: 0.75rem 1rem;
|
|
|
|
// Rely on right padding for cell spacing...
|
|
padding-left: 0;
|
|
|
|
&:last-child {
|
|
// ...except in the last cell, which doesn't need right padding
|
|
padding-right: 0;
|
|
|
|
// Shrink last cell to minimum possible width
|
|
width: 1%;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
/* stylelint-enable selector-class-pattern */
|
|
}
|
|
|
|
.auth-methods-list-alert {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.auth-methods-list-table,
|
|
.sessions-list-table {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
// secret input field
|
|
.secret-input {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
column-gap: 0.5rem;
|
|
position: relative;
|
|
|
|
.overlay {
|
|
width: 60%;
|
|
height: 1rem;
|
|
position: absolute;
|
|
bottom: 2.15rem;
|
|
left: 0.5rem;
|
|
border-radius: 0.25rem;
|
|
z-index: 1;
|
|
background-color: var(--token-color-palette-neutral-200);
|
|
}
|
|
|
|
.hds-button {
|
|
margin-bottom: 1.5rem;
|
|
flex-basis: 6rem;
|
|
}
|
|
}
|
|
|
|
// session recording player
|
|
.session-recording-player {
|
|
--player-background-color: #252937;
|
|
--player-divider: #656a761a;
|
|
--player-white: #fff;
|
|
--player-control-bar-buffer: #656a76;
|
|
--player-play-button: #1060ff;
|
|
--player-play-button-border: #0c56e9;
|
|
|
|
background-color: var(--player-background-color);
|
|
border-radius: 0.75rem;
|
|
|
|
&-header {
|
|
border-bottom: var(--player-divider) 0.125rem solid;
|
|
|
|
// override of button styles to allow for
|
|
// static colors in light and dark mode
|
|
a {
|
|
color: var(--player-white);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.hds-button--color-tertiary:hover,
|
|
.hds-button--color-tertiary:active {
|
|
color: var(--player-white);
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
&-loading {
|
|
color: var(--token-color-palette-neutral-400);
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 75vh;
|
|
}
|
|
|
|
&-theme {
|
|
.asciinema-theme-asciinema {
|
|
background-color: var(--player-background-color);
|
|
}
|
|
|
|
// hides large play icon overlay
|
|
.ap-overlay {
|
|
display: none;
|
|
}
|
|
|
|
pre.ap-terminal {
|
|
background-color: var(--player-background-color);
|
|
border-color: var(--player-background-color);
|
|
}
|
|
|
|
.ap-wrapper {
|
|
.ap-player {
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
&.ap-hud .ap-control-bar {
|
|
bottom: 0;
|
|
}
|
|
|
|
.ap-control-bar {
|
|
bottom: -3.625rem;
|
|
background: var(--player-background-color);
|
|
border-top: var(--player-divider) 0.125rem solid;
|
|
height: 3.625rem;
|
|
|
|
.ap-playback-button {
|
|
background: var(--player-play-button);
|
|
border: var(--player-play-button-border) 0.063rem solid;
|
|
border-radius: 0.313rem;
|
|
margin: 0.75rem;
|
|
padding: 0.625rem 1rem;
|
|
|
|
.ap-icon path {
|
|
fill: var(--player-white);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ap-timer {
|
|
font-family: var(--token-typography-body-base-font-family);
|
|
font-size: var(--token-typography-body-base-font-size);
|
|
line-height: var(--token-typography-body-base-line-height);
|
|
color: var(--player-white);
|
|
position: relative;
|
|
top: 40%;
|
|
}
|
|
|
|
.ap-progressbar {
|
|
padding-top: 0.875rem;
|
|
|
|
.ap-bar .ap-gutter {
|
|
background-color: var(--player-control-bar-buffer);
|
|
|
|
span {
|
|
background-color: var(--player-white);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ap-fullscreen-button {
|
|
padding-top: 1.5rem;
|
|
|
|
.ap-icon path {
|
|
fill: var(--player-white);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Session Recording sidebar details
|
|
.rose-layout-body-content-sidebar .section-details {
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.ldap-read-only-fields .hds-form-field--layout-vertical {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
// Session recording - List
|
|
.session-recording-list-cell-item,
|
|
.aliases-list-cell-item {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
|
|
span {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.session-recording-list-cell-item.target-column {
|
|
flex-direction: column;
|
|
|
|
span {
|
|
gap: 0.5rem;
|
|
}
|
|
}
|
|
|
|
// Channels by Connection
|
|
.channels-by-connection {
|
|
&-connection-header {
|
|
padding: 0.875rem 1rem;
|
|
}
|
|
|
|
.no-channels-message {
|
|
padding: 0 1rem;
|
|
}
|
|
}
|
|
|
|
// Channel
|
|
.channel-header {
|
|
margin-bottom: 1rem;
|
|
|
|
h2 {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// Session Recording Status
|
|
// overwrites recording badge icon to red
|
|
.session-recording-status-badge {
|
|
/* stylelint-disable selector-class-pattern */
|
|
div.hds-badge__icon {
|
|
svg.hds-icon-circle-dot {
|
|
color: var(--token-color-palette-red-200);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ldap form sections
|
|
.ldap-section {
|
|
margin-top: 4rem;
|
|
|
|
.hds-form-helper-text {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.alias-deletion-modal {
|
|
.hds-button-set {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
// storage policies
|
|
.policy {
|
|
margin-bottom: 0;
|
|
|
|
.hds-form-field--layout-vertical {
|
|
width: 50%;
|
|
}
|
|
|
|
.hds-form-group__control-fields-wrapper {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
.policy-custom-input {
|
|
.hds-form-field__control {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.hds-segmented-group {
|
|
width: 45%;
|
|
}
|
|
|
|
.hds-form-field--layout-flag {
|
|
width: 40%;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.hds-badge {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-color: var(--ui-gray-subtler-1);
|
|
border-left: 0;
|
|
|
|
&.disabled {
|
|
color: var(--token-form-control-disabled-foreground-color);
|
|
border-color: var(--token-form-control-disabled-border-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
// policy sidebar
|
|
|
|
.policy-sidebar {
|
|
background-color: var(--token-form-control-disabled-surface-color);
|
|
padding: 1.5rem 1rem 0.7rem;
|
|
width: 300px;
|
|
|
|
.hds-card__container > ul {
|
|
display: flex;
|
|
}
|
|
|
|
.description {
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.hds-link-standalone__text {
|
|
margin: 1rem 0;
|
|
}
|
|
}
|
|
|
|
// add storage policy
|
|
|
|
.select-policy {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.add-policy-link {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
// generic loading indicator
|
|
.loading-indicator {
|
|
margin-top: 20%;
|
|
}
|
|
|
|
// Roles
|
|
.role-grant-scopes {
|
|
.hds-application-state {
|
|
margin-top: 3rem;
|
|
}
|
|
}
|
|
|
|
.role-manage-scopes-form {
|
|
.manage-custom-scopes-helper-text {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.hds-alert {
|
|
margin-bottom: 2rem;
|
|
}
|
|
}
|
|
|
|
.role-manage-custom-scopes-form {
|
|
.filters-applied {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.table-selected-items-text {
|
|
display: flex;
|
|
justify-content: end;
|
|
height: 1rem;
|
|
}
|
|
|
|
.hds-table {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.hds-pagination {
|
|
margin-bottom: 2rem;
|
|
}
|
|
}
|
|
|
|
// workers
|
|
.workers {
|
|
> div {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.tags-list {
|
|
display: flex;
|
|
|
|
.toolbar-refresher {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.grouping {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.2rem;
|
|
padding: 0.5rem 1rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
li:has(.indentation) {
|
|
padding-left: 2.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.view-more-tags {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.tag-shortener {
|
|
display: inline-block;
|
|
max-width: 310px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.worker-tags {
|
|
.modal-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.credential-selection {
|
|
.hds-form-group__control-field {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.change-state {
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
// worker filter generator
|
|
.filter-generator-selection {
|
|
.hds-form-group__control-field {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.formatted-results {
|
|
p {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.generated-results-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 0.5rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
// worker filter generator layout in form
|
|
.worker-filter-generator-form-layout {
|
|
.hds-form-field--layout-flag {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// scope picker
|
|
.scope-picker {
|
|
&__toggle-button {
|
|
width: 100%;
|
|
}
|
|
|
|
li:has(.indentation),
|
|
li.indentation {
|
|
margin-left: 1.5rem;
|
|
}
|
|
}
|
|
|
|
// dropdown checkbox list
|
|
.dropdown-checkbox-list {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
// target
|
|
.injected-app-credential-alert {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
// User menu dropdown in global side nav
|
|
.user-menu-dropdown {
|
|
max-width: 125px;
|
|
|
|
&__toggle-button {
|
|
width: 100%;
|
|
|
|
.hds-dropdown-toggle-button__text {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|