Skip to content

Commit

Permalink
Change CSS for two-step inline text
Browse files Browse the repository at this point in the history
This is a less magic number-y approach than before, but since
the buttons were previously spaced with an actual space
character rather than CSS, some margins are needed to replicate
that in the flexbox layout.
  • Loading branch information
backspace committed Feb 10, 2021
1 parent 6159763 commit 13ab142
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 19 deletions.
3 changes: 2 additions & 1 deletion ui/app/components/two-step-button.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ import { next } from '@ember/runloop';
import { equal } from '@ember/object/computed';
import { task, waitForEvent } from 'ember-concurrency';
import RSVP from 'rsvp';
import { classNames } from '@ember-decorators/component';
import { classNames, classNameBindings } from '@ember-decorators/component';
import classic from 'ember-classic-decorator';

@classic
@classNames('two-step-button')
@classNameBindings('inlineText:has-inline-text')
export default class TwoStepButton extends Component {
idleText = '';
cancelText = '';
Expand Down
31 changes: 14 additions & 17 deletions ui/app/styles/components/two-step-button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,20 @@
font-size: $body-size;
line-height: 1;

&.has-inline-text {
display: inline-flex;
align-items: center;

button {
margin-left: 0.5ch;
}

.confirmation-text {
position: static;
margin-right: 0.5ch;
}
}

.confirmation-text {
position: absolute;
left: 0;
Expand All @@ -20,23 +34,6 @@
right: 0;
}

&.has-text-inline {
top: unset;
bottom: 0;
padding-bottom: 6.462px;

left: 100%;
right: unset;
padding-left: 0.5rem;

&.is-right-aligned {
padding-left: 0;
padding-right: 0.5rem;
left: unset;
right: 100%;
}
}

&.inherit-color {
color: currentColor;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@
@cancelText="Cancel"
@confirmText="Yes, Fail"
@confirmationMessage="Are you sure?"
@alignRight={{true}}
@inlineText={{true}}
@awaitingConfirmation={{this.fail.isRunning}}
@disabled={{this.fail.isRunning}}
Expand Down

0 comments on commit 13ab142

Please sign in to comment.