Skip to content

Instantly share code, notes, and snippets.

@Dunkh4n

Dunkh4n/bricks-builder-padding-margin-display

Last active July 27, 2022 09:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Dunkh4n/ae406c5517eb823b41cc3742559909d2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Dunkh4n/ae406c5517eb823b41cc3742559909d2 to your computer and use it in GitHub Desktop.
Download ZIP
Bricks Builder, rework of Padding & Margin display
Raw
bricks-builder-padding-margin-display
/* --- Margin / Padding area --- */
div[data-controlKey='_margin'] ul.dimensions,
div[data-controlKey='_padding'] ul.dimensions,
div[data-controlKey='_innerContainerMargin'] ul.dimensions,
div[data-controlKey='_innerContainerPadding'] ul.dimensions,
div[data-controlKey='menuMargin'] ul.dimensions,
div[data-controlKey='menuPadding'] ul.dimensions,
div[data-controlKey='subMenuPadding'] ul.dimensions,
div[data-controlKey='mobileMenuPadding'] ul.dimensions,
div[data-controlKey='mobileSubMenuPadding'] ul.dimensions,
div[data-controlKey='mobileMenuToggleClosePosition'] ul.dimensions,
div[data-controlKey='titleMargin'] ul.dimensions,
div[data-controlKey='titlePadding'] ul.dimensions,
div[data-controlKey='contentMargin'] ul.dimensions,
div[data-controlKey='contentPadding'] ul.dimensions,
div[data-controlKey='fieldMargin'] ul.dimensions,
div[data-controlKey='fieldPadding'] ul.dimensions,
div[data-controlKey='submitButtonMargin'] ul.dimensions,
div[data-controlKey='iconMargin'] ul.dimensions,
div[data-controlKey='iconPadding'] ul.dimensions,
div[data-controlKey='itemMargin'] ul.dimensions,
div[data-controlKey='itemPadding'] ul.dimensions,
div[data-controlKey='highlightLabelPadding'] ul.dimensions,
div[data-controlKey='highlightContentPadding'] ul.dimensions,
div[data-controlKey='metaMargin'] ul.dimensions,
li[data-controlKey='gutter'] ul.dimensions,
div[data-controlKey='imageMargin'] ul.dimensions,
div[data-controlKey='slidePadding'] ul.dimensions,
div[data-controlKey='paginationSpacing'] ul.dimensions,
div[data-controlKey='overlayMargin'] ul.dimensions,
div[data-controlKey='overlayPadding'] ul.dimensions,
li[data-controlKey='margin'] ul.dimensions,
div[data-controlKey='postsPadding'] ul.dimensions {
margin-top: 8px;
display: grid;
grid-template-columns: repeat(4, 50px);
grid-template-rows: repeat(3, 1fr);
grid-template-areas:
'. top top .'
'left left right right'
'. bottom bottom .';
justify-content: end;
justify-items: center;
gap: 2px;
}
div[data-control='dimensions'] ul.dimensions label {
display: none;
}
div[data-controlKey='_margin'] ul li .vertical,
div[data-controlKey='_padding'] ul li .vertical,
div[data-controlKey='_innerContainerMargin'] ul li .vertical,
div[data-controlKey='_innerContainerPadding'] ul li .vertical,
div[data-controlKey='menuMargin'] ul li .vertical,
div[data-controlKey='menuPadding'] ul li .vertical,
div[data-controlKey='subMenuPadding'] ul li .vertical,
div[data-controlKey='mobileMenuPadding'] ul li .vertical,
div[data-controlKey='mobileSubMenuPadding'] ul li .vertical,
div[data-controlKey='mobileMenuToggleClosePosition'] ul li .vertical,
div[data-controlKey='titleMargin'] ul li .vertical,
div[data-controlKey='titlePadding'] ul li .vertical,
div[data-controlKey='contentMargin'] ul li .vertical,
div[data-controlKey='contentPadding'] ul li .vertical,
div[data-controlKey='fieldMargin'] ul li .vertical,
div[data-controlKey='fieldPadding'] ul li .vertical,
div[data-controlKey='submitButtonMargin'] ul li .vertical,
div[data-controlKey='iconMargin'] ul li .vertical,
div[data-controlKey='iconPadding'] ul li .vertical,
div[data-controlKey='itemMargin'] ul li .vertical,
div[data-controlKey='itemPadding'] ul li .vertical,
div[data-controlKey='highlightLabelPadding'] ul li .vertical,
div[data-controlKey='highlightContentPadding'] ul li .vertical,
div[data-controlKey='metaMargin'] ul li .vertical,
li[data-controlKey='gutter'] ul li .vertical,
div[data-controlKey='imageMargin'] ul li .vertical,
div[data-controlKey='slidePadding'] ul li .vertical,
div[data-controlKey='paginationSpacing'] ul li .vertical,
div[data-controlKey='overlayMargin'] ul li .vertical,
div[data-controlKey='overlayPadding'] ul li .vertical,
li[data-controlKey='margin'] ul li .vertical,
div[data-controlKey='postsPadding'] ul li .vertical {
display: flex;
align-items: center;
}
div[data-control='number'] .number {
width: 60px;
}
div[data-control='dimensions'] ul.dimensions li input {
border-bottom-left-radius: var(--builder-border-radius);
border-top-left-radius: var(--builder-border-radius);
}
div[data-control='dimensions'] ul.dimensions li:last-child .number input {
border-bottom-right-radius: 0 !important;
border-top-right-radius: 0 !important;
border-top-left-radius: var(--builder-border-radius) !important;
border-bottom-left-radius: var(--builder-border-radius) !important;
}
div[data-control='dimensions'] ul.dimensions li:last-child input {
border-bottom-right-radius: var(--builder-border-radius) !important;
border-top-right-radius: var(--builder-border-radius) !important;
}
div[data-control='number'].vertical .unit input {
width: 40px;
background-color: var(--builder-bg-2) !important;
border-bottom-left-radius: 0 !important;
border-top-left-radius: 0 !important;
height: var(--builder-input-height);
line-height: var(--builder-input-height);
border-radius: var(--builder-border-radius);
}
div[data-controlKey='_margin'] ul li,
div[data-controlKey='_padding'] ul li,
div[data-controlKey='_innerContainerMargin'] ul li,
div[data-controlKey='_innerContainerPadding'] ul li,
div[data-controlKey='menuMargin'] ul li,
div[data-controlKey='menuPadding'] ul li,
div[data-controlKey='subMenuPadding'] ul li,
div[data-controlKey='mobileMenuPadding'] ul li,
div[data-controlKey='mobileSubMenuPadding'] ul li,
div[data-controlKey='mobileMenuToggleClosePosition'] ul li,
div[data-controlKey='titleMargin'] ul li,
div[data-controlKey='titlePadding'] ul li,
div[data-controlKey='contentMargin'] ul li,
div[data-controlKey='contentPadding'] ul li,
div[data-controlKey='fieldMargin'] ul li,
div[data-controlKey='fieldPadding'] ul li,
div[data-controlKey='submitButtonMargin'] ul li,
div[data-controlKey='iconMargin'] ul li,
div[data-controlKey='iconPadding'] ul li,
div[data-controlKey='itemMargin'] ul li,
div[data-controlKey='itemPadding'] ul li,
div[data-controlKey='highlightLabelPadding'] ul li,
div[data-controlKey='highlightContentPadding'] ul li,
div[data-controlKey='metaMargin'] ul li,
li[data-controlKey='gutter'] ul li,
div[data-controlKey='imageMargin'] ul li,
div[data-controlKey='slidePadding'] ul li,
div[data-controlKey='paginationSpacing'] ul li,
div[data-controlKey='overlayMargin'] ul li,
div[data-controlKey='overlayPadding'] ul li,
li[data-controlKey='margin'] ul li,
div[data-controlKey='postsPadding'] ul li {
max-width: 100px;
}
div[data-controlKey='_margin'] ul li:nth-child(1),
div[data-controlKey='_padding'] ul li:nth-child(1),
div[data-controlKey='_innerContainerMargin'] ul li:nth-child(1),
div[data-controlKey='_innerContainerPadding'] ul li:nth-child(1),
div[data-controlKey='menuMargin'] ul li:nth-child(1),
div[data-controlKey='menuPadding'] ul li:nth-child(1),
div[data-controlKey='subMenuPadding'] ul li:nth-child(1),
div[data-controlKey='mobileMenuPadding'] ul li:nth-child(1),
div[data-controlKey='mobileSubMenuPadding'] ul li:nth-child(1),
div[data-controlKey='mobileMenuToggleClosePosition'] ul li:nth-child(1),
div[data-controlKey='titleMargin'] ul li:nth-child(1),
div[data-controlKey='titlePadding'] ul li:nth-child(1),
div[data-controlKey='contentMargin'] ul li:nth-child(1),
div[data-controlKey='contentPadding'] ul li:nth-child(1),
div[data-controlKey='fieldMargin'] ul li:nth-child(1),
div[data-controlKey='fieldPadding'] ul li:nth-child(1),
div[data-controlKey='submitButtonMargin'] ul li:nth-child(1),
div[data-controlKey='iconMargin'] ul li:nth-child(1),
div[data-controlKey='iconPadding'] ul li:nth-child(1),
div[data-controlKey='itemMargin'] ul li:nth-child(1),
div[data-controlKey='itemPadding'] ul li:nth-child(1),
div[data-controlKey='highlightLabelPadding'] ul li:nth-child(1),
div[data-controlKey='highlightContentPadding'] ul li:nth-child(1),
div[data-controlKey='metaMargin'] ul li:nth-child(1),
li[data-controlKey='gutter'] ul li:nth-child(1),
div[data-controlKey='imageMargin'] ul li:nth-child(1),
div[data-controlKey='slidePadding'] ul li:nth-child(1),
div[data-controlKey='paginationSpacing'] ul li:nth-child(1),
div[data-controlKey='overlayMargin'] ul li:nth-child(1),
div[data-controlKey='overlayPadding'] ul li:nth-child(1),
li[data-controlKey='margin'] ul li:nth-child(1),
div[data-controlKey='postsPadding'] ul li:nth-child(1) {
grid-area: top;
}
div[data-controlKey='_margin'] ul li:nth-child(2),
div[data-controlKey='_padding'] ul li:nth-child(2),
div[data-controlKey='_innerContainerMargin'] ul li:nth-child(2),
div[data-controlKey='_innerContainerPadding'] ul li:nth-child(2),
div[data-controlKey='menuMargin'] ul li:nth-child(2),
div[data-controlKey='menuPadding'] ul li:nth-child(2),
div[data-controlKey='subMenuPadding'] ul li:nth-child(2),
div[data-controlKey='mobileMenuPadding'] ul li:nth-child(2),
div[data-controlKey='mobileSubMenuPadding'] ul li:nth-child(2),
div[data-controlKey='mobileMenuToggleClosePosition'] ul li:nth-child(2),
div[data-controlKey='titleMargin'] ul li:nth-child(2),
div[data-controlKey='titlePadding'] ul li:nth-child(2),
div[data-controlKey='contentMargin'] ul li:nth-child(2),
div[data-controlKey='contentPadding'] ul li:nth-child(2),
div[data-controlKey='fieldMargin'] ul li:nth-child(2),
div[data-controlKey='fieldPadding'] ul li:nth-child(2),
div[data-controlKey='submitButtonMargin'] ul li:nth-child(2),
div[data-controlKey='iconMargin'] ul li:nth-child(2),
div[data-controlKey='iconPadding'] ul li:nth-child(2),
div[data-controlKey='itemMargin'] ul li:nth-child(2),
div[data-controlKey='itemPadding'] ul li:nth-child(2),
div[data-controlKey='highlightLabelPadding'] ul li:nth-child(2),
div[data-controlKey='highlightContentPadding'] ul li:nth-child(2),
div[data-controlKey='metaMargin'] ul li:nth-child(2),
li[data-controlKey='gutter'] ul li:nth-child(2),
div[data-controlKey='imageMargin'] ul li:nth-child(2),
div[data-controlKey='slidePadding'] ul li:nth-child(2),
div[data-controlKey='paginationSpacing'] ul li:nth-child(2),
div[data-controlKey='overlayMargin'] ul li:nth-child(2),
div[data-controlKey='overlayPadding'] ul li:nth-child(2),
li[data-controlKey='margin'] ul li:nth-child(2),
div[data-controlKey='postsPadding'] ul li:nth-child(2) {
grid-area: right;
}
div[data-controlKey='_margin'] ul li:nth-child(3),
div[data-controlKey='_padding'] ul li:nth-child(3),
div[data-controlKey='_innerContainerMargin'] ul li:nth-child(3),
div[data-controlKey='_innerContainerPadding'] ul li:nth-child(3),
div[data-controlKey='menuMargin'] ul li:nth-child(3),
div[data-controlKey='menuPadding'] ul li:nth-child(3),
div[data-controlKey='subMenuPadding'] ul li:nth-child(3),
div[data-controlKey='mobileMenuPadding'] ul li:nth-child(3),
div[data-controlKey='mobileSubMenuPadding'] ul li:nth-child(3),
div[data-controlKey='mobileMenuToggleClosePosition'] ul li:nth-child(3),
div[data-controlKey='titleMargin'] ul li:nth-child(3),
div[data-controlKey='titlePadding'] ul li:nth-child(3),
div[data-controlKey='contentMargin'] ul li:nth-child(3),
div[data-controlKey='contentPadding'] ul li:nth-child(3),
div[data-controlKey='fieldMargin'] ul li:nth-child(3),
div[data-controlKey='fieldPadding'] ul li:nth-child(3),
div[data-controlKey='submitButtonMargin'] ul li:nth-child(3),
div[data-controlKey='iconMargin'] ul li:nth-child(3),
div[data-controlKey='iconPadding'] ul li:nth-child(3),
div[data-controlKey='itemMargin'] ul li:nth-child(3),
div[data-controlKey='itemPadding'] ul li:nth-child(3),
div[data-controlKey='highlightLabelPadding'] ul li:nth-child(3),
div[data-controlKey='highlightContentPadding'] ul li:nth-child(3),
div[data-controlKey='metaMargin'] ul li:nth-child(3),
li[data-controlKey='gutter'] ul li:nth-child(3),
div[data-controlKey='imageMargin'] ul li:nth-child(3),
div[data-controlKey='slidePadding'] ul li:nth-child(3),
div[data-controlKey='paginationSpacing'] ul li:nth-child(3),
div[data-controlKey='overlayMargin'] ul li:nth-child(3),
div[data-controlKey='overlayPadding'] ul li:nth-child(3),
li[data-controlKey='margin'] ul li:nth-child(3),
div[data-controlKey='postsPadding'] ul li:nth-child(3) {
grid-area: bottom;
}
div[data-controlKey='_margin'] ul li:nth-child(4),
div[data-controlKey='_padding'] ul li:nth-child(4),
div[data-controlKey='_innerContainerMargin'] ul li:nth-child(4),
div[data-controlKey='_innerContainerPadding'] ul li:nth-child(4),
div[data-controlKey='menuMargin'] ul li:nth-child(4),
div[data-controlKey='menuPadding'] ul li:nth-child(4),
div[data-controlKey='subMenuPadding'] ul li:nth-child(4),
div[data-controlKey='mobileMenuPadding'] ul li:nth-child(4),
div[data-controlKey='mobileSubMenuPadding'] ul li:nth-child(4),
div[data-controlKey='mobileMenuToggleClosePosition'] ul li:nth-child(4),
div[data-controlKey='titleMargin'] ul li:nth-child(4),
div[data-controlKey='titlePadding'] ul li:nth-child(4),
div[data-controlKey='contentMargin'] ul li:nth-child(4),
div[data-controlKey='contentPadding'] ul li:nth-child(4),
div[data-controlKey='fieldMargin'] ul li:nth-child(4),
div[data-controlKey='fieldPadding'] ul li:nth-child(4),
div[data-controlKey='submitButtonMargin'] ul li:nth-child(4),
div[data-controlKey='iconMargin'] ul li:nth-child(4),
div[data-controlKey='iconPadding'] ul li:nth-child(4),
div[data-controlKey='itemMargin'] ul li:nth-child(4),
div[data-controlKey='itemPadding'] ul li:nth-child(4),
div[data-controlKey='highlightLabelPadding'] ul li:nth-child(4),
div[data-controlKey='highlightContentPadding'] ul li:nth-child(4),
div[data-controlKey='metaMargin'] ul li:nth-child(4),
li[data-controlKey='gutter'] ul li:nth-child(4),
div[data-controlKey='imageMargin'] ul li:nth-child(4),
div[data-controlKey='slidePadding'] ul li:nth-child(4),
div[data-controlKey='paginationSpacing'] ul li:nth-child(4),
div[data-controlKey='overlayMargin'] ul li:nth-child(4),
div[data-controlKey='overlayPadding'] ul li:nth-child(4),
li[data-controlKey='margin'] ul li:nth-child(4),
div[data-controlKey='postsPadding'] ul li:nth-child(4) {
grid-area: left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment