Work for #7019: fix question's margins and paddings (#7110)

* Work for #7019: fix question's margins and paddings * Update markup etalons * Update etalons
surveyjs · Oct 12, 2023 · 0ed3ee8 · 0ed3ee8
1 parent aabfe16
commit 0ed3ee8
Show file tree

Hide file tree

Showing 94 changed files with 361 additions and 382 deletions.
diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -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"
@@ -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",
@@ -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",
@@ -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",
@@ -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",

diff --git a/src/defaultV2-theme/blocks/sd-action.scss b/src/defaultV2-theme/blocks/sd-action.scss
@@ -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 {

diff --git a/src/defaultV2-theme/blocks/sd-collapsed-element.scss b/src/defaultV2-theme/blocks/sd-collapsed-element.scss
@@ -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;
+    }
+  }
+}
diff --git a/src/defaultV2-theme/blocks/sd-complex-element.scss b/src/defaultV2-theme/blocks/sd-complex-element.scss
@@ -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;
+    }
+  }
+}
diff --git a/src/defaultV2-theme/blocks/sd-description.scss b/src/defaultV2-theme/blocks/sd-description.scss
@@ -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});
+}
diff --git a/src/defaultV2-theme/blocks/sd-element.scss b/src/defaultV2-theme/blocks/sd-element.scss
@@ -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