Skip to content

Commit

Permalink
Work for #7019: fix question's margins and paddings (#7110)
Browse files Browse the repository at this point in the history
* Work for #7019: fix question's margins and paddings

* Update markup etalons

* Update etalons
  • Loading branch information
dk981234 committed Oct 12, 2023
1 parent aabfe16 commit 0ed3ee8
Show file tree
Hide file tree
Showing 94 changed files with 361 additions and 382 deletions.
9 changes: 7 additions & 2 deletions src/defaultCss/defaultV2Css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export var defaultV2Css = {
header: "sd-panel__header sd-element__header sd-element__header--location-top",
collapsed: "sd-element--collapsed",
expanded: "sd-element--expanded",
nested: "sd-element--nested",
nested: "sd-element--nested sd-element--nested-with-borders",
invisible: "sd-element--invisible",
navigationButton: "",
compact: "sd-element--with-frame sd-element--compact"
Expand All @@ -101,6 +101,7 @@ export var defaultV2Css = {
progressContainer: "sd-paneldynamic__progress-container",
progress: "sd-progress",
progressBar: "sd-progress__bar",
nested: "sd-element--nested sd-element--nested-with-borders",
progressText: "sd-paneldynamic__progress-text",
separator: "sd-paneldynamic__separator",
panelWrapper: "sd-paneldynamic__panel-wrapper",
Expand Down Expand Up @@ -169,6 +170,9 @@ export var defaultV2Css = {
contentLeft: "sd-question__content--left",
titleNumInline: "sd-element__title--num-inline",
titleLeftRoot: "sd-question--left",
titleTopRoot: "sd-question--title-top",
descriptionUnderInputRoot: "sd-question--description-under-input",
titleBottomRoot: "sd-question--title-bottom",
titleOnAnswer: "sd-question__title--answer",
titleEmpty: "sd-question__title--empty",
titleOnError: "sd-question__title--error",
Expand All @@ -191,6 +195,8 @@ export var defaultV2Css = {
commentArea: "sd-question__comment-area",
formGroup: "sd-question__form-group",
hasError: "sd-question--error",
hasErrorTop: "sd-question--error-top",
hasErrorBottom: "sd-question--error-bottom",
collapsed: "sd-element--collapsed",
expanded: "sd-element--expanded",
nested: "sd-element--nested",
Expand All @@ -216,7 +222,6 @@ export var defaultV2Css = {
root: "sd-question__erbox",
icon: "",
item: "",
tooltip: "sd-question__erbox--tooltip",
outsideQuestion: "sd-question__erbox--outside-question",
aboveQuestion: "sd-question__erbox--above-question",
belowQuestion: "sd-question__erbox--below-question",
Expand Down
6 changes: 5 additions & 1 deletion src/defaultV2-theme/blocks/sd-action.scss
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,11 @@ svg.sd-action--icon {
&.sd-action--negative {
background-color: $red-light;

&.sd-action--icon {}
&.sd-action--icon {
use {
fill: $red;
}
}
}

&:active {
Expand Down
40 changes: 40 additions & 0 deletions src/defaultV2-theme/blocks/sd-collapsed-element.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
.sd-element--expanded,
.sd-element--collapsed {
&>.sd-element__header {
cursor: pointer;
}
}

.sd-element--collapsed {
&>.sd-element__header {
padding: calcSize(0) var(--sd-base-padding);
box-sizing: border-box;
background-color: $background;
margin-left: calc(-1 * var(--sd-base-padding));
width: calc(100% + 2 * var(--sd-base-padding));
}

&.sd-element--with-frame {
padding-top: 0;
padding-bottom: 0;

&>.sd-element__header {
padding-top: calcSize(2);
padding-bottom: calcSize(2);
border-radius: $panel-corner-radius;
}
}

&>.sd-element__header:focus-within,
&>.sd-element__header:hover {
background-color: $background-dim-light;
}

&.sd-element--nested {

&>.sd-element__header:hover,
&>.sd-element__header:focus-within {
box-shadow: 0 calcSize(-2) 0 0 $background-dim-light, 0 calcSize(2) 0 $background-dim-light;
}
}
}
108 changes: 108 additions & 0 deletions src/defaultV2-theme/blocks/sd-complex-element.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
.sd-element--complex.sd-element--with-frame {
padding-top: 0;
}

.sd-element--complex.sd-element--nested-with-borders>.sd-question__erbox--outside-question,
.sd-element--complex.sd-element--with-frame>.sd-question__erbox--outside-question {
margin-top: 0;
margin-bottom: 0;
}

.sd-element--complex>.sd-element__header {
&:after {
content: " ";
display: block;
position: relative;
height: 1px;
background: $border-light;
bottom: 0;
}
}

.sd-element--complex.sd-element--with-frame>.sd-element__header {
padding-top: var(--sd-base-vertical-padding);
padding-bottom: var(--sd-base-vertical-padding);
}

.sd-element--collapsed.sd-element--complex>.sd-element__header {
padding-top: calcSize(2);
padding-bottom: calcSize(2);
}

.sd-element--nested.sd-element--complex {
&>.sd-element__header--location-top {
&:after {
bottom: calc(-0.5 * var(--sd-base-vertical-padding));
}
}
}

.sd-element--nested-with-borders {
border: 1px solid $border-light;
border-radius: calc(var(--sjs-corner-radius, 4px) - 4px);
box-sizing: border-box;
padding-left: var(--sd-base-padding);
padding-right: var(--sd-base-padding);

&>.sd-element__header--location-top {
padding-top: calc(0.5 * var(--sd-base-vertical-padding));
padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
}

&>.sd-question__erbox--outside-question {
margin-left: calc(-1 * var(--sd-base-padding));
margin-right: calc(-1 * var(--sd-base-padding));
width: calc(100% + 2 * var(--sd-base-padding));
}

&>.sd-question__erbox--below-question {
bottom: 0;
margin-top: 0;
}

&.sd-element--collapsed {
&>.sd-element__header--location-top {

&:hover,
&:focus-within {
box-shadow: none;
}
}
}
}

.sd-element--nested-with-borders,
.sd-element--complex.sd-element--with-frame {
&>.sd-element__header--location-top {
&:after {
bottom: calc(-1 * var(--sd-base-vertical-padding));
left: calc(-1 * var(--sd-base-padding));
width: calc(100% + 2 * var(--sd-base-padding));
}
}
}

.sd-element--collapsed.sd-element--complex>.sd-element__header--location-top {
&:after {
display: none;
}
}

.sd-question--empty.sd-question--complex {
&>.sd-question__content {
padding-top: 0;
padding-bottom: 0;
}

&>.sd-question__content:first-child {
padding-top: var(--sd-base-padding);
}

&>.sd-question__header--location-top {
padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));

&:after {
display: none;
}
}
}
6 changes: 3 additions & 3 deletions src/defaultV2-theme/blocks/sd-description.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
}

.sd-description.sd-question__description--under-input {
padding-top: calcSize(2);
padding-top: calc(0.375 * var(--sd-base-vertical-padding));
}

.sd-element__header .sd-description {
margin-top: calcSize(0.5);
}
margin-top: calc(0.25 * var(--sd-base-vertical-padding) - 0.5 * #{$base-unit});
}
160 changes: 0 additions & 160 deletions src/defaultV2-theme/blocks/sd-element.scss
Original file line number Diff line number Diff line change
Expand Up @@ -129,166 +129,6 @@
padding-bottom: var(--sd-base-padding);
background: $question-background;
box-shadow: $shadow-small;

&.sd-question--paneldynamic {
padding-bottom: 0;

&>.sd-question__erbox--below-question {
bottom: 0;
margin-top: 0;
}
}
}

//complex (panel, paneldynamic, matrixes) styles
.sd-element--complex {
&.sd-element--complex>.sd-question__erbox--above-question {
margin-top: 0;
margin-bottom: 0;
}

&>.sd-element__header--location-top {
margin-top: 0;

&:after {
content: " ";
display: block;
position: relative;
height: 1px;
background: $border-light;
bottom: 0;
}
}

&.sd-element--with-frame {
padding-top: 0;

&>.sd-element__header--location-top {
margin-top: 0;
padding-top: var(--sd-base-vertical-padding);
padding-bottom: var(--sd-base-vertical-padding);

&:after {
bottom: calc(-1 * var(--sd-base-vertical-padding));
left: calc(-1 * var(--sd-base-padding));
width: calc(100% + 2 * var(--sd-base-padding));
}
}
}
}

//collapsed styles
.sd-element--expanded,
.sd-element--collapsed {
&>.sd-element__header {
cursor: pointer;
}
}

.sd-element--collapsed {
&>.sd-element__header {
padding: calcSize(0) var(--sd-base-padding);
box-sizing: border-box;
background-color: $background;
}

&.sd-element--complex>.sd-element__header--location-top {
&:after {
display: none;
}
}

&>.sd-element__header--location-top {
margin-top: 0;
}

&.sd-element--with-frame {
padding-top: 0;
padding-bottom: 0;

&>.sd-element__header {
padding-top: calcSize(2);
padding-bottom: calcSize(2);
border-radius: $panel-corner-radius;
}
}

&>.sd-element__header:focus-within,
&>.sd-element__header:hover {
background-color: $background-dim-light;
}
}

.sd-element--collapsed>.sd-element__header {
margin-left: calc(-1 * var(--sd-base-padding));
width: calc(100% + 2 * var(--sd-base-padding));
}

//nested styles
.sd-element--nested {
&.sd-element--complex {
&>.sd-element__header--location-top {
&:after {
bottom: calc(-0.5 * var(--sd-base-vertical-padding));
}
}
}

&.sd-element--collapsed {

&>.sd-element__header:hover,
&>.sd-element__header:focus-within {
box-shadow: 0 calcSize(-2) 0 0 $background-dim-light, 0 calcSize(2) 0 $background-dim-light;
}
}

&.sd-panel,
&.sd-question--paneldynamic {
border: 1px solid $border-light;
border-radius: calc(var(--sjs-corner-radius, 4px) - 4px);
box-sizing: border-box;
padding-left: var(--sd-base-padding);
padding-right: var(--sd-base-padding);

&>.sd-element__header--location-top {
padding-top: calc(0.5 * var(--sd-base-vertical-padding));
padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));

&:after {
left: calc(-1 * var(--sd-base-padding));
width: calc(100% + 2 * var(--sd-base-padding));
bottom: calc(-0.5 * var(--sd-base-vertical-padding));
}
}

&>.sd-question__erbox--outside-question {
margin-left: calc(-1 * var(--sd-base-padding));
margin-right: calc(-1 * var(--sd-base-padding));
width: calc(100% + 2 * var(--sd-base-padding));
}

&>.sd-question__erbox--below-question {
bottom: 0;
margin-top: 0;
}

&.sd-element--collapsed {
&>.sd-element__header--location-top {
&:after {
display: none;
}

&:hover,
&:focus-within {
box-shadow: none;
}
}
}
}

&>.sd-panel__content {
padding-bottom: var(--sd-base-padding);
}
}

//compact styles
Expand Down

0 comments on commit 0ed3ee8

Please sign in to comment.