Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Consistent UI #23202

Merged
merged 13 commits into from
Jun 22, 2020
Merged

Fix: Consistent UI #23202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
fe15ce3
Improve buttongroup.
Jun 16, 2020
a831386
Polish sidebar header, make close align.
Jun 16, 2020
3a1df62
Dark text color in sidebar.
jasmussen Jun 16, 2020
f77174a
Polish select control.
jasmussen Jun 16, 2020
db11e43
Try, remove i/o from toggle.
jasmussen Jun 16, 2020
91bad03
Retire $panel-padding variable.
jasmussen Jun 16, 2020
c03fcb4
Tweak panel-header-height
jasmussen Jun 16, 2020
c96bd53
Make tabs consistent with inserter.
jasmussen Jun 16, 2020
1a59b39
Make solid/gradient picker consistent.
jasmussen Jun 16, 2020
cd021af
Address feedback, and unify panel headings.
jasmussen Jun 16, 2020
827f030
Reduce margin.
jasmussen Jun 16, 2020
71ec017
Update snapshots.
jasmussen Jun 16, 2020
2bc99a7
Update snapshot.
jasmussen Jun 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/base-styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,8 @@ $grid-unit-60: 6 * $grid-unit; // 48px
$icon-size: 24px;
$button-size: 36px;
$button-size-small: 24px;
$panel-padding: 16px;
$header-height: 60px;
$panel-header-height: 50px;
$panel-header-height: $grid-unit-60;
$admin-bar-height: 32px;
$admin-bar-height-big: 46px;
$admin-sidebar-width: 160px;
Expand Down
1 change: 1 addition & 0 deletions packages/base-styles/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ $z-layers: (
".edit-post-sidebar .components-panel": -2,
".edit-post-text-editor__toolbar": 1,
".block-editor-inserter__tabs": 1,
".edit-post-sidebar__panel-tab.is-active": 1,
".block-editor-inserter__tab.is-active": 1,
".components-panel__header": 1,
".components-modal__header": 10,
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-compare/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@

.block-editor-block-compare__wrapper {
display: flex;
padding-bottom: $panel-padding;
padding-bottom: $grid-unit-20;

> div {
display: flex;
justify-content: space-between;
flex-direction: column;
width: 50%;
padding: 0 $panel-padding 0 0;
padding: 0 $grid-unit-20 0 0;
min-width: 200px;

button {
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-inspector/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@
display: block;
font-size: $default-font-size;
background: $white;
padding: ($panel-padding * 2) $panel-padding;
padding: ($grid-unit-20 * 2) $grid-unit-20;
text-align: center;
}
6 changes: 2 additions & 4 deletions packages/block-editor/src/components/colors-gradients/control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,16 +125,14 @@ function ColorGradientControlInner( {
<ButtonGroup className="block-editor-color-gradient-control__button-tabs">
<Button
isSmall
isPrimary={ currentTab === 'color' }
isSecondary={ currentTab !== 'color' }
isPressed={ currentTab === 'color' }
onClick={ () => setCurrentTab( 'color' ) }
>
{ __( 'Solid' ) }
</Button>
<Button
isSmall
isPrimary={ currentTab === 'gradient' }
isSecondary={ currentTab !== 'gradient' }
isPressed={ currentTab === 'gradient' }
onClick={ () => setCurrentTab( 'gradient' ) }
>
{ __( 'Gradient' ) }
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/inserter/style.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding-left: $panel-padding / 2;
padding-right: $panel-padding / 2;
padding-left: $grid-unit-20 / 2;
padding-right: $grid-unit-20 / 2;
padding-top: 0;
padding-bottom: 0;
}
Expand Down Expand Up @@ -76,5 +76,5 @@
}

.columnPadding {
padding: $panel-padding;
padding: $grid-unit-20;
}
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><form><div class=\\"block-editor-link-control__search-input-wrapper\\"><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input class=\\"block-editor-url-input__input\\" type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2 -2 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button></div></div></form><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"components-visually-hidden\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"6\\" height=\\"6\\" aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 6 6\\" class=\\"components-form-toggle__off\\"><path d=\\"M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;
exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><form><div class=\\"block-editor-link-control__search-input-wrapper\\"><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input class=\\"block-editor-url-input__input\\" type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2 -2 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button></div></div></form><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"components-visually-hidden\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;
2 changes: 1 addition & 1 deletion ...ges/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"2\\" height=\\"6\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 2 6\\" class=\\"components-form-toggle__on\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M0 0h2v6H0z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><label class=\\"components-base-control__label\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"components-visually-hidden\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><label class=\\"components-base-control__label\\" for=\\"inspector-select-control-0\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"components-visually-hidden\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label><select id=\\"inspector-select-control-0\\" class=\\"components-select-control__input\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/url-popover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@

.block-editor-url-popover__settings {
display: block;
padding: $panel-padding;
padding: $grid-unit-20;
border-top: $border-width solid $light-gray-500;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/button/editor.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
border-radius: $border-width * 4;
padding: $block-spacing;
border-width: $border-width;
margin: 2 * $panel-padding;
margin: 2 * $grid-unit-20;
background-color: $button-fallback-bg;
color: $white;
}
Expand Down
6 changes: 3 additions & 3 deletions packages/block-library/src/button/rich-text.android.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.richText {
background-color: transparent;
padding-left: $panel-padding;
padding-right: $panel-padding;
margin: 10px $panel-padding;
padding-left: $grid-unit-20;
padding-right: $grid-unit-20;
margin: 10px $grid-unit-20;
}
2 changes: 1 addition & 1 deletion packages/block-library/src/button/rich-text.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.richText {
margin: 10px $panel-padding;
margin: 10px $grid-unit-20;
background-color: transparent;
}
6 changes: 3 additions & 3 deletions packages/components/src/button-group/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
.components-button {
border-radius: 0;
display: inline-flex;
color: var(--wp-admin-theme-color);
box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
color: $dark-gray-primary;
box-shadow: inset 0 0 0 $border-width $dark-gray-primary;

& + .components-button {
margin-left: -1px;
Expand All @@ -29,7 +29,7 @@

// The active button should look pressed.
&.is-primary {
box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
box-shadow: inset 0 0 0 $border-width $dark-gray-primary;
}
}
}
6 changes: 3 additions & 3 deletions packages/components/src/color-palette/style.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
.contentContainer {
flex-direction: row;
padding: 0 $panel-padding;
padding: 0 $grid-unit-20;
}

.container {
padding-bottom: $panel-padding;
padding-bottom: $grid-unit-20;
}

.verticalSeparator {
border-width: $border-width / 2;
border-color: $light-gray-400;
height: 38px;
margin-right: $panel-padding / 2;
margin-right: $grid-unit-20 / 2;
align-self: center;
}

Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/color-picker/style.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: $panel-padding;
margin-top: $panel-padding;
padding: $grid-unit-20;
margin-top: $grid-unit-20;
flex-wrap: wrap;
}

Expand Down Expand Up @@ -43,8 +43,8 @@
}

.picker {
padding: $panel-padding;
border-radius: $panel-padding / 2;
padding: $grid-unit-20;
border-radius: $grid-unit-20 / 2;
height: 200px;
}

Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/custom-select-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

.components-custom-select-control__label {
display: block;
margin-bottom: 5px;
margin-bottom: $grid-unit-10;
}

.components-custom-select-control__button {
Expand All @@ -26,9 +26,9 @@
box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color);
}

&-icon {
.components-custom-select-control__button-icon {
height: 100%;
padding: 0 4px;
padding: 0;
position: absolute;
right: 0;
top: 0;
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/font-size-picker/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.components-font-size-picker__controls {
max-width: $sidebar-width - ( 2 * $panel-padding );
max-width: $sidebar-width - ( 2 * $grid-unit-20 );
display: flex;
flex-wrap: wrap;
align-items: center;
Expand All @@ -14,7 +14,7 @@
margin-bottom: 0;
margin-left: 0;
margin-right: $grid-unit-10;
margin-top: 5px;
margin-top: $grid-unit-10;
width: 54px;

// Show the reset button as disabled until a value is entered.
Expand All @@ -37,7 +37,7 @@

.components-color-palette__clear {
height: 30px;
margin-top: 23px;
margin-top: 26px;
}
}

Expand Down
29 changes: 0 additions & 29 deletions packages/components/src/form-toggle/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,6 @@
import classnames from 'classnames';
import { noop } from 'lodash';

/**
* WordPress dependencies
*/
import { Path, SVG } from '@wordpress/primitives';

function FormToggle( { className, checked, id, onChange = noop, ...props } ) {
const wrapperClasses = classnames( 'components-form-toggle', className, {
'is-checked': checked,
Expand All @@ -26,30 +21,6 @@ function FormToggle( { className, checked, id, onChange = noop, ...props } ) {
/>
<span className="components-form-toggle__track"></span>
<span className="components-form-toggle__thumb"></span>
{ checked ? (
<SVG
className="components-form-toggle__on"
width="2"
height="6"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2 6"
>
<Path d="M0 0h2v6H0z" />
</SVG>
) : (
<SVG
className="components-form-toggle__off"
width="6"
height="6"
aria-hidden="true"
role="img"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 6 6"
>
<Path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z" />
</SVG>
) }
</span>
);
}
Expand Down
43 changes: 0 additions & 43 deletions packages/components/src/form-toggle/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,6 @@ $toggle-border-width: 2px;
position: relative;
display: inline-block;

// On/Off icon indicators.
.components-form-toggle__on,
.components-form-toggle__off {
position: absolute;
top: $toggle-border-width * 3;
box-sizing: border-box;
}

.components-form-toggle__off {
color: $dark-gray-300;
fill: currentColor;
right: $toggle-border-width * 3;
}

.components-form-toggle__on {
left: $toggle-border-width * 3 + 2px; // Indent 2px extra because icon is thinner.
}

// Unchecked state.
.components-form-toggle__track {
content: "";
Expand Down Expand Up @@ -90,11 +72,6 @@ $toggle-border-width: 2px;
border-width: 0; // Zero out the border color to make the thumb invisible in Windows High Contrast Mode.
transform: translateX($toggle-width - ($toggle-border-width * 4) - ($toggle-height - ($toggle-border-width * 4)));
}

&::before {
background-color: var(--wp-admin-theme-color);
border: $toggle-border-width solid var(--wp-admin-theme-color);
}
}

// Disabled state:
Expand Down Expand Up @@ -126,23 +103,3 @@ $toggle-border-width: 2px;
content: "";
}
}

// Ensure on indicator works in normal and Windows high contrast mode both.
.components-form-toggle .components-form-toggle__on {
// Outlines show up in windows high contrast mode.
outline: $border-width solid transparent;
outline-offset: -1px;

// This colors the indicator black, then inverts it for normal mode.
border: $border-width solid $black;
filter: invert(100%) contrast(500%); // This makes the icon white for normal mode, and it makes it dark blue in Windows High Contrast Mode.
}

@supports (-ms-high-contrast-adjust: auto) {
// Edge stacks outlines on top of the SVG itself, and when showing them in high contrast mode it means they get inverted again.
// Therefore, show a different style for the on indicator only in Edge and IE11.
.components-form-toggle .components-form-toggle__on {
filter: none;
border: $border-width solid $white;
}
}
12 changes: 6 additions & 6 deletions packages/components/src/mobile/bottom-sheet/styles.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
}

.emptyHeader {
margin-top: $panel-padding / 2;
margin-top: $grid-unit-20 / 2;
}


Expand Down Expand Up @@ -174,9 +174,9 @@
// Color Cell

.colorCircle {
width: 2 * $panel-padding;
height: 2 * $panel-padding;
border-radius: $panel-padding;
width: 2 * $grid-unit-20;
height: 2 * $grid-unit-20;
border-radius: $grid-unit-20;
}

// Radio Cell
Expand All @@ -194,8 +194,8 @@
.bottomSheetHeader {
flex-direction: row;
align-items: center;
padding-right: $panel-padding;
padding-left: $panel-padding;
padding-right: $grid-unit-20;
padding-left: $grid-unit-20;
min-height: 44px;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/mobile/color-settings/style.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
justify-content: center;
align-items: center;
align-content: center;
padding: 12px $panel-padding;
padding: 12px $grid-unit-20;
}

.colorIndicator {
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/mobile/picker/styles.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
.separator {
margin-top: $panel-padding / 2;
margin-bottom: $panel-padding / 2;
margin-left: -$panel-padding;
margin-right: -$panel-padding;
margin-top: $grid-unit-20 / 2;
margin-bottom: $grid-unit-20 / 2;
margin-left: -$grid-unit-20;
margin-right: -$grid-unit-20;
height: $border-width;
background-color: $light-gray-400;
}
Expand Down
Loading