4c278803cd
…38650)"
This reverts commit e1b3b0df00.
## Description
> [!TIP]
> _Add a TL;DR when the description is longer than 500 words or
extremely technical (helps the content, marketing, and DevRel team)._
>
> _Please also include relevant motivation and context. List any
dependencies that are required for this change. Add links to Notion,
Figma or any other documents that might be relevant to the PR._
Fixes #`Issue Number`
_or_
Fixes `Issue URL`
> [!WARNING]
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._
## Automation
/ok-to-test tags="@tag.All"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/13106069580>
> Commit: 7f7dcd2f14650de40864e2d80f02a1528d7562bc
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13106069580&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Mon, 03 Feb 2025 05:27:48 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Style Updates**
- Enhanced focus visibility across multiple design system components.
- Updated focus styles to use `outline` with `!important` flag.
- Improved focus ring and outline handling for better accessibility.
- **Design System Refinements**
- Modified focus handling in buttons, inputs, links, and other
interactive elements.
- Standardized focus state styling across components.
- Introduced more consistent visual feedback for keyboard navigation.
- **CSS Improvements**
- Removed outline-disabling styles from global CSS.
- Added more precise focus indication mechanisms.
- Adjusted padding and outline properties for various components.
- Simplified styling and structure of the `PropertyPaneSearchInput`
component.
- Introduced new focus styles for the select component to enhance visual
distinction.
- Enhanced the focus state for the `ColorPickerComponent` and
`IconSelectControl` components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
233 lines
4.6 KiB
CSS
Executable File
233 lines
4.6 KiB
CSS
Executable File
@import "~normalize.css";
|
|
@import "~@blueprintjs/core/lib/css/blueprint.css";
|
|
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
|
|
@import "theme/colors.css";
|
|
@import "theme/defaultTheme.css";
|
|
@import "theme/wds.css";
|
|
@import "assets/fonts/custom/index.css";
|
|
|
|
:root {
|
|
/* TODO: This needs to be fixed! This override is to maintain branding changes. */
|
|
--ads-color-background-secondary: var(--ads-v2-color-bg-subtle);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #fff !important;
|
|
color: var(--ads-v2-color-fg);
|
|
}
|
|
|
|
body.dragging * {
|
|
cursor: grabbing !important;
|
|
}
|
|
|
|
#root.overlay {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
code {
|
|
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
|
monospace;
|
|
}
|
|
|
|
div.bp3-select-popover .bp3-popover-content {
|
|
padding: 0;
|
|
}
|
|
|
|
span.bp3-popover-target {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
span.bp3-popover-target > * {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.bp3-popover,
|
|
.bp3-popover2 {
|
|
box-shadow: var(--ads-v2-shadow-popovers) !important;
|
|
}
|
|
|
|
.bp3-popover2-content {
|
|
border-radius: var(--ads-v2-border-radius) !important;
|
|
}
|
|
|
|
.action-selector-popup {
|
|
background-color: var(--ads-v2-color-bg);
|
|
border-radius: var(--ads-v2-border-radius) !important;
|
|
border: 1px solid var(--ads-v2-color-border-muted) !important;
|
|
}
|
|
|
|
.action-selector-popup span.bp3-popover-target > * {
|
|
max-width: 100%;
|
|
}
|
|
|
|
add-action.disabled span {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.action-selector-popup .bp3-button-text {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
}
|
|
|
|
/**
|
|
action selector block styles
|
|
**/
|
|
.bp3-submenu.bp3-popover > .bp3-popover-content {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.action-card-border {
|
|
border-color: var(--ads-v2-color-border);
|
|
}
|
|
|
|
.action-card-next-selected {
|
|
border-bottom: 1px solid var(--ads-v2-color-border-emphasis-plus);
|
|
}
|
|
|
|
.action-card-border-selected {
|
|
border-color: var(--ads-v2-color-border-emphasis-plus) !important;
|
|
}
|
|
|
|
.action-card-last-block {
|
|
border-radius: 0px 0px var(--ads-v2-border-radius) var(--ads-v2-border-radius);
|
|
}
|
|
|
|
.main-block-radius {
|
|
border-radius: var(--ads-v2-border-radius);
|
|
}
|
|
|
|
.main-block-radius-selected {
|
|
border-radius: var(--ads-v2-border-radius) var(--ads-v2-border-radius) 0px 0px;
|
|
}
|
|
|
|
.bp3-popover.bp3-minimal.bp3-submenu {
|
|
padding-right: 0px;
|
|
}
|
|
|
|
div.bp3-popover-arrow {
|
|
display: none;
|
|
}
|
|
|
|
.bp3-button.bp3-loading {
|
|
cursor: default !important;
|
|
}
|
|
|
|
.display-none {
|
|
display: none;
|
|
}
|
|
|
|
.t--editor-appname-menu-portal {
|
|
z-index: 9 !important;
|
|
}
|
|
|
|
.bp3-popover .bp3-input {
|
|
outline: 0;
|
|
box-shadow: none;
|
|
border: 1px solid var(--ads-v2-color-border);
|
|
border-radius: var(--ads-v2-border-radius) !important;
|
|
}
|
|
|
|
.bp3-popover .bp3-input:focus {
|
|
border-color: var(--ads-v2-color-border-emphasis);
|
|
outline: 0;
|
|
}
|
|
|
|
.bp3-popover.bp3-minimal {
|
|
margin-top: 8px !important;
|
|
}
|
|
|
|
.bp3-popover.bp3-minimal.action-selector-dropdown {
|
|
margin-top: 0px !important;
|
|
}
|
|
|
|
.layout-control.bp3-popover.bp3-minimal {
|
|
margin-top: 8px !important;
|
|
}
|
|
|
|
.bp3-popover.none-shadow-popover {
|
|
box-shadow: none;
|
|
border: 0px;
|
|
}
|
|
|
|
.bp3-datepicker {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* making both the Modal layer and the Dropdown layer */
|
|
.bp3-modal-widget,
|
|
.appsmith_widget_0 > .bp3-portal {
|
|
z-index: 2 !important;
|
|
}
|
|
|
|
/* Portals on the Modal widget */
|
|
.bp3-modal-widget .bp3-portal {
|
|
z-index: 21 !important;
|
|
}
|
|
|
|
.bp3-popover2-content {
|
|
background-color: var(--ads-v2-color-bg) !important;
|
|
border-radius: var(--ads-v2-border-radius) !important;
|
|
}
|
|
|
|
.bp3-overlay-backdrop {
|
|
background-color: rgba(16, 22, 26, 0.7) !important;
|
|
}
|
|
|
|
.bp3-overlay-zindex {
|
|
z-index: 20 !important;
|
|
}
|
|
|
|
/** color picker input control */
|
|
.color-picker-input,
|
|
.color-picker-input > .bp3-popover-content {
|
|
border-radius: var(--ads-v2-border-radius) !important;
|
|
}
|
|
|
|
.color-picker-input {
|
|
box-shadow: var(--ads-v2-shadow-popovers) !important;
|
|
}
|
|
|
|
.icon-select-popover,
|
|
.icon-select-popover > .bp3-popover-content {
|
|
border-radius: var(--ads-v2-border-radius) !important;
|
|
}
|
|
|
|
.icon-select-popover {
|
|
box-shadow: var(--ads-v2-shadow-popovers) !important;
|
|
}
|
|
|
|
.error-menuitem {
|
|
color: var(--ads-v2-color-fg-error) !important;
|
|
}
|
|
|
|
.error-menuitem > .ads-v2-menu__menu-item-children {
|
|
color: var(--ads-v2-color-fg-error) !important;
|
|
}
|
|
|
|
.error-menuitem:hover:not([data-disabled]),
|
|
.error-menuitem:focus-visible {
|
|
background-color: var(--ads-v2-color-red-50) !important;
|
|
}
|
|
|
|
.error-menuitem:active:not([data-disabled]) {
|
|
background-color: var(--ads-v2-color-red-100) !important;
|
|
}
|
|
|
|
.menuitem-nohover:hover {
|
|
background-color: transparent !important;
|
|
cursor: default !important;
|
|
}
|
|
|
|
.react-datepicker__children-container {
|
|
margin-top: -10px !important;
|
|
}
|
|
|
|
.reconnect-datasource-modal {
|
|
z-index: 9 !important;
|
|
}
|