Skip to content

Commit

Permalink
Improve suggested links UI in link inserter
Browse files Browse the repository at this point in the history
Make the suggested links UI more stylistically consistent with the rest
of the editor.
  • Loading branch information
noisysocks committed Apr 6, 2018
1 parent 92322e6 commit fd30496
Showing 1 changed file with 29 additions and 5 deletions.
34 changes: 29 additions & 5 deletions blocks/rich-text/format-toolbar/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,46 @@
font-size: $default-font-size;
line-height: $default-line-height;
z-index: z-index( '.blocks-format-toolbar__link-modal' );

.blocks-url-input {
width: 230px;
}
}

.blocks-format-toolbar__link-modal-line {
$button-size: 36px;
$input-padding: 10px;
$input-size: 230px;

display: flex;
flex-direction: row;
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
align-items: center;
align-items: flex-start;

.components-button {
flex-shrink: 0;
width: $button-size;
height: $button-size;
}

.blocks-url-input {
width: $input-size;

input {
padding: $input-padding;
}
}

.blocks-url-input__suggestions {
border-top: 1px solid $light-gray-500;
box-shadow: none;
left: -( $button-size );
padding: 4px 0;
position: relative;
width: $input-size + $button-size * 2;
}

.blocks-url-input__suggestion {
color: $dark-gray-100;
padding: 4px ( $button-size + $input-padding );
}
}

Expand Down

0 comments on commit fd30496

Please sign in to comment.