@genexus/mercury 1.0.0-beta.2 → 1.0.0

package/dist/assets/scss/_helpers.scss

@@ -4,10 +4,31 @@
 // copied by hand, since scss-bundle does not works with @use, which is
 // the actual way for including sass modules, that Mercury is using.
 
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+// copied from "src/base/components/_grid.scss"
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+@mixin grid-cell-remove-padding() {
+  // we should redefine '--grid-cell-padding-inline' here because when a control
+  // is inside a a tabular-grid-cell the cell padding-inline value is required to
+  // be applied on the control padding-inline.
+  padding-block: 0;
+  padding-inline: 0;
+}
+
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 // copied from "src/base/_common.scss"
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
+@mixin focus-visible() {
+  outline: var(--border-width-focus) solid var(--color-border-primary-focused);
+  outline-offset: calc(var(--size-2) * -1);
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+// copied from "src/base/_control.scss"
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
 @mixin control-remove-border() {
   // This resets the border applied
   // (for controls inside the property grid)
@@ -16,28 +37,11 @@
   --control-border-radius: 0;
 }
 
-@mixin grid-cell-remove-padding() {
-  // we should redefine '--grid-cell-padding-inline' here because when a control
-  // is inside a a tabular-grid-cell the cell padding-inline value is required to
-  // be applied on the control padding-inline.
-  padding-block: 0;
-  padding-inline: 0;
-}
-
 @mixin grid-cell-padding-inline-block() {
   padding-block: var(--grid-cell-padding-block);
   padding-inline: var(--grid-cell-padding-inline);
 }
 
-@mixin focus-outline() {
-  outline: var(--focus-outline-width) var(--focus-outline-style)
-    var(--focus-outline-color);
-  outline-offset: var(--focus-outline-offset);
-}
-@mixin focus-border() {
-  border-color: var(--borders-un-border-color-focused);
-}
-
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 // copied from "src/components/tabular-grid/_helpers.scss"
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -50,8 +54,6 @@
 @mixin cell-node-type-element() {
   @include control-remove-border();
   @include grid-cell-remove-padding();
-  padding-block: 0;
-  padding-inline: 0;
   --control-padding-inline: var(--grid-cell-padding-inline);
   // to stretch the control
   display: grid;
@@ -60,9 +62,8 @@
 }
 
 @mixin cell-node-type-element--hover() {
-  outline: var(--focus-outline-width) var(--focus-outline-style)
-    var(--control-border-color-hover);
-  outline-offset: var(--focus-outline-offset);
+  outline: var(--border-width-focus) solid var(--color-border-primary-focused);
+  outline-offset: calc(var(--size-2) * -1);
 }
 
 // cell alignment block