yattho_view_components 0.0.1 → 0.1.1

data/app/components/yattho/beta/border_box.css

@@ -1,279 +1 @@
-/* BorderBox */
-
-/* TODO: Rename to BorderBox to match YVC */
-
-.Box {
-  background-color: var(--color-canvas-default);
-  border-color: var(--color-border-default);
-  border-style: solid;
-  border-width: var(--yattho-borderWidth-thin, 1px);
-  border-radius: var(--yattho-borderRadius-medium, 6px);
-}
-
-/* Box padding density options */
-
-.Box--condensed {
-  line-height: 1.25;
-}
-
-.Box--condensed .Box-header {
-    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);
-  }
-
-.Box--condensed .Box-body {
-    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);
-  }
-
-.Box--condensed .Box-footer {
-    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);
-  }
-
-.Box--condensed .Box-btn-octicon.btn-octicon {
-      padding: var(--yattho-control-medium-paddingInline-condensed, 8px) var(--yattho-control-medium-paddingInline-spacious, 16px);
-      margin: calc(var(--yattho-controlStack-medium-gap-condensed, 8px) * -1) calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1);
-      line-height: 1.25;
-    }
-
-.Box--condensed .Box-row {
-    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);
-  }
-
-.Box--spacious .Box-header {
-    padding: var(--yattho-stack-padding-spacious, 24px);
-    line-height: 1.25;
-  }
-
-.Box--spacious .Box-title {
-    font-size: var(--yattho-text-title-size-medium, 20px);
-  }
-
-.Box--spacious .Box-body {
-    padding: var(--yattho-stack-padding-spacious, 24px);
-  }
-
-.Box--spacious .Box-footer {
-    padding: var(--yattho-stack-padding-spacious, 24px);
-  }
-
-.Box--spacious .Box-btn-octicon.btn-octicon {
-      padding: var(--yattho-stack-padding-spacious, 24px);
-      margin: calc(var(--yattho-stack-gap-spacious, 24px) * -1) calc(var(--yattho-stack-gap-spacious, 24px) * -1);
-    }
-
-.Box--spacious .Box-row {
-    padding: var(--yattho-stack-padding-spacious, 24px);
-  }
-
-.Box-header {
-  padding: var(--yattho-stack-padding-normal, 16px);
-  margin: calc(var(--yattho-borderWidth-thin, 1px) * -1) calc(var(--yattho-borderWidth-thin, 1px) * -1) 0;
-  background-color: var(--color-canvas-subtle);
-  border-color: var(--color-border-default);
-  border-style: solid;
-  border-width: var(--yattho-borderWidth-thin, 1px);
-  border-top-left-radius: var(--yattho-borderRadius-medium, 6px);
-  border-top-right-radius: var(--yattho-borderRadius-medium, 6px);
-}
-
-.Box-title {
-  font-size: var(--yattho-text-body-size-medium, 14px);
-  font-weight: var(--base-text-weight-semibold, 600);
-}
-
-.Box-body {
-  padding: var(--yattho-stack-padding-normal, 16px);
-  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
-
-  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */
-}
-
-.Box-body:last-of-type {
-    margin-bottom: calc(var(--yattho-borderWidth-thin, 1px) * -1);
-    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);
-    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);
-  }
-
-/* Box rows */
-
-.Box-row {
-  padding: var(--yattho-stack-padding-normal, 16px);
-  margin-top: calc(var(--yattho-borderWidth-thin, 1px) * -1);
-  list-style-type: none; /* To account for applying Box component to a list */
-  border-top-color: var(--color-border-muted);
-  border-top-style: solid;
-  border-top-width: var(--yattho-borderWidth-thin, 1px);
-}
-
-.Box-row:first-of-type {
-    border-top-left-radius: var(--yattho-borderRadius-medium, 6px);
-    border-top-right-radius: var(--yattho-borderRadius-medium, 6px);
-  }
-
-.Box-row:last-of-type {
-    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);
-    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);
-  }
-
-/* Adds a blue vertical line to the left of the row
-  ** For indicating a row item is unread */
-
-.Box-row.Box-row--unread,
-  
-  .Box-row.unread {
-    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);
-  }
-
-/* Focus styles for when drag icon */
-
-.Box-row.navigation-focus .Box-row--drag-button {
-      color: var(--color-accent-fg);
-      cursor: grab;
-      opacity: 100;
-    }
-
-/* Grabbing while row is dragged */
-
-.Box-row.navigation-focus.is-dragging .Box-row--drag-button {
-      cursor: grabbing;
-    }
-
-/* Row dragging styles */
-
-.Box-row.navigation-focus.sortable-chosen {
-      background-color: var(--color-canvas-subtle);
-    }
-
-/* Makes dragging row background gray */
-
-.Box-row.navigation-focus.sortable-ghost {
-      background-color: var(--color-canvas-subtle);
-
-      /* Hides contents of row while dragging so row looks solid gray */
-    }
-
-.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide {
-        opacity: 0;
-      }
-
-.Box-row--focus-gray.navigation-focus {
-    background-color: var(--color-canvas-subtle);
-  }
-
-.Box-row--focus-blue.navigation-focus {
-    background-color: var(--color-accent-subtle);
-  }
-
-.Box-row--hover-gray:hover {
-    background-color: var(--color-canvas-subtle);
-  }
-
-.Box-row--hover-blue:hover {
-    background-color: var(--color-accent-subtle);
-  }
-
-/* Optional link style
-** Makes links on mobile blue since they don't have hover state,
-** and links are dark-gray with blue hover on desktop. */
-
-@media (min-width: 768px) {
-
-.Box-row-link {
-    color: var(--color-fg-default);
-    text-decoration: none;
-}
-
-    .Box-row-link:hover {
-      color: var(--color-accent-fg);
-      text-decoration: none;
-    }
-  }
-
-/* Optional drag icon styles for reordering items
-** Focus styles included in .Box-row above */
-
-.Box-row--drag-button {
-  opacity: 0;
-}
-
-.Box-footer {
-  padding: var(--yattho-stack-padding-normal, 16px);
-  margin-top: calc(var(--yattho-borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */
-  border-top-color: var(--color-border-default);
-  border-top-style: solid;
-  border-top-width: var(--yattho-borderWidth-thin, 1px);
-  border-radius: 0 0 var(--yattho-borderRadius-medium, 6px) var(--yattho-borderRadius-medium, 6px);
-}
-
-/* Option for a box with scrolling content */
-
-.Box--scrollable {
-  max-height: 324px;
-  overflow: scroll;
-}
-
-/* Box themes */
-
-.Box--blue {
-  border-color: var(--color-accent-muted);
-}
-
-.Box--blue .Box-header {
-    background-color: var(--color-accent-subtle);
-    border-color: var(--color-accent-muted);
-  }
-
-.Box--blue .Box-body {
-    border-color: var(--color-accent-muted);
-  }
-
-.Box--blue .Box-row {
-    border-color: var(--color-accent-muted);
-  }
-
-.Box--blue .Box-footer {
-    border-color: var(--color-accent-muted);
-  }
-
-/* Applies and red border to the outside of the box,
-** but not to the border separating rows. */
-
-.Box--danger {
-  border-color: var(--color-danger-emphasis);
-}
-
-.Box--danger .Box-row:first-of-type {
-      border-color: var(--color-danger-emphasis);
-    }
-
-.Box--danger .Box-body:last-of-type {
-      border-color: var(--color-danger-emphasis);
-    }
-
-.Box-header--blue {
-  background-color: var(--color-accent-subtle);
-  border-color: var(--color-accent-muted);
-}
-
-/* Box row highlight themes */
-
-.Box-row--yellow {
-  background-color: var(--color-attention-subtle);
-}
-
-.Box-row--blue {
-  background-color: var(--color-accent-subtle);
-}
-
-.Box-row--gray {
-  background-color: var(--color-canvas-subtle);
-}
-
-/* Box with btn-octicon */
-
-/* Increase specificity when btn-octicon is used because comes after .Box in the cascade */
-
-.Box-btn-octicon.btn-octicon {
-    padding: var(--yattho-control-medium-paddingInline-spacious, 16px) var(--yattho-control-medium-paddingInline-spacious, 16px);
-    margin: calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1) calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1);
-    line-height: 1.5; /* override btn-octicon line-height */
-  }
+.Box{background-color:var(--color-canvas-default);border-color:var(--color-border-default);border-radius:var(--yattho-borderRadius-medium,6px);border-style:solid;border-width:var(--yattho-borderWidth-thin,1px)}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--yattho-stack-padding-condensed,8px) var(--yattho-stack-padding-normal,16px)}.Box--condensed .Box-btn-octicon.btn-octicon{line-height:1.25;margin:calc(var(--yattho-controlStack-medium-gap-condensed, 8px)*-1) calc(var(--yattho-controlStack-small-gap-spacious, 16px)*-1);padding:var(--yattho-control-medium-paddingInline-condensed,8px) var(--yattho-control-medium-paddingInline-spacious,16px)}.Box--condensed .Box-row{padding:var(--yattho-stack-padding-condensed,8px) var(--yattho-stack-padding-normal,16px)}.Box--spacious .Box-header{line-height:1.25;padding:var(--yattho-stack-padding-spacious,24px)}.Box--spacious .Box-title{font-size:var(--yattho-text-title-size-medium,20px)}.Box--spacious .Box-body,.Box--spacious .Box-btn-octicon.btn-octicon,.Box--spacious .Box-footer{padding:var(--yattho-stack-padding-spacious,24px)}.Box--spacious .Box-btn-octicon.btn-octicon{margin:calc(var(--yattho-stack-gap-spacious, 24px)*-1) calc(var(--yattho-stack-gap-spacious, 24px)*-1)}.Box--spacious .Box-row{padding:var(--yattho-stack-padding-spacious,24px)}.Box-header{background-color:var(--color-canvas-subtle);border-color:var(--color-border-default);border-style:solid;border-top-left-radius:var(--yattho-borderRadius-medium,6px);border-top-right-radius:var(--yattho-borderRadius-medium,6px);border-width:var(--yattho-borderWidth-thin,1px);margin:calc(var(--yattho-borderWidth-thin, 1px)*-1) calc(var(--yattho-borderWidth-thin, 1px)*-1) 0;padding:var(--yattho-stack-padding-normal,16px)}.Box-title{font-size:var(--yattho-text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600)}.Box-body{border-bottom:var(--yattho-borderWidth-thin,1px) solid var(--color-border-default);padding:var(--yattho-stack-padding-normal,16px)}.Box-body:last-of-type{border-bottom-left-radius:var(--yattho-borderRadius-medium,6px);border-bottom-right-radius:var(--yattho-borderRadius-medium,6px);margin-bottom:calc(var(--yattho-borderWidth-thin, 1px)*-1)}.Box-row{border-top:var(--yattho-borderWidth-thin,1px) solid var(--color-border-muted);list-style-type:none;margin-top:calc(var(--yattho-borderWidth-thin, 1px)*-1);padding:var(--yattho-stack-padding-normal,16px)}.Box-row:first-of-type{border-top-left-radius:var(--yattho-borderRadius-medium,6px);border-top-right-radius:var(--yattho-borderRadius-medium,6px)}.Box-row:last-of-type{border-bottom-left-radius:var(--yattho-borderRadius-medium,6px);border-bottom-right-radius:var(--yattho-borderRadius-medium,6px)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--color-accent-emphasis)}.Box-row.navigation-focus .Box-row--drag-button{color:var(--color-accent-fg);cursor:grab;opacity:1}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:grabbing}.Box-row.navigation-focus.sortable-chosen,.Box-row.navigation-focus.sortable-ghost{background-color:var(--color-canvas-subtle)}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--color-canvas-subtle)}.Box-row--focus-blue.navigation-focus{background-color:var(--color-accent-subtle)}.Box-row--hover-gray:hover{background-color:var(--color-canvas-subtle)}.Box-row--hover-blue:hover{background-color:var(--color-accent-subtle)}@media (min-width:768px){.Box-row-link{color:var(--color-fg-default);text-decoration:none}.Box-row-link:hover{color:var(--color-accent-fg);text-decoration:none}}.Box-row--drag-button{opacity:0}.Box-footer{border-radius:0 0 var(--yattho-borderRadius-medium,6px) var(--yattho-borderRadius-medium,6px);border-top:var(--yattho-borderWidth-thin,1px) solid var(--color-border-default);margin-top:calc(var(--yattho-borderWidth-thin, 1px)*-1);padding:var(--yattho-stack-padding-normal,16px)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--color-accent-muted)}.Box--blue .Box-header{background-color:var(--color-accent-subtle)}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--color-accent-muted)}.Box--danger,.Box--danger .Box-body:last-of-type,.Box--danger .Box-row:first-of-type{border-color:var(--color-danger-emphasis)}.Box-header--blue{background-color:var(--color-accent-subtle);border-color:var(--color-accent-muted)}.Box-row--yellow{background-color:var(--color-attention-subtle)}.Box-row--blue{background-color:var(--color-accent-subtle)}.Box-row--gray{background-color:var(--color-canvas-subtle)}.Box-btn-octicon.btn-octicon{line-height:1.5;margin:calc(var(--yattho-controlStack-small-gap-spacious, 16px)*-1) calc(var(--yattho-controlStack-small-gap-spacious, 16px)*-1);padding:var(--yattho-control-medium-paddingInline-spacious,16px) var(--yattho-control-medium-paddingInline-spacious,16px)}

data/app/components/yattho/beta/border_box.css.json

@@ -1 +1 @@
-{"name":"beta/border_box","selectors":[".Box",".Box--condensed",".Box--condensed .Box-header",".Box--condensed .Box-body",".Box--condensed .Box-footer",".Box--condensed .Box-btn-octicon.btn-octicon",".Box--condensed .Box-row",".Box--spacious .Box-header",".Box--spacious .Box-title",".Box--spacious .Box-body",".Box--spacious .Box-footer",".Box--spacious .Box-btn-octicon.btn-octicon",".Box--spacious .Box-row",".Box-header",".Box-title",".Box-body",".Box-body:last-of-type",".Box-row",".Box-row:first-of-type",".Box-row:last-of-type",".Box-row.Box-row--unread","\n  \n  .Box-row.unread",".Box-row.navigation-focus .Box-row--drag-button",".Box-row.navigation-focus.is-dragging .Box-row--drag-button",".Box-row.navigation-focus.sortable-chosen",".Box-row.navigation-focus.sortable-ghost",".Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide",".Box-row--focus-gray.navigation-focus",".Box-row--focus-blue.navigation-focus",".Box-row--hover-gray:hover",".Box-row--hover-blue:hover",".Box-row-link",".Box-row-link:hover",".Box-row--drag-button",".Box-footer",".Box--scrollable",".Box--blue",".Box--blue .Box-header",".Box--blue .Box-body",".Box--blue .Box-row",".Box--blue .Box-footer",".Box--danger",".Box--danger .Box-row:first-of-type",".Box--danger .Box-body:last-of-type",".Box-header--blue",".Box-row--yellow",".Box-row--blue",".Box-row--gray",".Box-btn-octicon.btn-octicon"]}
+{"name":"beta/border_box","selectors":[".Box",".Box--condensed",".Box--condensed .Box-body",".Box--condensed .Box-footer",".Box--condensed .Box-header",".Box--condensed .Box-btn-octicon.btn-octicon",".Box--condensed .Box-row",".Box--spacious .Box-header",".Box--spacious .Box-title",".Box--spacious .Box-body",".Box--spacious .Box-btn-octicon.btn-octicon",".Box--spacious .Box-footer",".Box--spacious .Box-row",".Box-header",".Box-title",".Box-body",".Box-body:last-of-type",".Box-row",".Box-row:first-of-type",".Box-row:last-of-type",".Box-row.Box-row--unread",".Box-row.unread",".Box-row.navigation-focus .Box-row--drag-button",".Box-row.navigation-focus.is-dragging .Box-row--drag-button",".Box-row.navigation-focus.sortable-chosen",".Box-row.navigation-focus.sortable-ghost",".Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide",".Box-row--focus-gray.navigation-focus",".Box-row--focus-blue.navigation-focus",".Box-row--hover-gray:hover",".Box-row--hover-blue:hover",".Box-row-link",".Box-row-link:hover",".Box-row--drag-button",".Box-footer",".Box--scrollable",".Box--blue",".Box--blue .Box-header",".Box--blue .Box-body",".Box--blue .Box-footer",".Box--blue .Box-row",".Box--danger",".Box--danger .Box-body:last-of-type",".Box--danger .Box-row:first-of-type",".Box-header--blue",".Box-row--yellow",".Box-row--blue",".Box-row--gray",".Box-btn-octicon.btn-octicon"]}

data/app/components/yattho/beta/border_box.css.map

@@ -1 +1 @@
-{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAAA,cAAc;;AAEd,2CAA2C;;AAC3C;EACE,6CAA6C;EAC7C,yCAAyC;EACzC,mBAAmB;EACnB,iDAAiD;EACjD,qDAAqD;AACvD;;AAEA,gCAAgC;;AAChC;EACE,iBAAiB;AAyBnB;;AAvBE;IACE,4FAA4F;EAC9F;;AAEA;IACE,4FAA4F;EAC9F;;AAEA;IACE,4FAA4F;EAC9F;;AAGE;MACE,4HAA4H;MAC5H,sIAAsI;MACtI,iBAAiB;IACnB;;AAGF;IACE,4FAA4F;EAC9F;;AAIA;IACE,mDAAmD;IACnD,iBAAiB;EACnB;;AAEA;IACE,qDAAqD;EACvD;;AAEA;IACE,mDAAmD;EACrD;;AAEA;IACE,mDAAmD;EACrD;;AAGE;MACE,mDAAmD;MACnD,2GAA2G;IAC7G;;AAGF;IACE,mDAAmD;EACrD;;AAGF;EACE,iDAAiD;EACjD,uGAAuG;EACvG,4CAA4C;EAC5C,yCAAyC;EACzC,mBAAmB;EACnB,iDAAiD;EACjD,8DAA8D;EAC9D,+DAA+D;AACjE;;AAEA;EACE,oDAAoD;EACpD,kDAAkD;AACpD;;AAEA;EACE,iDAAiD;EACjD,oFAAoF;;EAEpF,kFAAkF;AAMpF;;AALE;IACE,6DAA6D;IAC7D,kEAAkE;IAClE,iEAAiE;EACnE;;AAGF,aAAa;;AACb;EACE,iDAAiD;EACjD,0DAA0D;EAC1D,qBAAqB,EAAE,oDAAoD;EAC3E,2CAA2C;EAC3C,uBAAuB;EACvB,qDAAqD;AAgDvD;;AA9CE;IACE,8DAA8D;IAC9D,+DAA+D;EACjE;;AAEA;IACE,kEAAkE;IAClE,iEAAiE;EACnE;;AAEA;0CACwC;;AACxC;;;IAGE,sDAAsD;EACxD;;AAGE,oCAAoC;;AACpC;MACE,6BAA6B;MAC7B,YAAY;MACZ,YAAY;IACd;;AAEA,kCAAkC;;AAClC;MACE,gBAAgB;IAClB;;AAEA,wBAAwB;;AACxB;MACE,4CAA4C;IAC9C;;AAEA,uCAAuC;;AACvC;MACE,4CAA4C;;MAE5C,iEAAiE;IAInE;;AAHE;QACE,UAAU;MACZ;;AAMJ;IACE,4CAA4C;EAC9C;;AAIA;IACE,4CAA4C;EAC9C;;AAIA;IACE,4CAA4C;EAC9C;;AAIA;IACE,4CAA4C;EAC9C;;AAGF;;wDAEwD;;AAEtD;;AADF;IAEI,8BAA8B;IAC9B,qBAAqB;AAOzB;;IALI;MACE,6BAA6B;MAC7B,qBAAqB;IACvB;EACF;;AAGF;4CAC4C;;AAC5C;EACE,UAAU;AACZ;;AAEA;EACE,iDAAiD;EACjD,0DAA0D,EAAE,oDAAoD;EAChH,6CAA6C;EAC7C,uBAAuB;EACvB,qDAAqD;EACrD,gGAAgG;AAClG;;AAEA,4CAA4C;;AAC5C;EACE,iBAAiB;EACjB,gBAAgB;AAClB;;AAEA,eAAe;;AAEf;EACE,uCAAuC;AAkBzC;;AAhBE;IACE,4CAA4C;IAC5C,uCAAuC;EACzC;;AAEA;IACE,uCAAuC;EACzC;;AAEA;IACE,uCAAuC;EACzC;;AAEA;IACE,uCAAuC;EACzC;;AAGF;2CAC2C;;AAC3C;EACE,0CAA0C;AAa5C;;AAVI;MACE,0CAA0C;IAC5C;;AAIA;MACE,0CAA0C;IAC5C;;AAIJ;EACE,4CAA4C;EAC5C,uCAAuC;AACzC;;AAEA,6BAA6B;;AAE7B;EACE,+CAA+C;AACjD;;AAEA;EACE,4CAA4C;AAC9C;;AAEA;EACE,4CAA4C;AAC9C;;AAEA,yBAAyB;;AAEvB,0FAA0F;;AAC1F;IACE,4HAA4H;IAC5H,qIAAqI;IACrI,gBAAgB,EAAE,qCAAqC;EACzD","file":"border_box.css","sourcesContent":["/* BorderBox */\n\n/* TODO: Rename to BorderBox to match YVC */\n.Box {\n  background-color: var(--color-canvas-default);\n  border-color: var(--color-border-default);\n  border-style: solid;\n  border-width: var(--yattho-borderWidth-thin, 1px);\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n}\n\n/* Box padding density options */\n.Box--condensed {\n  line-height: 1.25;\n\n  & .Box-header {\n    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);\n  }\n\n  & .Box-body {\n    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);\n  }\n\n  & .Box-footer {\n    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--yattho-control-medium-paddingInline-condensed, 8px) var(--yattho-control-medium-paddingInline-spacious, 16px);\n      margin: calc(var(--yattho-controlStack-medium-gap-condensed, 8px) * -1) calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1);\n      line-height: 1.25;\n    }\n  }\n\n  & .Box-row {\n    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);\n  }\n}\n\n.Box--spacious {\n  & .Box-header {\n    padding: var(--yattho-stack-padding-spacious, 24px);\n    line-height: 1.25;\n  }\n\n  & .Box-title {\n    font-size: var(--yattho-text-title-size-medium, 20px);\n  }\n\n  & .Box-body {\n    padding: var(--yattho-stack-padding-spacious, 24px);\n  }\n\n  & .Box-footer {\n    padding: var(--yattho-stack-padding-spacious, 24px);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--yattho-stack-padding-spacious, 24px);\n      margin: calc(var(--yattho-stack-gap-spacious, 24px) * -1) calc(var(--yattho-stack-gap-spacious, 24px) * -1);\n    }\n  }\n\n  & .Box-row {\n    padding: var(--yattho-stack-padding-spacious, 24px);\n  }\n}\n\n.Box-header {\n  padding: var(--yattho-stack-padding-normal, 16px);\n  margin: calc(var(--yattho-borderWidth-thin, 1px) * -1) calc(var(--yattho-borderWidth-thin, 1px) * -1) 0;\n  background-color: var(--color-canvas-subtle);\n  border-color: var(--color-border-default);\n  border-style: solid;\n  border-width: var(--yattho-borderWidth-thin, 1px);\n  border-top-left-radius: var(--yattho-borderRadius-medium, 6px);\n  border-top-right-radius: var(--yattho-borderRadius-medium, 6px);\n}\n\n.Box-title {\n  font-size: var(--yattho-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-semibold, 600);\n}\n\n.Box-body {\n  padding: var(--yattho-stack-padding-normal, 16px);\n  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);\n\n  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */\n  &:last-of-type {\n    margin-bottom: calc(var(--yattho-borderWidth-thin, 1px) * -1);\n    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);\n  }\n}\n\n/* Box rows */\n.Box-row {\n  padding: var(--yattho-stack-padding-normal, 16px);\n  margin-top: calc(var(--yattho-borderWidth-thin, 1px) * -1);\n  list-style-type: none; /* To account for applying Box component to a list */\n  border-top-color: var(--color-border-muted);\n  border-top-style: solid;\n  border-top-width: var(--yattho-borderWidth-thin, 1px);\n\n  &:first-of-type {\n    border-top-left-radius: var(--yattho-borderRadius-medium, 6px);\n    border-top-right-radius: var(--yattho-borderRadius-medium, 6px);\n  }\n\n  &:last-of-type {\n    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);\n  }\n\n  /* Adds a blue vertical line to the left of the row\n  ** For indicating a row item is unread */\n  &.Box-row--unread,\n  /* .unread to be deprecated with .Box-row-unread */\n  &.unread {\n    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);\n  }\n\n  &.navigation-focus {\n    /* Focus styles for when drag icon */\n    & .Box-row--drag-button {\n      color: var(--color-accent-fg);\n      cursor: grab;\n      opacity: 100;\n    }\n\n    /* Grabbing while row is dragged */\n    &.is-dragging .Box-row--drag-button {\n      cursor: grabbing;\n    }\n\n    /* Row dragging styles */\n    &.sortable-chosen {\n      background-color: var(--color-canvas-subtle);\n    }\n\n    /* Makes dragging row background gray */\n    &.sortable-ghost {\n      background-color: var(--color-canvas-subtle);\n\n      /* Hides contents of row while dragging so row looks solid gray */\n      & .Box-row--drag-hide {\n        opacity: 0;\n      }\n    }\n  }\n}\n\n.Box-row--focus-gray {\n  &.navigation-focus {\n    background-color: var(--color-canvas-subtle);\n  }\n}\n\n.Box-row--focus-blue {\n  &.navigation-focus {\n    background-color: var(--color-accent-subtle);\n  }\n}\n\n.Box-row--hover-gray {\n  &:hover {\n    background-color: var(--color-canvas-subtle);\n  }\n}\n\n.Box-row--hover-blue {\n  &:hover {\n    background-color: var(--color-accent-subtle);\n  }\n}\n\n/* Optional link style\n** Makes links on mobile blue since they don't have hover state,\n** and links are dark-gray with blue hover on desktop. */\n.Box-row-link {\n  @media (min-width: 768px) {\n    color: var(--color-fg-default);\n    text-decoration: none;\n\n    &:hover {\n      color: var(--color-accent-fg);\n      text-decoration: none;\n    }\n  }\n}\n\n/* Optional drag icon styles for reordering items\n** Focus styles included in .Box-row above */\n.Box-row--drag-button {\n  opacity: 0;\n}\n\n.Box-footer {\n  padding: var(--yattho-stack-padding-normal, 16px);\n  margin-top: calc(var(--yattho-borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */\n  border-top-color: var(--color-border-default);\n  border-top-style: solid;\n  border-top-width: var(--yattho-borderWidth-thin, 1px);\n  border-radius: 0 0 var(--yattho-borderRadius-medium, 6px) var(--yattho-borderRadius-medium, 6px);\n}\n\n/* Option for a box with scrolling content */\n.Box--scrollable {\n  max-height: 324px;\n  overflow: scroll;\n}\n\n/* Box themes */\n\n.Box--blue {\n  border-color: var(--color-accent-muted);\n\n  & .Box-header {\n    background-color: var(--color-accent-subtle);\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-body {\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-row {\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-footer {\n    border-color: var(--color-accent-muted);\n  }\n}\n\n/* Applies and red border to the outside of the box,\n** but not to the border separating rows. */\n.Box--danger {\n  border-color: var(--color-danger-emphasis);\n\n  & .Box-row {\n    &:first-of-type {\n      border-color: var(--color-danger-emphasis);\n    }\n  }\n\n  & .Box-body {\n    &:last-of-type {\n      border-color: var(--color-danger-emphasis);\n    }\n  }\n}\n\n.Box-header--blue {\n  background-color: var(--color-accent-subtle);\n  border-color: var(--color-accent-muted);\n}\n\n/* Box row highlight themes */\n\n.Box-row--yellow {\n  background-color: var(--color-attention-subtle);\n}\n\n.Box-row--blue {\n  background-color: var(--color-accent-subtle);\n}\n\n.Box-row--gray {\n  background-color: var(--color-canvas-subtle);\n}\n\n/* Box with btn-octicon */\n.Box-btn-octicon {\n  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */\n  &.btn-octicon {\n    padding: var(--yattho-control-medium-paddingInline-spacious, 16px) var(--yattho-control-medium-paddingInline-spacious, 16px);\n    margin: calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1) calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1);\n    line-height: 1.5; /* override btn-octicon line-height */\n  }\n}"]}
+{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAGA,KACE,4CAA6C,CAC7C,wCAAyC,CAGzC,mDAAqD,CAFrD,kBAAmB,CACnB,+CAEF,CAGA,gBACE,gBAyBF,CAfE,kFACE,yFACF,CAGE,6CAGE,gBAAiB,CADjB,iIAAsI,CADtI,yHAGF,CAGF,yBACE,yFACF,CAIA,2BAEE,gBAAiB,CADjB,iDAEF,CAEA,0BACE,mDACF,CAWE,gGAJA,iDAOA,CAHA,4CAEE,sGACF,CAGF,wBACE,iDACF,CAGF,YAGE,2CAA4C,CAC5C,wCAAyC,CACzC,kBAAmB,CAEnB,4DAA8D,CAC9D,6DAA+D,CAF/D,+CAAiD,CAJjD,kGAAuG,CADvG,+CAQF,CAEA,WACE,kDAAoD,CACpD,gDACF,CAEA,UAEE,kFAAoF,CADpF,+CASF,CALE,uBAGE,+DAAiE,CADjE,gEAAkE,CADlE,0DAGF,CAIF,SAME,6EAAqD,CAHrD,oBAAqB,CADrB,uDAA0D,CAD1D,+CAqDF,CA9CE,uBACE,4DAA8D,CAC9D,6DACF,CAEA,sBAEE,+DAAiE,CADjE,gEAEF,CAIA,yCAGE,qDACF,CAIE,gDACE,4BAA6B,CAC7B,WAAY,CACZ,SACF,CAGA,4DACE,eACF,CAQA,mFACE,2CAMF,CAHE,6DACE,SACF,CAMJ,sCACE,2CACF,CAIA,sCACE,2CACF,CAIA,2BACE,2CACF,CAIA,2BACE,2CACF,CAOA,yBADF,cAEI,6BAA8B,CAC9B,oBAOJ,CALI,oBACE,4BAA6B,CAC7B,oBACF,CACF,CAKF,sBACE,SACF,CAEA,YAME,6FAAgG,CADhG,+EAAqD,CAHrD,uDAA0D,CAD1D,+CAMF,CAGA,iBACE,gBAAiB,CACjB,eACF,CAOE,kCAFA,sCAKA,CAHA,uBACE,2CAEF,CAUA,gEACE,sCACF,CAeE,qFACE,yCACF,CAIJ,kBACE,2CAA4C,CAC5C,sCACF,CAIA,iBACE,8CACF,CAEA,eACE,2CACF,CAEA,eACE,2CACF,CAKE,6BAGE,eAAgB,CADhB,gIAAqI,CADrI,yHAGF","file":"border_box.css","sourcesContent":["/* BorderBox */\n\n/* TODO: Rename to BorderBox to match YVC */\n.Box {\n  background-color: var(--color-canvas-default);\n  border-color: var(--color-border-default);\n  border-style: solid;\n  border-width: var(--yattho-borderWidth-thin, 1px);\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n}\n\n/* Box padding density options */\n.Box--condensed {\n  line-height: 1.25;\n\n  & .Box-header {\n    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);\n  }\n\n  & .Box-body {\n    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);\n  }\n\n  & .Box-footer {\n    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--yattho-control-medium-paddingInline-condensed, 8px) var(--yattho-control-medium-paddingInline-spacious, 16px);\n      margin: calc(var(--yattho-controlStack-medium-gap-condensed, 8px) * -1) calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1);\n      line-height: 1.25;\n    }\n  }\n\n  & .Box-row {\n    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);\n  }\n}\n\n.Box--spacious {\n  & .Box-header {\n    padding: var(--yattho-stack-padding-spacious, 24px);\n    line-height: 1.25;\n  }\n\n  & .Box-title {\n    font-size: var(--yattho-text-title-size-medium, 20px);\n  }\n\n  & .Box-body {\n    padding: var(--yattho-stack-padding-spacious, 24px);\n  }\n\n  & .Box-footer {\n    padding: var(--yattho-stack-padding-spacious, 24px);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--yattho-stack-padding-spacious, 24px);\n      margin: calc(var(--yattho-stack-gap-spacious, 24px) * -1) calc(var(--yattho-stack-gap-spacious, 24px) * -1);\n    }\n  }\n\n  & .Box-row {\n    padding: var(--yattho-stack-padding-spacious, 24px);\n  }\n}\n\n.Box-header {\n  padding: var(--yattho-stack-padding-normal, 16px);\n  margin: calc(var(--yattho-borderWidth-thin, 1px) * -1) calc(var(--yattho-borderWidth-thin, 1px) * -1) 0;\n  background-color: var(--color-canvas-subtle);\n  border-color: var(--color-border-default);\n  border-style: solid;\n  border-width: var(--yattho-borderWidth-thin, 1px);\n  border-top-left-radius: var(--yattho-borderRadius-medium, 6px);\n  border-top-right-radius: var(--yattho-borderRadius-medium, 6px);\n}\n\n.Box-title {\n  font-size: var(--yattho-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-semibold, 600);\n}\n\n.Box-body {\n  padding: var(--yattho-stack-padding-normal, 16px);\n  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);\n\n  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */\n  &:last-of-type {\n    margin-bottom: calc(var(--yattho-borderWidth-thin, 1px) * -1);\n    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);\n  }\n}\n\n/* Box rows */\n.Box-row {\n  padding: var(--yattho-stack-padding-normal, 16px);\n  margin-top: calc(var(--yattho-borderWidth-thin, 1px) * -1);\n  list-style-type: none; /* To account for applying Box component to a list */\n  border-top-color: var(--color-border-muted);\n  border-top-style: solid;\n  border-top-width: var(--yattho-borderWidth-thin, 1px);\n\n  &:first-of-type {\n    border-top-left-radius: var(--yattho-borderRadius-medium, 6px);\n    border-top-right-radius: var(--yattho-borderRadius-medium, 6px);\n  }\n\n  &:last-of-type {\n    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);\n  }\n\n  /* Adds a blue vertical line to the left of the row\n  ** For indicating a row item is unread */\n  &.Box-row--unread,\n  /* .unread to be deprecated with .Box-row-unread */\n  &.unread {\n    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);\n  }\n\n  &.navigation-focus {\n    /* Focus styles for when drag icon */\n    & .Box-row--drag-button {\n      color: var(--color-accent-fg);\n      cursor: grab;\n      opacity: 100;\n    }\n\n    /* Grabbing while row is dragged */\n    &.is-dragging .Box-row--drag-button {\n      cursor: grabbing;\n    }\n\n    /* Row dragging styles */\n    &.sortable-chosen {\n      background-color: var(--color-canvas-subtle);\n    }\n\n    /* Makes dragging row background gray */\n    &.sortable-ghost {\n      background-color: var(--color-canvas-subtle);\n\n      /* Hides contents of row while dragging so row looks solid gray */\n      & .Box-row--drag-hide {\n        opacity: 0;\n      }\n    }\n  }\n}\n\n.Box-row--focus-gray {\n  &.navigation-focus {\n    background-color: var(--color-canvas-subtle);\n  }\n}\n\n.Box-row--focus-blue {\n  &.navigation-focus {\n    background-color: var(--color-accent-subtle);\n  }\n}\n\n.Box-row--hover-gray {\n  &:hover {\n    background-color: var(--color-canvas-subtle);\n  }\n}\n\n.Box-row--hover-blue {\n  &:hover {\n    background-color: var(--color-accent-subtle);\n  }\n}\n\n/* Optional link style\n** Makes links on mobile blue since they don't have hover state,\n** and links are dark-gray with blue hover on desktop. */\n.Box-row-link {\n  @media (min-width: 768px) {\n    color: var(--color-fg-default);\n    text-decoration: none;\n\n    &:hover {\n      color: var(--color-accent-fg);\n      text-decoration: none;\n    }\n  }\n}\n\n/* Optional drag icon styles for reordering items\n** Focus styles included in .Box-row above */\n.Box-row--drag-button {\n  opacity: 0;\n}\n\n.Box-footer {\n  padding: var(--yattho-stack-padding-normal, 16px);\n  margin-top: calc(var(--yattho-borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */\n  border-top-color: var(--color-border-default);\n  border-top-style: solid;\n  border-top-width: var(--yattho-borderWidth-thin, 1px);\n  border-radius: 0 0 var(--yattho-borderRadius-medium, 6px) var(--yattho-borderRadius-medium, 6px);\n}\n\n/* Option for a box with scrolling content */\n.Box--scrollable {\n  max-height: 324px;\n  overflow: scroll;\n}\n\n/* Box themes */\n\n.Box--blue {\n  border-color: var(--color-accent-muted);\n\n  & .Box-header {\n    background-color: var(--color-accent-subtle);\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-body {\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-row {\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-footer {\n    border-color: var(--color-accent-muted);\n  }\n}\n\n/* Applies and red border to the outside of the box,\n** but not to the border separating rows. */\n.Box--danger {\n  border-color: var(--color-danger-emphasis);\n\n  & .Box-row {\n    &:first-of-type {\n      border-color: var(--color-danger-emphasis);\n    }\n  }\n\n  & .Box-body {\n    &:last-of-type {\n      border-color: var(--color-danger-emphasis);\n    }\n  }\n}\n\n.Box-header--blue {\n  background-color: var(--color-accent-subtle);\n  border-color: var(--color-accent-muted);\n}\n\n/* Box row highlight themes */\n\n.Box-row--yellow {\n  background-color: var(--color-attention-subtle);\n}\n\n.Box-row--blue {\n  background-color: var(--color-accent-subtle);\n}\n\n.Box-row--gray {\n  background-color: var(--color-canvas-subtle);\n}\n\n/* Box with btn-octicon */\n.Box-btn-octicon {\n  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */\n  &.btn-octicon {\n    padding: var(--yattho-control-medium-paddingInline-spacious, 16px) var(--yattho-control-medium-paddingInline-spacious, 16px);\n    margin: calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1) calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1);\n    line-height: 1.5; /* override btn-octicon line-height */\n  }\n}"]}

data/app/components/yattho/beta/breadcrumbs.css

@@ -1,27 +1 @@
-.breadcrumb-item {
-  display: inline-block;
-  margin-left: -0.35em;
-  white-space: nowrap;
-  list-style: none;
-}
-
-.breadcrumb-item::after {
-    display: inline-block;
-    height: 0.8em;
-    margin: 0 0.5em;
-    content: '';
-    border-right: 0.1em solid var(--color-fg-muted);
-    transform: rotate(15deg);
-  }
-
-.breadcrumb-item:first-child {
-    margin-left: 0;
-  }
-
-.breadcrumb-item-selected::after, .breadcrumb-item[aria-current]:not([aria-current='false'])::after {
-    content: none;
-  }
-
-.breadcrumb-item-selected a {
-  color: var(--color-fg-default);
-}
+.breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em;white-space:nowrap}.breadcrumb-item:after{border-right:.1em solid var(--color-fg-muted);content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg)}.breadcrumb-item:first-child{margin-left:0}.breadcrumb-item-selected:after,.breadcrumb-item[aria-current]:not([aria-current=false]):after{content:none}.breadcrumb-item-selected a{color:var(--color-fg-default)}

data/app/components/yattho/beta/breadcrumbs.css.json

@@ -1 +1 @@
-{"name":"beta/breadcrumbs","selectors":[".breadcrumb-item",".breadcrumb-item::after",".breadcrumb-item:first-child",".breadcrumb-item-selected::after"," .breadcrumb-item[aria-current]:not([aria-current='false'])::after",".breadcrumb-item-selected a"]}
+{"name":"beta/breadcrumbs","selectors":[".breadcrumb-item",".breadcrumb-item:after",".breadcrumb-item:first-child",".breadcrumb-item-selected:after",".breadcrumb-item[aria-current]:not([aria-current=false]):after",".breadcrumb-item-selected a"]}

data/app/components/yattho/beta/breadcrumbs.css.map

@@ -1 +1 @@
-{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA;EACE,qBAAqB;EACrB,oBAAoB;EACpB,mBAAmB;EACnB,gBAAgB;AAclB;;AAZE;IACE,qBAAqB;IACrB,aAAa;IACb,eAAe;IACf,WAAW;IACX,+CAA+C;IAC/C,wBAAwB;EAC1B;;AAEA;IACE,cAAc;EAChB;;AAKA;IACE,aAAa;EACf;;AAGF;EACE,8BAA8B;AAChC","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  margin-left: -0.35em;\n  white-space: nowrap;\n  list-style: none;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    margin: 0 0.5em;\n    content: '';\n    border-right: 0.1em solid var(--color-fg-muted);\n    transform: rotate(15deg);\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n  &::after {\n    content: none;\n  }\n}\n\n.breadcrumb-item-selected a {\n  color: var(--color-fg-default);\n}"]}
+{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAGrB,eAAgB,CAFhB,kBAAoB,CACpB,kBAeF,CAZE,uBAKE,6CAA+C,CAD/C,UAAW,CAHX,oBAAqB,CACrB,WAAa,CACb,aAAe,CAGf,uBACF,CAEA,6BACE,aACF,CAKA,+FACE,YACF,CAGF,4BACE,6BACF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  margin-left: -0.35em;\n  white-space: nowrap;\n  list-style: none;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    margin: 0 0.5em;\n    content: '';\n    border-right: 0.1em solid var(--color-fg-muted);\n    transform: rotate(15deg);\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n  &::after {\n    content: none;\n  }\n}\n\n.breadcrumb-item-selected a {\n  color: var(--color-fg-default);\n}"]}