diff --git a/frontend/.claude/commands/visual-regression.md b/frontend/.claude/commands/visual-regression.md new file mode 100644 index 000000000000..e7d9e2b50b3d --- /dev/null +++ b/frontend/.claude/commands/visual-regression.md @@ -0,0 +1,35 @@ +# Visual Regression Test Runner + +Run local visual regression tests by capturing baselines from main on this machine, then comparing against the current branch. Both runs use the same OS and browser, so diffs reflect actual style changes rather than platform rendering differences. + +## Prerequisites + +- Docker running with Flagsmith services on localhost:8000 + +## Workflow + +1. Capture local baselines from main (stashes changes, checks out main, runs E2E, switches back): + +```bash +npm run test:visual:baselines +``` + +2. Run E2E tests on the current branch with visual regression screenshot capture: + +```bash +VISUAL_REGRESSION=1 npm run test +``` + +3. Compare captured screenshots against local baselines: + +```bash +npm run test:visual:compare +``` + +4. If there are failures, open the HTML report for visual diff inspection: + +```bash +npm run test:visual:report +``` + +5. Report results: how many comparisons passed/failed, and whether failures are style/layout regressions or data differences. diff --git a/frontend/README.md b/frontend/README.md index 6cd3e0f3e3df..d4c43a43dd6e 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -149,20 +149,26 @@ E2E_RETRIES=0 SKIP_BUNDLE=1 E2E_CONCURRENCY=1 npm run test -- tests/flag-tests.p Visual regression screenshots are captured during E2E tests via `visualSnapshot()` calls. They are a no-op unless `VISUAL_REGRESSION=1` is set. Comparison runs as a separate step after all E2E retries complete, so flaky tests don't affect the report. +##### Local development + +To check for visual regressions locally, capture baselines from main on your machine then compare against your branch. Both runs use the same OS and browser, so diffs reflect actual style changes. + ```bash -# 1. Run E2E tests with screenshot capture (with retries) -VISUAL_REGRESSION=1 npm run test +# 1. Capture baselines from main (stashes changes, checks out main, runs E2E, switches back) +npm run test:visual:baselines -# 2a. Generate/update baselines from captured screenshots -npm run test:visual:compare -- --update-snapshots +# 2. Run E2E tests on your branch with screenshot capture +VISUAL_REGRESSION=1 npm run test -# 2b. Compare screenshots against baselines (generates Playwright report with diffs) +# 3. Compare screenshots against baselines (generates Playwright report with diffs) npm run test:visual:compare -# 3. Open the report +# 4. Open the report npm run test:visual:report ``` +##### CI + Visual diffs never fail CI — they are reported via PR comment and the Playwright HTML report. Screenshots are saved to `e2e/visual-regression-screenshots/`, baselines to `e2e/visual-regression-snapshots/` (both git-ignored). In CI, the main branch uploads screenshots as baseline artifacts, and PRs download them for comparison. @@ -181,3 +187,5 @@ When using Claude Code, these commands are available for e2e testing: - `/e2e-create [description]` - Create a new test following existing patterns The optional `[N]` argument sets `E2E_REPEAT` to run tests N additional times after passing (defaults to 0). E.g., `/e2e 5` runs tests, then repeats 5 more times to detect flakiness. + +- `/visual-regression` - Download CI baselines, run E2E with screenshot capture, compare and report diff --git a/frontend/e2e/capture-baselines.ts b/frontend/e2e/capture-baselines.ts new file mode 100644 index 000000000000..0d710e97a168 --- /dev/null +++ b/frontend/e2e/capture-baselines.ts @@ -0,0 +1,46 @@ +import { execSync } from 'child_process' +import * as fs from 'fs' +import * as path from 'path' + +const SNAPSHOTS_DIR = path.resolve(__dirname, 'visual-regression-snapshots') +const SCREENSHOTS_DIR = path.resolve(__dirname, 'visual-regression-screenshots') + +function run(cmd: string) { + execSync(cmd, { stdio: 'inherit' }) +} + +function runQuiet(cmd: string) { + execSync(cmd, { stdio: 'pipe' }) +} + +const branch = execSync('git rev-parse --abbrev-ref HEAD', { encoding: 'utf-8' }).trim() + +console.log(`Current branch: ${branch}`) +console.log('Checking out main source code (keeping branch e2e tests)...') + +// Only checkout main's source code, not e2e/ test files. +// This ensures both baseline and branch runs use the same test code. +runQuiet('git checkout main -- web/ common/') + +try { + console.log('Running E2E on main source with VISUAL_REGRESSION=1...') + if (fs.existsSync(SCREENSHOTS_DIR)) { + fs.rmSync(SCREENSHOTS_DIR, { recursive: true }) + } + run('cross-env VISUAL_REGRESSION=1 npm run test') + + console.log('Copying screenshots to baselines...') + if (fs.existsSync(SNAPSHOTS_DIR)) { + fs.rmSync(SNAPSHOTS_DIR, { recursive: true }) + } + fs.cpSync(SCREENSHOTS_DIR, SNAPSHOTS_DIR, { recursive: true }) + + const count = fs.readdirSync(SNAPSHOTS_DIR).filter((f) => f.endsWith('.png')).length + console.log(`Captured ${count} baseline snapshots`) +} finally { + // Restore branch's source code + console.log('Restoring branch source code...') + runQuiet('git checkout -- web/ common/') +} + +console.log('Baselines ready. Now run: VISUAL_REGRESSION=1 npm run test && npm run test:visual:compare') diff --git a/frontend/e2e/tests/roles-test.pw.ts b/frontend/e2e/tests/roles-test.pw.ts index d2c223aca780..4f0039df33c6 100644 --- a/frontend/e2e/tests/roles-test.pw.ts +++ b/frontend/e2e/tests/roles-test.pw.ts @@ -19,6 +19,7 @@ test.describe('Roles Tests', () => { login, logout, waitForElementVisible, + waitForToastsToClear, } = createHelpers(page); const rolesProject = 'project-my-test-project-7-role' @@ -26,6 +27,7 @@ test.describe('Roles Tests', () => { await login(E2E_USER, PASSWORD) await click(byId(rolesProject)) await createFeature({ name: 'test_feature', value: false }) + await waitForToastsToClear() log('Go to Roles') await click(byId('organisation-link')) await click(byId('users-and-permissions')) diff --git a/frontend/package.json b/frontend/package.json index 0e0dfac6c3ce..890f117484e7 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,6 +18,7 @@ "test:unit:watch": "jest --watch", "test:unit:coverage": "jest --coverage", "test:visual": "cross-env VISUAL_REGRESSION=1 npx playwright test", + "test:visual:baselines": "npx tsx e2e/capture-baselines.ts", "test:visual:compare": "npx tsx e2e/compare-visual-regression.ts && npx playwright test -c playwright.visual.config.ts", "test:visual:report": "npx playwright show-report e2e/visual-regression-report", "test:report": "npx playwright show-report e2e/playwright-report", diff --git a/frontend/web/components/ActionButton.tsx b/frontend/web/components/ActionButton.tsx index aebf4b40bfcd..ba5c685f210c 100644 --- a/frontend/web/components/ActionButton.tsx +++ b/frontend/web/components/ActionButton.tsx @@ -24,7 +24,7 @@ const ActionButton: FC = ({ onClick() }} > -
+
diff --git a/frontend/web/components/DateSelect.tsx b/frontend/web/components/DateSelect.tsx index 76855aea81a9..5a437f052ecf 100644 --- a/frontend/web/components/DateSelect.tsx +++ b/frontend/web/components/DateSelect.tsx @@ -27,7 +27,7 @@ const DateSelect: FC = ({ const [isOpen, setIsOpen] = useState(false) return ( - + = ({ }, [isDeleted]) return ( -
+
{ Constants.resourceTypes[ diff --git a/frontend/web/components/IdentitySelect.tsx b/frontend/web/components/IdentitySelect.tsx index 3557f66d377e..7d91e87ca925 100644 --- a/frontend/web/components/IdentitySelect.tsx +++ b/frontend/web/components/IdentitySelect.tsx @@ -49,7 +49,7 @@ const IdentitySelect: FC = ({ .slice(0, 10) }, [ignoreIds, data]) return ( - + setLicence(licenceInputRef.current?.files?.[0] ?? null) } @@ -64,7 +64,7 @@ const LicensingTabContent: React.FC = ({ setLicenceSignature( licenceSignatureInputRef.current?.files?.[0] ?? null, diff --git a/frontend/web/components/PageTitle.tsx b/frontend/web/components/PageTitle.tsx index 9e9d95220977..c35841c1b4aa 100644 --- a/frontend/web/components/PageTitle.tsx +++ b/frontend/web/components/PageTitle.tsx @@ -20,7 +20,7 @@ const PageTitle: FC = ({ children, className, cta, title }) => { )}
- {!!cta &&
{cta}
} + {!!cta &&
{cta}
}
diff --git a/frontend/web/components/PanelSearch.tsx b/frontend/web/components/PanelSearch.tsx index 7ef2c61ae713..f8a533346a13 100644 --- a/frontend/web/components/PanelSearch.tsx +++ b/frontend/web/components/PanelSearch.tsx @@ -267,7 +267,7 @@ const PanelSearch = (props: PanelSearchProps): ReactElement => { {props.filterElement && props.filterElement} {sorting && ( - + void, isActive: boolean) => (
@@ -430,7 +430,7 @@ const SegmentOverrideListInner = ({ }} projectFlag={projectFlag} /> -
+
-
+
+
Segment overrides override the environment defaults, prioritise them by dragging it to the top of the list. @@ -842,7 +842,7 @@ class TheComponent extends Component { hideViewSegment={this.props.hideViewSegment} highlightSegmentId={this.props.highlightSegmentId} /> -
+
= ({ }) => { if (E2E) { return ( -
+
diff --git a/frontend/web/components/modals/InviteUsers.tsx b/frontend/web/components/modals/InviteUsers.tsx index 9d6d43d52450..52505dad8c5f 100644 --- a/frontend/web/components/modals/InviteUsers.tsx +++ b/frontend/web/components/modals/InviteUsers.tsx @@ -206,7 +206,7 @@ const InviteUsers: FC = () => { )} /> - + = ({ }} /> {showIcon && ( -
+
Flagsmith diff --git a/frontend/web/index.html b/frontend/web/index.html index 45a6cacda90e..42eec08a3bd4 100755 --- a/frontend/web/index.html +++ b/frontend/web/index.html @@ -100,10 +100,6 @@ font-weight:600; font-display:swap; } - - .display-none { - display: none !important; - } Flagsmith diff --git a/frontend/web/styles/3rdParty/_bootstrap.scss b/frontend/web/styles/3rdParty/_bootstrap.scss index ff4d20ff0334..2948bd64de29 100644 --- a/frontend/web/styles/3rdParty/_bootstrap.scss +++ b/frontend/web/styles/3rdParty/_bootstrap.scss @@ -20,33 +20,25 @@ // 5. Include any optional Bootstrap CSS as needed @import "~bootstrap/scss/type"; -@import "~bootstrap/scss/images"; @import "~bootstrap/scss/containers"; @import "~bootstrap/scss/grid"; @import "~bootstrap/scss/tables"; @import "~bootstrap/scss/forms"; @import "~bootstrap/scss/buttons"; @import "~bootstrap/scss/transitions"; -@import "~bootstrap/scss/dropdown"; -@import "~bootstrap/scss/button-group"; -@import "~bootstrap/scss/nav"; -@import "~bootstrap/scss/navbar"; // Requires nav //@import "~bootstrap/scss/card"; //@import "~bootstrap/scss/accordion"; -@import "~bootstrap/scss/breadcrumb"; //@import "~bootstrap/scss/pagination"; @import "~bootstrap/scss/badge"; @import "~bootstrap/scss/alert"; @import "~bootstrap/scss/progress"; //@import "~bootstrap/scss/list-group"; -@import "~bootstrap/scss/close"; //@import "~bootstrap/scss/toasts"; @import "~bootstrap/scss/modal"; // Requires transitions //@import "~bootstrap/scss/tooltip"; //@import "~bootstrap/scss/popover"; //@import "~bootstrap/scss/carousel"; -@import "~bootstrap/scss/spinners"; //@import "~bootstrap/scss/offcanvas"; //@import "~bootstrap/scss/placeholders"; diff --git a/frontend/web/styles/3rdParty/_hljs.scss b/frontend/web/styles/3rdParty/_hljs.scss index 25fc58b86074..453f8ed38630 100644 --- a/frontend/web/styles/3rdParty/_hljs.scss +++ b/frontend/web/styles/3rdParty/_hljs.scss @@ -8,30 +8,6 @@ -webkit-transition: $transition; transition: $transition; } -@mixin transition-property($property...) { - -moz-transition-property: $property; - -o-transition-property: $property; - -webkit-transition-property: $property; - transition-property: $property; -} -@mixin transition-duration($duration...) { - -moz-transition-property: $duration; - -o-transition-property: $duration; - -webkit-transition-property: $duration; - transition-property: $duration; -} -@mixin transition-timing-function($timing...) { - -moz-transition-timing-function: $timing; - -o-transition-timing-function: $timing; - -webkit-transition-timing-function: $timing; - transition-timing-function: $timing; -} -@mixin transition-delay($delay...) { - -moz-transition-delay: $delay; - -o-transition-delay: $delay; - -webkit-transition-delay: $delay; - transition-delay: $delay; -} .invalid .value-editor .hljs { border: 2px solid $danger; } @@ -130,15 +106,9 @@ .hljs-container { position: relative; &:hover { - .hljs-copy { - opacity: 1; - } .hljs-docs { opacity: 1; } - .hljs-github { - opacity: 1; - } } } @@ -159,23 +129,6 @@ } } -.btn.hljs-copy { - border-radius: $border-radius; - opacity: 0; - position: absolute; - bottom: 45px; - right: 15px; - &.top-right { - top: 10px; - right: 10px; - bottom: auto; - } -} -.tabbed .hljs { - border-top-right-radius: 0px; - border-top-left-radius: 0px; -} - .hljs-header { user-select: none; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', diff --git a/frontend/web/styles/components/_chip.scss b/frontend/web/styles/components/_chip.scss index d8f75cac18e0..d4e0313bb5c1 100644 --- a/frontend/web/styles/components/_chip.scss +++ b/frontend/web/styles/components/_chip.scss @@ -22,9 +22,6 @@ color: $primary400; } - &.chip-user { - color: $text-icon-light; - } } } .chip { @@ -107,21 +104,6 @@ margin-right: 5px; } } - &.chip-user { - background-color: $basic-alpha-8; - color: $body-color; - border-color: $basic-alpha-24; - .chip-icon { - color: $text-icon-light-grey; - } - &-icon { - line-height: $line-height-xxsm; - font-size: $font-caption-sm; - svg { - vertical-align: sub; - } - } - } } .chip-input { border: 1px solid $input-border-color; diff --git a/frontend/web/styles/components/_color-block.scss b/frontend/web/styles/components/_color-block.scss deleted file mode 100644 index f2afa224044c..000000000000 --- a/frontend/web/styles/components/_color-block.scss +++ /dev/null @@ -1,38 +0,0 @@ -.color-block { - width: 30px; - height: 30px; - border-radius: $border-radius; - margin-right: 1em; - display: inline-block; - margin-bottom: 1em; - &--small { - width: 10px; - height: 10px; - border-radius: $border-radius-sm; - margin-bottom: 0; - } - &--brand-primary { - background-color: $primary; - } - &--brand-secondary { - background-color: $success; - } - &--python { - background-color: #3572A5; - } - &--javascript { - background-color: #f1e05a; - } - &--c { - background-color: #178600; - } - &--typescript { - background-color: #2b7489; - } - &--ruby { - background-color: #701516; - } - &--java { - background-color: #b07219; - } -} diff --git a/frontend/web/styles/components/_feature-row-skeleton.scss b/frontend/web/styles/components/_feature-row-skeleton.scss index fbb660fde2c3..363c2473cf8b 100644 --- a/frontend/web/styles/components/_feature-row-skeleton.scss +++ b/frontend/web/styles/components/_feature-row-skeleton.scss @@ -2,24 +2,6 @@ padding: 0 16px; } -// Match parent specificity: .panel .panel-content .search-list -.panel .panel-content .search-list--skeleton { - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -// Override first-child border removal for skeletons -.panel .panel-content .search-list--skeleton .skeleton-row:first-child { - border-top: 1px solid $panel-border-color; - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -// Dark mode support -.dark .panel .panel-content .search-list--skeleton .skeleton-row:first-child { - border-top: 1px solid $panel-border-color-dark; -} - .skeleton { background: linear-gradient(90deg, $bg-light300 25%, $bg-light500 50%, $bg-light300 75%); background-size: 200% 100%; diff --git a/frontend/web/styles/components/_index.scss b/frontend/web/styles/components/_index.scss index 0dd50fc0a678..c0f41182d1d1 100644 --- a/frontend/web/styles/components/_index.scss +++ b/frontend/web/styles/components/_index.scss @@ -9,7 +9,6 @@ @import 'chip'; @import 'feature-change'; @import 'toast'; -@import 'color-block'; @import 'droparea'; @import 'metrics'; @import 'release-pipelines'; diff --git a/frontend/web/styles/components/_input.scss b/frontend/web/styles/components/_input.scss index 310d4189253d..fbe5c8fdd1dc 100644 --- a/frontend/web/styles/components/_input.scss +++ b/frontend/web/styles/components/_input.scss @@ -10,12 +10,6 @@ textarea { line-height: $line-height-lg; padding: $input-padding; font-weight: $input-font-weight; - &.borderless { - border-left: none !important; - border-top: none !important; - border-right: none !important; - border-radius: 0; - } &::placeholder { color: $input-placeholder-color !important; font-weight: normal; @@ -26,29 +20,10 @@ textarea { &:focus { border-color: $primary; } - &.textarea-sm { - padding: $input-padding-sm; - line-height: $line-height-sm; - height: $textarea-height-sm; - } - &.textarea-xsm { - padding: $input-padding-xsm; - line-height: $line-height-sm; - height: $textarea-height-xsm; - font-size: $font-sm; - } &.textarea-lg { padding: $input-padding-lg; height: $textarea-height-lg; } - &.textarea-container { - resize: none; - overflow: hidden; - min-height: 50px; - &.invalid { - border-color: $danger; - } - } } @import '~react-datepicker/dist/react-datepicker.css'; @@ -246,37 +221,6 @@ textarea { } } -.dark { - .MuiFormControl-root > div { - &:hover:before { - border-color: $input-bg-dark !important; - } - &:before { - border-color: $input-bg-dark; - } - &:before { - border-color: $input-bg-dark; - } - } - .MuiInputBase-input { - color: $body-color-dark; - } - .MuiChip-root { - color: $dark-highlight-color; - background: $panel-bg-dark; - - &:hover { - background: $panel-bg-dark; - svg { - color: $hr-border-color; - } - } - svg { - color: $primary900; - } - } -} - .dark { input[type='checkbox'] { & + label .checkbox { diff --git a/frontend/web/styles/components/_list-item.scss b/frontend/web/styles/components/_list-item.scss index cc024b25104b..9e2ef652b9b5 100644 --- a/frontend/web/styles/components/_list-item.scss +++ b/frontend/web/styles/components/_list-item.scss @@ -26,9 +26,6 @@ font-weight: normal; } - .subtitle { - font-size: 0.8em; - } &-sm { min-height: 60px; diff --git a/frontend/web/styles/components/_oauth-authorize.scss b/frontend/web/styles/components/_oauth-authorize.scss index 477854bc7f35..f1b39dab5610 100644 --- a/frontend/web/styles/components/_oauth-authorize.scss +++ b/frontend/web/styles/components/_oauth-authorize.scss @@ -10,11 +10,6 @@ width: 100%; } - &__logo { - height: 48px; - margin-bottom: 24px; - } - &__title { font-weight: 400; } diff --git a/frontend/web/styles/components/_paging.scss b/frontend/web/styles/components/_paging.scss index b31394c6e58f..8c7320373ff6 100644 --- a/frontend/web/styles/components/_paging.scss +++ b/frontend/web/styles/components/_paging.scss @@ -5,20 +5,6 @@ border-top: 1px solid $basic-alpha-16; border-bottom-left-radius: $border-radius; border-bottom-right-radius: $border-radius; - .btn-paging { - background: transparent; - color: $body-color; - width: 34px; - height: 34px; - padding: 0; - line-height: 34px; - border-radius: 17px !important; - &:hover { - color: $body-color; - box-shadow: none; - background: transparent !important; - } - } justify-content: center; .page { >div { diff --git a/frontend/web/styles/components/_panel.scss b/frontend/web/styles/components/_panel.scss index d12005fca8f8..a4a732e274f9 100644 --- a/frontend/web/styles/components/_panel.scss +++ b/frontend/web/styles/components/_panel.scss @@ -1,12 +1,6 @@ @import '../variables'; @import '../flexbox/mixins'; -.open-source-card { - &:hover, - :focus { - text-decoration: none !important; - } -} .flat-panel { .panel { box-shadow: none; @@ -24,10 +18,6 @@ padding: 0 !important; } } - .no-results { - text-align: center; - line-height: 44px; - } .panel-heading { h1, h2, @@ -201,17 +191,6 @@ a.text-white { } } } - &.panel-override { - .panel-content { - .search-list { - border: none; - .list-item-override { - border: 1px solid $basic-alpha-16; - border-radius: $border-radius-lg; - } - } - } - } &.panel-projects { .panel-content { .search-list { @@ -220,35 +199,4 @@ a.text-white { } } } - &.panel-change-request { - .search-list { - border-color: rgba(149, 108, 255, 0.48); - - .table-header { - color: #6837fc; - background-color: rgba(102, 51, 255, 0.08); - } - - .change-request-item { - border-color: rgba(149, 108, 255, 0.48); - } - } - - .change-request-updated-value { - input, - code.txt { - color: #6837fc; - } - } - } -} - -@include media-breakpoint-down(xxl) { - .owners-title { - display: none; - } - .table-column.assignees-column { - display: block; - width: 98px !important; - } } diff --git a/frontend/web/styles/components/_switch.scss b/frontend/web/styles/components/_switch.scss index 52da0077cfc5..a5f5704d65ba 100644 --- a/frontend/web/styles/components/_switch.scss +++ b/frontend/web/styles/components/_switch.scss @@ -73,30 +73,6 @@ -webkit-animation-name: none; animation-name: none; } -.rc-switch-label { - display: inline-block; - line-height: 20px; - font-size: 14px; - padding-left: 10px; - vertical-align: middle; - white-space: normal; - pointer-events: none; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; -} - -.widget-mode { - .rc-switch { - cursor: default; - opacity: 1; - @extend .rc-switch; - &.rc-switch-checked { - @extend .rc-switch-checked; - } - } -} .dark { .rc-switch { background-color: $switch-bg-dark; diff --git a/frontend/web/styles/components/_tabs.scss b/frontend/web/styles/components/_tabs.scss index aa767187f230..7e4df6950e6d 100644 --- a/frontend/web/styles/components/_tabs.scss +++ b/frontend/web/styles/components/_tabs.scss @@ -16,9 +16,6 @@ .tabs-nav { display: none; } - .tab-line { - display: none; - } .hljs-container { code { @@ -53,16 +50,6 @@ } } -.tabs-measure { - position: absolute; - visibility: hidden; - pointer-events: none; - height: 0; - overflow: hidden; - white-space: nowrap; - margin: 0 !important; -} - .tabs-nav { .tab-nav-full { flex: 1 !important; @@ -146,11 +133,6 @@ } } -.tab-icon { - font-size: 1.4em; - display: block; -} - .dark { .btn-tab { color: white !important; diff --git a/frontend/web/styles/flexbox/_index.scss b/frontend/web/styles/flexbox/_index.scss index 8a569ff3cde9..755af17d15d7 100644 --- a/frontend/web/styles/flexbox/_index.scss +++ b/frontend/web/styles/flexbox/_index.scss @@ -21,9 +21,6 @@ &.noWrap { @include flex-wrap(nowrap); } - &.row-center { - @include justify-content(center); - } } .centered-container { @@ -42,38 +39,3 @@ @include flex-value(1); } -//Allow for responsive ordering e.g. col-xs-order-1 -@each $breakpoint in map-keys($grid-breakpoints) { - @include media-breakpoint-up($breakpoint) { - .col-#{$breakpoint}-order-1 { - order: 1; - } - .col-#{$breakpoint}-order-2 { - order: 2; - } - .col-#{$breakpoint}-order-3 { - order: 3; - } - .col-#{$breakpoint}-order-4 { - order: 4; - } - .col-#{$breakpoint}-order-5 { - order: 5; - } - .col-#{$breakpoint}-order-6 { - order: 6; - } - .col-#{$breakpoint}-order-7 { - order: 7; - } - .col-#{$breakpoint}-order-8 { - order: 8; - } - .col-#{$breakpoint}-order-9 { - order: 9; - } - .col-#{$breakpoint}-order-10 { - order: 10; - } - } -} diff --git a/frontend/web/styles/mixins/box-shadow-mixin.scss b/frontend/web/styles/mixins/box-shadow-mixin.scss deleted file mode 100644 index 066616a68f38..000000000000 --- a/frontend/web/styles/mixins/box-shadow-mixin.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin box-shadow() { - box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12); -} \ No newline at end of file diff --git a/frontend/web/styles/mixins/transition-mixin.scss b/frontend/web/styles/mixins/transition-mixin.scss deleted file mode 100644 index 86231f13b5df..000000000000 --- a/frontend/web/styles/mixins/transition-mixin.scss +++ /dev/null @@ -1,30 +0,0 @@ -@mixin transition($transition...) { - -moz-transition: $transition; - -o-transition: $transition; - -webkit-transition: $transition; - transition: $transition; -} -@mixin transition-property($property...) { - -moz-transition-property: $property; - -o-transition-property: $property; - -webkit-transition-property: $property; - transition-property: $property; -} -@mixin transition-duration($duration...) { - -moz-transition-property: $duration; - -o-transition-property: $duration; - -webkit-transition-property: $duration; - transition-property: $duration; -} -@mixin transition-timing-function($timing...) { - -moz-transition-timing-function: $timing; - -o-transition-timing-function: $timing; - -webkit-transition-timing-function: $timing; - transition-timing-function: $timing; -} -@mixin transition-delay($delay...) { - -moz-transition-delay: $delay; - -o-transition-delay: $delay; - -webkit-transition-delay: $delay; - transition-delay: $delay; -} \ No newline at end of file diff --git a/frontend/web/styles/project/_alert.scss b/frontend/web/styles/project/_alert.scss index 3e5da4c6a3f5..79623a637ae4 100644 --- a/frontend/web/styles/project/_alert.scss +++ b/frontend/web/styles/project/_alert.scss @@ -1,20 +1,4 @@ @import "../variables"; -.alert-shown { - .navbar { - margin-top: 60px; - } - .app-container { - margin-top: 130px; - } - &.hide { - .navbar { - margin-top: 0; - } - .app-container { - margin-top: 70px; - } - } -} .alert { border-radius: $border-radius-lg; diff --git a/frontend/web/styles/project/_buttons.scss b/frontend/web/styles/project/_buttons.scss index 5e0ae70f961a..50bba7d7e9fe 100644 --- a/frontend/web/styles/project/_buttons.scss +++ b/frontend/web/styles/project/_buttons.scss @@ -139,23 +139,6 @@ button.btn { } } - &--transparent { - background-color: transparent; - justify-content: center; - align-items: center; - display: flex; - height: 38px; - width: 38px; - padding: 19px 0 18px 0; - line-height: inherit; - a { - line-height: 1; - } - &:hover { - background-color: rgba(0, 0, 0, 0.1); - box-shadow: none; - } - } &.btn-icon { padding:0; height: 32px; @@ -178,20 +161,7 @@ button.btn { } } } - &--remove:hover { - svg path { - fill: #d93939; - } - } &-with-icon { - &.btn-xs{ - padding: 0; - height: 28px; - width: 28px; - display: flex; - align-items: center; - justify-content: center; - } padding: 0 14px; background-color: $basic-alpha-8; border-radius: $border-radius; @@ -219,55 +189,6 @@ button.btn { &.btn-lg { line-height: $btn-line-height-lg; } - &.btn-remove { - background-color: $danger-alfa-8; - &:hover, - &:active, - &:disabled, - &:focus { - background-color: $danger-alfa-8 !important; - svg { - path { - fill: $danger; - } - } - } - } - } - &--with-icon { - background: none !important; - &.primary { - color: $primary; - path { - fill: $primary; - } - } - box-shadow: none; - height: auto; - line-height: 1; - padding: 0 5px; - - &:hover, - &:focus { - background: none !important; - color: darken($success, 10) !important; - path { - fill: darken($success, 10) !important; - } - box-shadow: none !important; - } - } - - &__icon { - pointer-events: none; - height: 25px; - width: auto; - margin-left: 5px; - - &--small { - position: relative; - height: 20px; - } } &-project { background-color: $bg-light200; @@ -375,10 +296,6 @@ button.btn { &:active { background: transparent; } - &.dark-link { - color: $body-color; - font-weight: bold; - } &.btn-with-icon { padding: 0 14px; background-color: $basic-alpha-8; @@ -421,14 +338,6 @@ $add-btn-size: 34px; } } -@include media-breakpoint-down(sm) { - .btn { - &__md-full { - width: 100%; - } - } -} - .dark { .btn { &:hover, @@ -491,25 +400,6 @@ $add-btn-size: 34px; color: $danger400 !important; } } - &--with-icon { - background: none !important; - - &.primary { - color: $dark-highlight-color; - - path { - fill: $dark-highlight-color; - } - } - &:hover, - &:focus { - background: none !important; - color: $bg-light200 !important; - path { - fill: $bg-light200 !important; - } - } - } &.btn-link { background-color: transparent; &:hover, diff --git a/frontend/web/styles/project/_forms.scss b/frontend/web/styles/project/_forms.scss index 9dcd50ca1618..a304f2d521d1 100644 --- a/frontend/web/styles/project/_forms.scss +++ b/frontend/web/styles/project/_forms.scss @@ -1,6 +1,3 @@ -.breadcrumb-item { - font-weight: 500; -} .or-divider { color: $text-muted; font-weight: 400; @@ -148,14 +145,12 @@ label { line-height: $line-height-sm; margin-bottom: 6px; } -label, -.icon-primary { +label { color: $body-color; font-weight: 500; } .dark { - label, - .icon-primary { + label { color: $white; } } @@ -173,11 +168,6 @@ label, } } -.__react_component_tooltip { - z-index: 99999999 !important; - position: fixed; -} - .notification { text-align: center; justify-content: center; diff --git a/frontend/web/styles/project/_icons.scss b/frontend/web/styles/project/_icons.scss index 891868b44242..754a1abb60e1 100644 --- a/frontend/web/styles/project/_icons.scss +++ b/frontend/web/styles/project/_icons.scss @@ -1,14 +1,3 @@ -.icon { - &--green { - color: $header-color; - } - &--tooltip { - font-size: $font-size-base; - } - &--new-tooltip { - font-size: 19px; - } -} svg.text-body path{ fill: $body-color; } diff --git a/frontend/web/styles/project/_lists.scss b/frontend/web/styles/project/_lists.scss index 0a1b95288827..5cd3923d3daa 100644 --- a/frontend/web/styles/project/_lists.scss +++ b/frontend/web/styles/project/_lists.scss @@ -1,27 +1,4 @@ @import "../variables"; -.step-list { - list-style-type: none; - padding-left: 0; - li { - height: 40px; - width: 40px; - padding: 5px; - border: 1px solid #2e2e2e; - border-radius: 50%; - - span { - display: block; - background: #2e2e2e; - height: 28px; - width: 28px; - line-height: 28px; - text-align: center; - border-radius: 50%; - margin: 0 auto; - color: #fff; - } - } -} .search-list, .List { diff --git a/frontend/web/styles/project/_modals.scss b/frontend/web/styles/project/_modals.scss index c361f4a83468..afcd8d0e1cf3 100644 --- a/frontend/web/styles/project/_modals.scss +++ b/frontend/web/styles/project/_modals.scss @@ -98,15 +98,6 @@ $side-width: 800px; } } - &__footer { - position: fixed; - bottom: 0; - left: 0; - right: 0; - padding: 20px; - height: 130px; - } - .modal-content { border-radius: 0; width: 100%; @@ -194,9 +185,6 @@ $side-width: 800px; } &.table-filter { top:12px; - .table-filter-lg { - width: 300px; - } } &--lg { width: 355px; @@ -261,13 +249,6 @@ $side-width: 800px; overflow: hidden; } -.modal.modal-confirm { - z-index: 200000000000; - h3 { - margin-bottom: 0; - } -} - .modal-open #crisp-chatbox [data-chat-status='initial'] { display: none !important; } @@ -301,14 +282,6 @@ $side-width: 800px; padding: 0 1.5rem; } - .tab-dropdown-item { - &:hover { - border-radius: 4px !important; - transition: background-color 0.15s ease !important; - background-color: #6610f210 !important; - color: black !important; - } - } .tab-nav-hr { margin: 0 1.5rem; } diff --git a/frontend/web/styles/project/_panel.scss b/frontend/web/styles/project/_panel.scss index b661e5aeb6de..6fe82da85638 100644 --- a/frontend/web/styles/project/_panel.scss +++ b/frontend/web/styles/project/_panel.scss @@ -56,13 +56,6 @@ border-top-right-radius: 0 !important; } - &--no-shadow { - box-shadow: none; - } - - &__segments-achievements { - border: 1px solid $primary !important; - } } .dark { .panel { @@ -74,16 +67,6 @@ } } -.header { - &--icon { - .btn--with-icon { - position: relative; - top: -4px; - margin-left: 5px; - } - } -} - .plan { border-radius: $border-radius; border: 1px solid $basic-alpha-16; diff --git a/frontend/web/styles/project/_project-nav.scss b/frontend/web/styles/project/_project-nav.scss index e9a3d5e53b16..1d3b3f82c594 100644 --- a/frontend/web/styles/project/_project-nav.scss +++ b/frontend/web/styles/project/_project-nav.scss @@ -24,12 +24,6 @@ nav a { color: var(--color-text-action); } } -.nav-sub-link-disabled { - cursor: not-allowed; - span { - opacity: 0.5; - } -} .nav-sub-link { color: $body-color; &-inner { @@ -93,59 +87,11 @@ nav a { .border-1 { border: 1px solid $hr-border-color; } -.border-right { - border-right: 1px solid $hr-border-color; -} @include media-breakpoint-up(md) { .border-md-right { border-right: 1px solid $hr-border-color; } } -.collapsible__content { - svg, - ion-icon { - text-align: center; - width: 16px; - height: 16px; - color: $body-color; - opacity: 0.6; - path { - fill: $body-color; - } - } - ion-icon { - font-size: $font-size-base; - } -} -.collapsible-title { - line-height: 32px; - cursor: pointer; - border-radius: $border-radius; - &:hover { - color: $primary; - background-color: $primary-alfa-8; - } -} -.collapsible.active { - .collapsible-title { - pointer-events: none; - } -} -.fill-body { - svg { - path { - fill: $body-color; - } - } -} -.fill-primary { - svg { - path { - fill: $primary; - } - } -} - @include media-breakpoint-down(md) { .nav-sub-link { border-bottom: none !important; @@ -162,12 +108,3 @@ nav a { } } -.dark { - .fill-body { - svg { - path { - fill: $body-color-dark; - } - } - } -} diff --git a/frontend/web/styles/project/_spacing-utils.scss b/frontend/web/styles/project/_spacing-utils.scss index d46192cfed28..d929f94e85f4 100644 --- a/frontend/web/styles/project/_spacing-utils.scss +++ b/frontend/web/styles/project/_spacing-utils.scss @@ -1,451 +1,24 @@ -// spacing utility classes -.m-0 { - margin: 0 !important; -} - -.mt-0, -.my-0 { - margin-top: 0 !important; -} - -.mr-0, -.mx-0 { - margin-right: 0 !important; -} - -.mb-0, -.my-0 { - margin-bottom: 0 !important; -} - -.ml-0, -.mx-0 { - margin-left: 0 !important; -} - -.m-1 { - margin: 0.25rem !important; -} - -.mt-1, -.my-1 { - margin-top: 0.25rem !important; -} - -.mr-1, -.mx-1 { - margin-right: 0.25rem !important; -} - -.mb-1, -.my-1 { - margin-bottom: 0.25rem !important; -} - -.ml-1, -.mx-1 { - margin-left: 0.25rem !important; -} - -.m-2 { - margin: 0.5rem !important; -} - -.mt-2, -.my-2 { - margin-top: 0.5rem !important; -} - -.mr-2, -.mx-2 { - margin-right: 0.5rem !important; -} - -.mb-2, -.my-2 { - margin-bottom: 0.5rem !important; -} - -.ml-2, -.mx-2 { - margin-left: 0.5rem !important; -} - -.m-3 { - margin: 1rem !important; -} - -.mt-3, -.my-3 { - margin-top: 1rem !important; -} - -.mr-3, -.mx-3 { - margin-right: 1rem !important; -} - -.mb-3, -.my-3 { - margin-bottom: 1rem !important; -} - -.ml-3, -.mx-3 { - margin-left: 1rem !important; -} - -.m-4 { - margin: 1.5rem !important; -} - -.mt-4, -.my-4 { - margin-top: 1.5rem !important; -} - -.mr-4, -.mx-4 { - margin-right: 1.5rem !important; -} - -.mb-4, -.my-4 { - margin-bottom: 1.5rem !important; -} - -.ml-4, -.mx-4 { - margin-left: 1.5rem !important; -} - -.m-5 { - margin: 2rem !important; -} - -.mt-5, -.my-5 { - margin-top: 2rem !important; -} - -.mr-5, -.mx-5 { - margin-right: 2rem !important; -} - -.mb-5, -.my-5 { - margin-bottom: 2rem !important; -} - -.ml-5, -.mx-5 { - margin-left: 2rem !important; -} - -.p-0 { - padding: 0 !important; -} - -.pt-0, -.py-0 { - padding-top: 0 !important; -} - -.pr-0, -.px-0 { - padding-right: 0 !important; -} - -.pb-0, -.py-0 { - padding-bottom: 0 !important; -} - -.pl-0, -.px-0 { - padding-left: 0 !important; -} - -.p-1 { - padding: 0.25rem !important; -} - -.pt-1, -.py-1 { - padding-top: 0.25rem !important; -} - -.pr-1, -.px-1 { - padding-right: 0.25rem !important; -} - -.pb-1, -.py-1 { - padding-bottom: 0.25rem !important; -} - -.pl-1, -.px-1 { - padding-left: 0.25rem !important; -} - -.p-2 { - padding: 0.5rem !important; -} - -.pt-2, -.py-2 { - padding-top: 0.5rem !important; -} - -.pr-2, -.px-2 { - padding-right: 0.5rem !important; -} - -.pb-2, -.py-2 { - padding-bottom: 0.5rem !important; -} - -.pl-2, -.px-2 { - padding-left: 0.5rem !important; -} - -.p-3 { - padding: 1rem !important; -} - -.pt-3, -.py-3 { - padding-top: 1rem !important; -} - -.pr-3, -.px-3 { - padding-right: 1rem !important; -} - -.pb-3, -.py-3 { - padding-bottom: 1rem !important; -} - -.pl-3, -.px-3 { - padding-left: 1rem !important; -} +// Bootstrap 4 -> 5 compatibility: ml-*/mr-*/pl-*/pr-* are not generated by BS5 +// which uses ms-*/me-*/ps-*/pe-* instead. Keep these until the codebase is migrated. -.p-4 { - padding: 1.5rem !important; +@each $i, $size in (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2rem) { + .ml-#{$i} { margin-left: $size !important; } + .mr-#{$i} { margin-right: $size !important; } + .pl-#{$i} { padding-left: $size !important; } + .pr-#{$i} { padding-right: $size !important; } } -.pt-4, -.py-4 { - padding-top: 1.5rem !important; -} - -.pr-4, -.px-4 { - padding-right: 1.5rem !important; -} +.ml-auto { margin-left: auto !important; } -.pb-4, -.py-4 { - padding-bottom: 1.5rem !important; -} - -.pl-4, -.px-4 { - padding-left: 1.5rem !important; -} - -.p-5 { - padding: 2rem !important; -} - -.pt-5, -.py-5 { - padding-top: 2rem !important; -} - -.pr-5, -.px-5 { - padding-right: 2rem !important; -} - -.pb-5, -.py-5 { - padding-bottom: 2rem !important; -} - -.pl-5, -.px-5 { - padding-left: 2rem !important; -} +// Custom utilities not in Bootstrap's scale +.row-gap-4 { row-gap: $spacer; } +.row-gap-2 { row-gap: $spacer * 0.5; } +.px-12 { padding-left: 6rem; padding-right: 6rem; } +// Responsive utilities not generated by BS5 @include media-breakpoint-down(md) { .px-md-5 { padding-left: 2rem !important; padding-right: 2rem !important; } } - -.px-12 { - padding-left: 6rem; - padding-right: 6rem; -} - -.m-n1 { - margin: -0.25rem !important; -} - -.mt-n1, -.my-n1 { - margin-top: -0.25rem !important; -} - -.mr-n1, -.mx-n1 { - margin-right: -0.25rem !important; -} - -.mb-n1, -.my-n1 { - margin-bottom: -0.25rem !important; -} - -.ml-n1, -.mx-n1 { - margin-left: -0.25rem !important; -} - -.m-n2 { - margin: -0.5rem !important; -} - -.mt-n2, -.my-n2 { - margin-top: -0.5rem !important; -} - -.mr-n2, -.mx-n2 { - margin-right: -0.5rem !important; -} - -.mb-n2, -.my-n2 { - margin-bottom: -0.5rem !important; -} - -.ml-n2, -.mx-n2 { - margin-left: -0.5rem !important; -} - -.m-n3 { - margin: -1rem !important; -} - -.mt-n3, -.my-n3 { - margin-top: -1rem !important; -} - -.mr-n3, -.mx-n3 { - margin-right: -1rem !important; -} - -.mb-n3, -.my-n3 { - margin-bottom: -1rem !important; -} - -.ml-n3, -.mx-n3 { - margin-left: -1rem !important; -} - -.m-n4 { - margin: -1.5rem !important; -} - -.mt-n4, -.my-n4 { - margin-top: -1.5rem !important; -} - -.mr-n4, -.mx-n4 { - margin-right: -1.5rem !important; -} - -.mb-n4, -.my-n4 { - margin-bottom: -1.5rem !important; -} - -.ml-n4, -.mx-n4 { - margin-left: -1.5rem !important; -} - -.m-n5 { - margin: -3rem !important; -} - -.mt-n5, -.my-n5 { - margin-top: -3rem !important; -} - -.mr-n5, -.mx-n5 { - margin-right: -3rem !important; -} - -.mb-n5, -.my-n5 { - margin-bottom: -3rem !important; -} - -.ml-n5, -.mx-n5 { - margin-left: -3rem !important; -} - -.m-auto { - margin: auto !important; -} - -.mt-auto, -.my-auto { - margin-top: auto !important; -} - -.mr-auto, -.mx-auto { - margin-right: auto !important; -} - -.mb-auto, -.my-auto { - margin-bottom: auto !important; -} - -.ml-auto, -.mx-auto { - margin-left: auto !important; -} -.row-gap-4 { - row-gap: $spacer; -} - -.row-gap-2 { - row-gap: $spacer * 0.5; -} diff --git a/frontend/web/styles/project/_tooltips.scss b/frontend/web/styles/project/_tooltips.scss index eec5071b455c..c1430bfac53d 100644 --- a/frontend/web/styles/project/_tooltips.scss +++ b/frontend/web/styles/project/_tooltips.scss @@ -14,9 +14,6 @@ $shadow-dark: 0 4px 4px 0 #00000029; background-color: white !important; z-index: 9999; - &.tooltip-lg { - max-width: 900px; - } i { font-style: normal; color: $primary; diff --git a/frontend/web/styles/project/_type.scss b/frontend/web/styles/project/_type.scss index f5fc953a761a..c0aeabc3e1d7 100644 --- a/frontend/web/styles/project/_type.scss +++ b/frontend/web/styles/project/_type.scss @@ -39,18 +39,6 @@ h6 { line-height: $h6-line-height; } -.ln { - &-xlg { - line-height: $line-height-xlg; - } - &-xsm { - line-height: $line-height-xsm; - } - &-xxsm { - line-height: $line-height-xxsm; - } -} - a { text-decoration: none; } @@ -88,18 +76,6 @@ a { -moz-osx-font-smoothing: grayscale; } -a.link-dark { - color: $primary; -} - -a.dark { - color: $primary900; - text-decoration: underline; - &:hover { - color: lighten($primary900, 10); - } -} - .text-small { font-size: 0.75rem !important; } @@ -108,30 +84,6 @@ a.dark { color: white; } -.text { - &__link { - color: $primary; - &:hover { - color: lighten($primary, 10); - } - } -} - -.text-no-decoration { - text-decoration: none; - &:hover { - text-decoration: none; - } -} - -.large-para { - font-size: 1.25rem; -} - -.bold-link { - font-weight: bold !important; -} - .feature { &--off { color: $danger; @@ -140,6 +92,3 @@ a.dark { color: $primary; } } -.letter-spacing { - letter-spacing: 1px; -} diff --git a/frontend/web/styles/project/_utils.scss b/frontend/web/styles/project/_utils.scss index 64dfbb4ee3aa..c09f36801187 100644 --- a/frontend/web/styles/project/_utils.scss +++ b/frontend/web/styles/project/_utils.scss @@ -1,11 +1,3 @@ -.clearfix:after { - visibility: hidden; - display: block; - font-size: 0; - content: " "; - clear: both; - height: 0; -} .hover-color-primary { &:hover { color: $primary; @@ -22,50 +14,19 @@ color: $bg-light300; border-color: $danger; } -.clearfix { display: inline-block; } -/* start commented backslash hack \*/ -* html .clearfix { height: 1%; } -.clearfix { display: block; } -/* close commented backslash hack */ - .standard-case { text-transform: none !important; } -.float-right{ - float:right; -} -.text-light { - color: white !important; -} .form-cta { text-align: right; } -.justify-content-center { - justify-content: center; -} - -.hidden { - display: none; -} -.relative { - position: relative !important; -} -.float-left{ - float:left; -} -.left-0 { - left: 0 !important; -} .max-w-auto { max-width: none !important; } .top-form-item { top: 30px; } -.border-2 { - border-width: 2px !important; -} .border-left-1 { border-left: 1px solid $hr-border-color !important; } @@ -78,17 +39,6 @@ margin-top:20px; } -.margin-bottom{ - margin-bottom:20px; -} - -.text-left{ - text-align: left; -} - -.link-style{ - text-decoration: underline; -} .disable-transitions { .modal-dialog { @@ -104,28 +54,10 @@ } } -.e2e { - background-color: rgba(255,255,255,0.75); - pointer-events: none !important; - position:fixed; - top: 0; - left: 0; - right: 0; - z-index: 10000000000; -} - .show { display: block!important; } -.ml-auto, .mx-auto { - margin-left: auto!important; -} - -.mr-auto, .mx-auto { - margin-right: auto!important; -} - .signup-icon { width: 64px; path { @@ -133,25 +65,6 @@ } } -.align-start { - align-items: flex-start; -} - -.transition-none { - transition: none !important; - .modal-content { - transition: none !important; - } -} - -.text-primary { - color: $primary !important; -} - -.text-primary { - color: $primary !important; -} - .unread { display: inline-block; border-radius: 7px; @@ -170,14 +83,6 @@ bottom: -1px; } -.justify-content-end { - justify-content: flex-end; -} - -.widget-container { - padding: 10px; -} - .bg-primary { background: $primary !important; &.bg-opacity-10 { @@ -226,30 +131,12 @@ } } -.blur { - filter: blur(5px); -} - .overflow-y-auto{ overflow-y: auto} -.user-select-none { - user-select: none; -} -.pointer-events-none { - pointer-events: none; -} -.opacity-50 { - opacity: 0.5; -} - .bg-primary-opacity-5 { background-color: transparentize($primary, 0.95); } -.border-primary { - border-color: $primary !important; -} - .bg-card { background-color: white; } diff --git a/frontend/web/styles/styles.scss b/frontend/web/styles/styles.scss index 89e6a95a64ba..5537f71e9f23 100644 --- a/frontend/web/styles/styles.scss +++ b/frontend/web/styles/styles.scss @@ -21,9 +21,6 @@ margin: 0; } } -.display-none { - display: none !important; -} .dark .butter-bar { background-color: $butter-bar-bg-dark; color: $header-color-dark; @@ -56,19 +53,6 @@ bold, strong { } } -.faint-lg { - color: $text-muted; - font-size: 1.25em; -} - -.striped-section { - padding: 20px; - - &:nth-child(2) { - background-color: #f7f7f7; - } -} - .cursor-pointer { cursor: pointer; } @@ -151,85 +135,10 @@ input:disabled { text-align: right; } -.inline-block { - display: inline-block; -} - .form-group { margin-bottom: 1.5rem; } -.header-icon { - margin-left: 10px; - font-size: 1.5em; -} - -.alert-bar { - position: fixed; - top: 0; - left: 0; - right: 0; - height: 60px; - z-index: 200; - color: #fff; - padding: 15px; - font-size: 1.2em; - background-color: #384f68; - text-align: center; - -webkit-transition: all 0.3s ease; - -moz-transition: all 0.3s ease; - transition: all 0.3s ease; - - a { - color: white; - - &.close-btn { - font-size: 30px; - line-height: 30px; - } - } - - &__text { - font-size: 14px; - @media screen and (max-width: 368px) { - font-size: 11px; - } - } - - - &.slideOut { - padding: 0; - } -} - -@media screen and (max-width: 576px) { - - .alert-bar { - padding: 10px 10px 5px 0; - font-size: 1em; - } - -} - -.bottom-banner { - position: fixed; - bottom: 20px; - margin: auto; - height: 44px; - line-height: 44px; - right: 0; - text-align: center; - - .inner { - padding-left: 10px; - padding-right: 10px; - height: 44px; - background-color: white; - display: inline-block; - box-shadow: rgba(75, 75, 75, 0.21) 0px 1px 6px, rgba(75, 75, 75, 0.21) 0px 1px 4px; - } -} - .react-select__menu { z-index: 3 !important; }