Merge pull request #1908 from giovanniTramonto/universal-box-sizing-css

set universal css box-sizing to border-box

src/fontra/client/core/html-utils.js

@@ -15,6 +15,7 @@ export class SimpleElement extends HTMLElement {
   }
 
   _attachStyles() {
+    this._appendStyleSheetLink("/css/shared.css");
     if (this.constructor.styles) {
       this._appendStyle(this.constructor.styles);
     }
@@ -24,6 +25,10 @@ export class SimpleElement extends HTMLElement {
     addStyleSheet(cssText, this.shadowRoot);
   }
 
+  _appendStyleSheetLink(href) {
+    addStyleSheetLink(href, this.shadowRoot);
+  }
+
   appendStyle(cssText) {
     this._appendStyle(cssText);
   }
@@ -147,8 +152,14 @@ export function addStyleSheet(cssText, element = null) {
   if (!element) {
     element = document.head;
   }
-  const styleElement = style({}, [cssText]);
-  element.appendChild(styleElement);
+  element.appendChild(style({}, [cssText]));
+}
+
+export function addStyleSheetLink(href, element = null) {
+  if (!element) {
+    element = document.head;
+  }
+  element.appendChild(link({ href, rel: "stylesheet" }));
 }
 
 // Convenience shortcuts

src/fontra/client/css/core.css

@@ -115,7 +115,6 @@ body {
   height: 10rem;
   margin-top: -5rem;
   margin-left: -5rem;
-  box-sizing: border-box;
   border-radius: 50%;
   border: 0.6rem solid #fff8;
   border-top-color: #0005;
@@ -126,7 +125,6 @@ body {
 input[type="text"],
 input[type="number"],
 input[type="password"] {
-  box-sizing: border-box;
   background-color: var(--text-input-background-color);
   color: var(--text-input-foreground-color);
   border-radius: 0.25em;

src/fontra/client/css/shared.css

@@ -0,0 +1,5 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}

src/fontra/client/web-components/glyph-search-field.js

@@ -23,7 +23,6 @@ export class GlyphSearchField extends SimpleElement {
       resize: none;
       width: 100%;
       height: 1.8em;
-      box-sizing: border-box;
       padding: 0.2em 0.8em;
     }
   `;

src/fontra/client/web-components/glyph-search-list.js

@@ -17,7 +17,6 @@ export class GlyphSearchList extends SimpleElement {
       display: grid;
       gap: 1em;
       grid-template-rows: auto 1fr;
-      box-sizing: border-box;
       overflow: hidden;
       align-content: start;
     }

src/fontra/client/web-components/modal-dialog.js

@@ -47,7 +47,6 @@ export class ModalDialog extends SimpleElement {
       height: 100%;
       max-width: 100%;
       max-height: 100%;
-      box-sizing: border-box;
     }
 
     dialog::backdrop {

src/fontra/client/web-components/ui-accordion.js

@@ -13,15 +13,13 @@ export class Accordion extends UnlitElement {
     text-wrap: wrap;
     width: 100%;
     height: 100%;
-    box-sizing: border-box;
   }
 
   .ui-accordion-item {
     display: grid;
     grid-template-rows: auto 1fr;
     gap: 0.2em;
     min-height: 0;
-    box-sizing: border-box;
   }
 
   .ui-accordion-item[hidden] {
@@ -35,7 +33,6 @@ export class Accordion extends UnlitElement {
     align-items: center;
     font-weight: bold;
     cursor: pointer;
-    box-sizing: border-box;
   }
 
   .ui-accordion-item .open-close-icon {
@@ -54,7 +51,6 @@ export class Accordion extends UnlitElement {
 
   .ui-accordion-item-content {
     display: block;
-    box-sizing: border-box;
     overflow: hidden;
   }
   `;

src/fontra/client/web-components/ui-form.js

@@ -20,7 +20,6 @@ export class Form extends SimpleElement {
       display: grid;
       align-items: center;
       grid-template-columns: var(--label-column-width) auto;
-      box-sizing: border-box;
       gap: 0.35rem 0.35rem;
       margin: 0em;
       padding: 0em;
@@ -64,7 +63,6 @@ export class Form extends SimpleElement {
     }
 
     input {
-      box-sizing: border-box;
       background-color: var(--text-input-background-color);
       color: var(--text-input-foreground-color);
       border-radius: 0.25em;
@@ -75,10 +73,6 @@ export class Form extends SimpleElement {
       font-size: 100%;
     }
 
-    .ui-form-value {
-      box-sizing: border-box;
-    }
-
     .ui-form-value input {
       width: min(100%, 9.5em);
       height: 1.6em;

src/fontra/client/web-components/ui-list.js

@@ -23,14 +23,12 @@ export class UIList extends UnlitElement {
       gap: 0.2em;
       min-height: 0;
       min-width: 0;
-      box-sizing: border-box;
     }
 
     .container {
       overflow: auto;
       height: 100%;
       width: 100%;
-      box-sizing: border-box;
       border: solid 1px var(--border-color);
       background-color: var(--row-background-color);
     }
@@ -54,15 +52,13 @@ export class UIList extends UnlitElement {
       overflow: auto;
       height: 100%;
       width: 100%;
-      box-sizing: border-box;
       scrollbar-width: none;  /* hide scrollbar in FireFox */
     }
 
     .header {
       display: flex;
       width: min-content;
       min-width: 100%;
-      box-sizing: border-box;
       padding: 0.15em;
       padding-left: 0.5em;
       padding-right: 0.5em;
@@ -73,7 +69,6 @@ export class UIList extends UnlitElement {
       display: flex;
       width: min-content;
       min-width: 100%;
-      box-sizing: border-box;
       border-top: solid 1px var(--row-border-color);
       color: var(--row-foreground-color);
       background-color: var(--row-background-color);
@@ -92,6 +87,7 @@ export class UIList extends UnlitElement {
       overflow: hidden;
       text-overflow: ellipsis;
       padding: 0 0.2em 0 0.1em;
+      box-sizing: content-box; /* FIXME: use border-box */
     }
 
     .list-cell.editing,

src/fontra/filesystem/landing.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title>Fontra</title>
+    <link href="/css/shared.css" rel="stylesheet" />
     <link href="/css/core.css" rel="stylesheet" />
     <link href="/filesystem/landing.css" rel="stylesheet" />
     <script type="module" src="/core/theme-settings.js"></script>

src/fontra/views/applicationsettings/applicationsettings.html

@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link href="/css/shared.css" rel="stylesheet" />
     <link href="/css/core.css" rel="stylesheet" />
     <link href="/css/tooltip.css" rel="stylesheet" />
     <title>Fontra Application Settings</title>
@@ -17,7 +18,6 @@
         display: grid;
         grid-template-columns: auto 1fr;
         padding: 0em;
-        box-sizing: border-box;
         gap: 0em;
         width: 100vw;
         height: 100vh;

src/fontra/views/applicationsettings/panel-shortcuts.js

@@ -241,7 +241,6 @@ addStyleSheet(`
   .fontra-ui-shortcuts-panel-input {
     min-width: ${shortcutsPanelInputWidth};
     text-align: center;
-    box-sizing: border-box;
     background-color: var(--text-input-background-color);
     color: var(--text-input-foreground-color);
     border-radius: 0.25em;

src/fontra/views/editor/editor.css

@@ -189,13 +189,10 @@ body {
   position: absolute;
   display: grid;
   grid-template-columns: 3.5em 1fr 3.5em;
-
-  box-sizing: border-box;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-
   pointer-events: none;
 }
 
@@ -242,19 +239,14 @@ body {
 .sidebar-tab {
   display: flex;
   align-items: center;
-
   z-index: 1; /* below the shadow box but above the tools*/
-
-  box-sizing: border-box;
   width: var(--sidebar-tab-width);
   height: 2.8em;
   background-color: var(--ui-element-background-color);
   box-shadow: 0px 3px 8px #0006;
-
   cursor: pointer;
   pointer-events: auto;
   user-select: none;
-
   animation-duration: 120ms;
   animation-direction: alternate;
   animation-timing-function: ease-out;
@@ -303,8 +295,6 @@ body {
 
 .sidebar-content {
   display: none;
-
-  box-sizing: border-box;
   height: 100%;
   width: 100%;
 }
@@ -426,6 +416,7 @@ body {
   padding: 0.1rem;
   transition: 0.15s;
   display: inline-grid;
+  box-sizing: content-box; /* FIXME: use border-box */
 }
 
 .tool-button:first-child,

src/fontra/views/editor/editor.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title>Fontra</title>
+    <link href="/css/shared.css" rel="stylesheet" />
     <link href="/css/core.css" rel="stylesheet" />
     <link href="/editor/editor.css" rel="stylesheet" />
     <link href="/css/tooltip.css" rel="stylesheet" />

src/fontra/views/editor/panel-designspace-navigation.js

@@ -175,8 +175,7 @@ export default class DesignspaceNavigationPanel extends Panel {
         open: true,
         content: html.div(
           {
-            style:
-              "display: grid; grid-template-rows: 1fr auto auto; height: 100%; box-sizing: border-box;",
+            style: "display: grid; grid-template-rows: 1fr auto auto; height: 100%;",
           },
           [
             html.createDomElement("ui-list", { id: "sources-list" }),
@@ -196,8 +195,7 @@ export default class DesignspaceNavigationPanel extends Panel {
         open: true,
         content: html.div(
           {
-            style:
-              "display: grid; grid-template-rows: 1fr auto; height: 100%; box-sizing: border-box;",
+            style: "display: grid; grid-template-rows: 1fr auto; height: 100%;",
           },
           [
             html.createDomElement("ui-list", { id: "layers-list" }),

src/fontra/views/editor/panel-glyph-note.js

@@ -9,7 +9,6 @@ export default class GlyphNotePanel extends Panel {
 
   static styles = `
     .sidebar-glyph-note {
-      box-sizing: border-box;
       height: 100%;
       width: 100%;
       display: flex;
@@ -30,6 +29,7 @@ export default class GlyphNotePanel extends Panel {
       resize: none;
       overflow-x: auto;
       text-wrap: wrap;
+      box-sizing: content-box; /* FIXME: use border-box */
     }
 
     #glyph-note-textarea:disabled {

src/fontra/views/editor/panel-glyph-search.js

@@ -7,7 +7,6 @@ export default class GlyphSearchPanel extends Panel {
 
   static styles = `
     .glyph-search {
-      box-sizing: border-box;
       height: 100%;
       width: 100%;
       display: grid;

src/fontra/views/editor/panel-reference-font.js

@@ -194,7 +194,6 @@ export default class ReferenceFontPanel extends Panel {
       padding: 1em;
       gap: 1em;
       height: 100%;
-      box-sizing: border-box;
       white-space: normal;
       align-content: start;
     }

src/fontra/views/editor/panel-related-glyphs.js

@@ -15,7 +15,6 @@ export default class RelatedGlyphPanel extends Panel {
 
   static styles = `
     .sidebar-glyph-relationships {
-      box-sizing: border-box;
       height: 100%;
       display: flex;
       flex-direction: column;

src/fontra/views/editor/panel-selection-info.js

@@ -28,7 +28,6 @@ export default class SelectionInfoPanel extends Panel {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      box-sizing: border-box;
       height: 100%;
       width: 100%;
       white-space: normal;

src/fontra/views/editor/panel-text-entry.js

@@ -8,7 +8,6 @@ export default class TextEntryPanel extends Panel {
 
   static styles = `
     .sidebar-text-entry {
-      box-sizing: border-box;
       height: 100%;
       width: 100%;
       display: flex;
@@ -33,6 +32,7 @@ export default class TextEntryPanel extends Panel {
       cursor: pointer;
       user-select: none;
       transition: 120ms;
+      box-sizing: content-box; /* FIXME: use border-box */
     }
 
     #text-align-menu > inline-svg:hover {
@@ -58,6 +58,7 @@ export default class TextEntryPanel extends Panel {
       font-size: 1.1rem;
       resize: none;
       overflow-x: auto;
+      box-sizing: content-box;
     }
   `;
 

src/fontra/views/editor/panel-transformation.js

@@ -32,7 +32,6 @@ export default class TransformationPanel extends Panel {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      box-sizing: border-box;
       height: 100%;
       width: 100%;
       white-space: normal;

src/fontra/views/fontinfo/fontinfo.html

@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link href="/css/shared.css" rel="stylesheet" />
     <link href="/css/core.css" rel="stylesheet" />
     <link href="/css/tooltip.css" rel="stylesheet" />
     <title>Fontra Font Info</title>
@@ -15,7 +16,6 @@
         display: grid;
         grid-template-columns: auto 1fr;
         padding: 0em;
-        box-sizing: border-box;
         gap: 0em;
         width: 100vw;
         height: 100vh;