luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity
open-consul/ui/packages/consul-ui/app/components/form-elements/skin.scss

36 lines
969 B
SCSS
Raw Normal View History

ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495) This includes an update of our CSS npm module. The majority of this is just moving files from one folder to another. 1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs 2. %checkbox-group: Moved 3. %radio-group: Moved 4. %sliding-toggle: Moved (used to be called just %toggle) 5. %form-elements: Moved and added a new %inline-alert for form field messaging (see Structure design system) 6. %action-group is now a composition of %menu-panel, %toggle-button, plus edits to existing style to bring the %action-groups inline with the dropdowns from Structure). %action-group also includes a composed %confirmation-alert that is yet to be include. This will be compiled out until we integrate it. We've also removed some of our old icon placeholders as the above work seased to use some of them. Now we done this I'd say all in all over half of our CSS components now use the CSS npm module. The CSS specific to Consul UI also uses much of this CSS module by way of helper placeholders such as our %frames.
2019-11-25 17:43:25 +00:00
%form-element-text-input {
-moz-appearance: none;
-webkit-appearance: none;
ui: Replaces almost all remaining instances of SASS variables with CSS (#11200) From an engineers perspective, whenever specifying colors from now on we should use the form: ``` color: rgb(var(--tone-red-500)); ``` Please note: - Use rgb. This lets us do this like rgb(var(--tone-red-500) / 10%) so we can use a 10% opacity red-500 if we ever need to whilst still making use of our color tokens. - Use --tone-colorName-000 (so the prefix tone). Previously we could use a mix of --gray-500: $gray-500 (note the left hand CSS prop and right hand SASS var) for the things we need to theme currently. As we no longer use SASS we can't do --gray-500: --gray-500, so we now do --tone-gray-500: --gray-500. Just for clarity after that, whenever specifying a color anywhere, use rgb and --tone. There is only one reason where you might not use tone, and that is if you never want a color to be affected by a theme (for example a background shadow probably always should use --black) There are a 2 or 3 left for the code editor, plus our custom-query values
2021-10-07 18:21:11 +00:00
box-shadow: inset var(--decor-elevation-100);
border-radius: var(--decor-radius-100);
border: var(--decor-border-100);
ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495) This includes an update of our CSS npm module. The majority of this is just moving files from one folder to another. 1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs 2. %checkbox-group: Moved 3. %radio-group: Moved 4. %sliding-toggle: Moved (used to be called just %toggle) 5. %form-elements: Moved and added a new %inline-alert for form field messaging (see Structure design system) 6. %action-group is now a composition of %menu-panel, %toggle-button, plus edits to existing style to bring the %action-groups inline with the dropdowns from Structure). %action-group also includes a composed %confirmation-alert that is yet to be include. This will be compiled out until we integrate it. We've also removed some of our old icon placeholders as the above work seased to use some of them. Now we done this I'd say all in all over half of our CSS components now use the CSS npm module. The CSS specific to Consul UI also uses much of this CSS module by way of helper placeholders such as our %frames.
2019-11-25 17:43:25 +00:00
outline: none;
}
ui: Restrict the viewing/editing of certain UI elements based on the users ACLs (#9687) This commit use the internal authorize endpoint along wiht ember-can to further restrict user access to certain UI features and navigational elements depending on the users ACL token
2021-02-19 16:42:16 +00:00
textarea:disabled + .CodeMirror,
%form-element-text-input:disabled,
%form-element-text-input:read-only {
cursor: not-allowed;
}
UI: Improved Login/Logout flow inc SSO support (#7790) * 6 new components for new login/logout flow, plus SSO support UI Components: 1. AuthDialog: Wraps/orchestrates AuthForm and AuthProfile 2. AuthForm: Authorization form shown when logged out. 3. AuthProfile: Simple presentational component to show the users 'Profile' 4. OidcSelect: A 'select' component for selecting an OIDC provider, dynamically uses either a single select menu or multiple buttons depending on the amount of providers Data Components: 1. JwtSource: Given an OIDC provider URL this component will request a token from the provider and fire an donchange event when it has been retrieved. Used by TokenSource. 2. TokenSource: Given a oidc provider name or a Consul SecretID, TokenSource will use whichever method/API requests required to retrieve Consul ACL Token, which is emitted to the onchange event handler. Very basic README documentation included here, which is likely to be refined somewhat. * CSS required for new auth/SSO UI components * Remaining app code required to tie the new auth/SSO work together * CSS code required to help tie the auth/SSO work together * Test code in order to get current tests passing with new auth/SSO flow ..plus extremely basics/skipped rendering tests for the new components * Treat the secret received from the server as the truth Previously we've always treated what the user typed as the truth, this breaks down when using SSO as the user doesn't type anything to retrieve a token. Therefore we change this so that we use the secret in the API response as the truth. * Make sure removing an dom tree from a buffer only removes its own tree
2020-05-11 15:37:11 +00:00
%form fieldset > p,
%form-element-note,
ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495) This includes an update of our CSS npm module. The majority of this is just moving files from one folder to another. 1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs 2. %checkbox-group: Moved 3. %radio-group: Moved 4. %sliding-toggle: Moved (used to be called just %toggle) 5. %form-elements: Moved and added a new %inline-alert for form field messaging (see Structure design system) 6. %action-group is now a composition of %menu-panel, %toggle-button, plus edits to existing style to bring the %action-groups inline with the dropdowns from Structure). %action-group also includes a composed %confirmation-alert that is yet to be include. This will be compiled out until we integrate it. We've also removed some of our old icon placeholders as the above work seased to use some of them. Now we done this I'd say all in all over half of our CSS components now use the CSS npm module. The CSS specific to Consul UI also uses much of this CSS module by way of helper placeholders such as our %frames.
2019-11-25 17:43:25 +00:00
%form-element-text-input::placeholder {
ui: Replaces almost all remaining instances of SASS variables with CSS (#11200) From an engineers perspective, whenever specifying colors from now on we should use the form: ``` color: rgb(var(--tone-red-500)); ``` Please note: - Use rgb. This lets us do this like rgb(var(--tone-red-500) / 10%) so we can use a 10% opacity red-500 if we ever need to whilst still making use of our color tokens. - Use --tone-colorName-000 (so the prefix tone). Previously we could use a mix of --gray-500: $gray-500 (note the left hand CSS prop and right hand SASS var) for the things we need to theme currently. As we no longer use SASS we can't do --gray-500: --gray-500, so we now do --tone-gray-500: --gray-500. Just for clarity after that, whenever specifying a color anywhere, use rgb and --tone. There is only one reason where you might not use tone, and that is if you never want a color to be affected by a theme (for example a background shadow probably always should use --black) There are a 2 or 3 left for the code editor, plus our custom-query values
2021-10-07 18:21:11 +00:00
color: rgb(var(--tone-gray-400));
ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495) This includes an update of our CSS npm module. The majority of this is just moving files from one folder to another. 1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs 2. %checkbox-group: Moved 3. %radio-group: Moved 4. %sliding-toggle: Moved (used to be called just %toggle) 5. %form-elements: Moved and added a new %inline-alert for form field messaging (see Structure design system) 6. %action-group is now a composition of %menu-panel, %toggle-button, plus edits to existing style to bring the %action-groups inline with the dropdowns from Structure). %action-group also includes a composed %confirmation-alert that is yet to be include. This will be compiled out until we integrate it. We've also removed some of our old icon placeholders as the above work seased to use some of them. Now we done this I'd say all in all over half of our CSS components now use the CSS npm module. The CSS specific to Consul UI also uses much of this CSS module by way of helper placeholders such as our %frames.
2019-11-25 17:43:25 +00:00
}
%form-element-error > input,
%form-element-error > textarea {
ui: Replaces almost all remaining instances of SASS variables with CSS (#11200) From an engineers perspective, whenever specifying colors from now on we should use the form: ``` color: rgb(var(--tone-red-500)); ``` Please note: - Use rgb. This lets us do this like rgb(var(--tone-red-500) / 10%) so we can use a 10% opacity red-500 if we ever need to whilst still making use of our color tokens. - Use --tone-colorName-000 (so the prefix tone). Previously we could use a mix of --gray-500: $gray-500 (note the left hand CSS prop and right hand SASS var) for the things we need to theme currently. As we no longer use SASS we can't do --gray-500: --gray-500, so we now do --tone-gray-500: --gray-500. Just for clarity after that, whenever specifying a color anywhere, use rgb and --tone. There is only one reason where you might not use tone, and that is if you never want a color to be affected by a theme (for example a background shadow probably always should use --black) There are a 2 or 3 left for the code editor, plus our custom-query values
2021-10-07 18:21:11 +00:00
border-color: var(--decor-error-500, rgb(var(--tone-red-500))) !important;
ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495) This includes an update of our CSS npm module. The majority of this is just moving files from one folder to another. 1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs 2. %checkbox-group: Moved 3. %radio-group: Moved 4. %sliding-toggle: Moved (used to be called just %toggle) 5. %form-elements: Moved and added a new %inline-alert for form field messaging (see Structure design system) 6. %action-group is now a composition of %menu-panel, %toggle-button, plus edits to existing style to bring the %action-groups inline with the dropdowns from Structure). %action-group also includes a composed %confirmation-alert that is yet to be include. This will be compiled out until we integrate it. We've also removed some of our old icon placeholders as the above work seased to use some of them. Now we done this I'd say all in all over half of our CSS components now use the CSS npm module. The CSS specific to Consul UI also uses much of this CSS module by way of helper placeholders such as our %frames.
2019-11-25 17:43:25 +00:00
}
%form-element-text-input {
ui: Replaces almost all remaining instances of SASS variables with CSS (#11200) From an engineers perspective, whenever specifying colors from now on we should use the form: ``` color: rgb(var(--tone-red-500)); ``` Please note: - Use rgb. This lets us do this like rgb(var(--tone-red-500) / 10%) so we can use a 10% opacity red-500 if we ever need to whilst still making use of our color tokens. - Use --tone-colorName-000 (so the prefix tone). Previously we could use a mix of --gray-500: $gray-500 (note the left hand CSS prop and right hand SASS var) for the things we need to theme currently. As we no longer use SASS we can't do --gray-500: --gray-500, so we now do --tone-gray-500: --gray-500. Just for clarity after that, whenever specifying a color anywhere, use rgb and --tone. There is only one reason where you might not use tone, and that is if you never want a color to be affected by a theme (for example a background shadow probably always should use --black) There are a 2 or 3 left for the code editor, plus our custom-query values
2021-10-07 18:21:11 +00:00
color: rgb(var(--tone-gray-500));
border-color: rgb(var(--tone-gray-300));
ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495) This includes an update of our CSS npm module. The majority of this is just moving files from one folder to another. 1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs 2. %checkbox-group: Moved 3. %radio-group: Moved 4. %sliding-toggle: Moved (used to be called just %toggle) 5. %form-elements: Moved and added a new %inline-alert for form field messaging (see Structure design system) 6. %action-group is now a composition of %menu-panel, %toggle-button, plus edits to existing style to bring the %action-groups inline with the dropdowns from Structure). %action-group also includes a composed %confirmation-alert that is yet to be include. This will be compiled out until we integrate it. We've also removed some of our old icon placeholders as the above work seased to use some of them. Now we done this I'd say all in all over half of our CSS components now use the CSS npm module. The CSS specific to Consul UI also uses much of this CSS module by way of helper placeholders such as our %frames.
2019-11-25 17:43:25 +00:00
}
%form-element-text-input-hover {
ui: Replaces almost all remaining instances of SASS variables with CSS (#11200) From an engineers perspective, whenever specifying colors from now on we should use the form: ``` color: rgb(var(--tone-red-500)); ``` Please note: - Use rgb. This lets us do this like rgb(var(--tone-red-500) / 10%) so we can use a 10% opacity red-500 if we ever need to whilst still making use of our color tokens. - Use --tone-colorName-000 (so the prefix tone). Previously we could use a mix of --gray-500: $gray-500 (note the left hand CSS prop and right hand SASS var) for the things we need to theme currently. As we no longer use SASS we can't do --gray-500: --gray-500, so we now do --tone-gray-500: --gray-500. Just for clarity after that, whenever specifying a color anywhere, use rgb and --tone. There is only one reason where you might not use tone, and that is if you never want a color to be affected by a theme (for example a background shadow probably always should use --black) There are a 2 or 3 left for the code editor, plus our custom-query values
2021-10-07 18:21:11 +00:00
border-color: rgb(var(--tone-gray-500));
ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495) This includes an update of our CSS npm module. The majority of this is just moving files from one folder to another. 1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs 2. %checkbox-group: Moved 3. %radio-group: Moved 4. %sliding-toggle: Moved (used to be called just %toggle) 5. %form-elements: Moved and added a new %inline-alert for form field messaging (see Structure design system) 6. %action-group is now a composition of %menu-panel, %toggle-button, plus edits to existing style to bring the %action-groups inline with the dropdowns from Structure). %action-group also includes a composed %confirmation-alert that is yet to be include. This will be compiled out until we integrate it. We've also removed some of our old icon placeholders as the above work seased to use some of them. Now we done this I'd say all in all over half of our CSS components now use the CSS npm module. The CSS specific to Consul UI also uses much of this CSS module by way of helper placeholders such as our %frames.
2019-11-25 17:43:25 +00:00
}
%form-element-text-input-focus {
ui: Replaces almost all remaining instances of SASS variables with CSS (#11200) From an engineers perspective, whenever specifying colors from now on we should use the form: ``` color: rgb(var(--tone-red-500)); ``` Please note: - Use rgb. This lets us do this like rgb(var(--tone-red-500) / 10%) so we can use a 10% opacity red-500 if we ever need to whilst still making use of our color tokens. - Use --tone-colorName-000 (so the prefix tone). Previously we could use a mix of --gray-500: $gray-500 (note the left hand CSS prop and right hand SASS var) for the things we need to theme currently. As we no longer use SASS we can't do --gray-500: --gray-500, so we now do --tone-gray-500: --gray-500. Just for clarity after that, whenever specifying a color anywhere, use rgb and --tone. There is only one reason where you might not use tone, and that is if you never want a color to be affected by a theme (for example a background shadow probably always should use --black) There are a 2 or 3 left for the code editor, plus our custom-query values
2021-10-07 18:21:11 +00:00
border-color: var(--typo-action-500, rgb(var(--tone-blue-500)));
ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495) This includes an update of our CSS npm module. The majority of this is just moving files from one folder to another. 1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs 2. %checkbox-group: Moved 3. %radio-group: Moved 4. %sliding-toggle: Moved (used to be called just %toggle) 5. %form-elements: Moved and added a new %inline-alert for form field messaging (see Structure design system) 6. %action-group is now a composition of %menu-panel, %toggle-button, plus edits to existing style to bring the %action-groups inline with the dropdowns from Structure). %action-group also includes a composed %confirmation-alert that is yet to be include. This will be compiled out until we integrate it. We've also removed some of our old icon placeholders as the above work seased to use some of them. Now we done this I'd say all in all over half of our CSS components now use the CSS npm module. The CSS specific to Consul UI also uses much of this CSS module by way of helper placeholders such as our %frames.
2019-11-25 17:43:25 +00:00
}
%form-element-label {
UI: Improved Login/Logout flow inc SSO support (#7790) * 6 new components for new login/logout flow, plus SSO support UI Components: 1. AuthDialog: Wraps/orchestrates AuthForm and AuthProfile 2. AuthForm: Authorization form shown when logged out. 3. AuthProfile: Simple presentational component to show the users 'Profile' 4. OidcSelect: A 'select' component for selecting an OIDC provider, dynamically uses either a single select menu or multiple buttons depending on the amount of providers Data Components: 1. JwtSource: Given an OIDC provider URL this component will request a token from the provider and fire an donchange event when it has been retrieved. Used by TokenSource. 2. TokenSource: Given a oidc provider name or a Consul SecretID, TokenSource will use whichever method/API requests required to retrieve Consul ACL Token, which is emitted to the onchange event handler. Very basic README documentation included here, which is likely to be refined somewhat. * CSS required for new auth/SSO UI components * Remaining app code required to tie the new auth/SSO work together * CSS code required to help tie the auth/SSO work together * Test code in order to get current tests passing with new auth/SSO flow ..plus extremely basics/skipped rendering tests for the new components * Treat the secret received from the server as the truth Previously we've always treated what the user typed as the truth, this breaks down when using SSO as the user doesn't type anything to retrieve a token. Therefore we change this so that we use the secret in the API response as the truth. * Make sure removing an dom tree from a buffer only removes its own tree
2020-05-11 15:37:11 +00:00
color: var(--typo-contrast-999, inherit);
ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495) This includes an update of our CSS npm module. The majority of this is just moving files from one folder to another. 1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs 2. %checkbox-group: Moved 3. %radio-group: Moved 4. %sliding-toggle: Moved (used to be called just %toggle) 5. %form-elements: Moved and added a new %inline-alert for form field messaging (see Structure design system) 6. %action-group is now a composition of %menu-panel, %toggle-button, plus edits to existing style to bring the %action-groups inline with the dropdowns from Structure). %action-group also includes a composed %confirmation-alert that is yet to be include. This will be compiled out until we integrate it. We've also removed some of our old icon placeholders as the above work seased to use some of them. Now we done this I'd say all in all over half of our CSS components now use the CSS npm module. The CSS specific to Consul UI also uses much of this CSS module by way of helper placeholders such as our %frames.
2019-11-25 17:43:25 +00:00
}