yattho_view_components 0.0.1 → 0.1.1

data/app/components/yattho/alpha/underline_nav.css

@@ -1,148 +1 @@
-/* UnderlineNav */
-
-.UnderlineNav {
-  display: flex;
-  min-height: var(--base-size-48, 48px);
-  overflow-x: auto;
-  overflow-y: hidden;
-  box-shadow: inset 0 -1px 0 var(--color-border-muted);
-  -webkit-overflow-scrolling: auto;
-  justify-content: space-between;
-}
-
-.UnderlineNav .Counter {
-    margin-left: var(--yattho-control-medium-gap, 8px);
-    color: var(--color-fg-default);
-    background-color: var(--color-neutral-muted);
-  }
-
-.UnderlineNav .Counter--primary {
-    color: var(--color-fg-on-emphasis);
-    background-color: var(--color-neutral-emphasis);
-  }
-
-.UnderlineNav-body {
-  display: flex;
-  align-items: center;
-  gap: var(--yattho-control-medium-gap, 8px);
-  list-style: none;
-}
-
-.UnderlineNav-item {
-  position: relative;
-  display: flex;
-  padding: 0 var(--yattho-control-medium-paddingInline-condensed, 8px);
-  font-size: var(--yattho-text-body-size-medium, 14px);
-  line-height: 30px;
-  color: var(--color-fg-default);
-  text-align: center;
-  white-space: nowrap;
-  cursor: pointer;
-  background-color: transparent;
-  border: 0;
-  border-radius: var(--yattho-borderRadius-medium, 6px);
-  align-items: center;
-}
-
-.UnderlineNav-item:hover,
-  .UnderlineNav-item:focus,
-  .UnderlineNav-item:focus-visible {
-    color: var(--color-fg-default);
-    text-decoration: none;
-    border-bottom-color: var(--color-neutral-muted);
-    outline-offset: -2px;
-    transition: border-bottom-color 0.12s ease-out;
-  }
-
-/* renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected */
-
-.UnderlineNav-item [data-content]::before {
-    display: block;
-    height: 0;
-    font-weight: var(--base-text-weight-semibold, 600);
-    visibility: hidden;
-    content: attr(data-content);
-  }
-
-/* increase touch target area */
-
-.UnderlineNav-item::before {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  min-height: 48px;
-  content: "";
-  transform: translateX(-50%) translateY(-50%);
-}
-
-/* hover state was "sticking" on mobile after click */
-
-@media (pointer: fine) {
-    .UnderlineNav-item:hover {
-      color: var(--color-fg-default);
-      text-decoration: none;
-      background: var(--color-action-list-item-default-hover-bg);
-      transition: background 0.12s ease-out;
-    }
-  }
-
-.UnderlineNav-item.selected,
-  .UnderlineNav-item[role='tab'][aria-selected='true'],
-  .UnderlineNav-item[aria-current]:not([aria-current='false']) {
-    font-weight: var(--base-text-weight-semibold, 600);
-    color: var(--color-fg-default);
-    border-bottom-color: var(--color-yattho-border-active);
-
-    /* current/selected underline */
-  }
-
-.UnderlineNav-item.selected::after, .UnderlineNav-item[role='tab'][aria-selected='true']::after, .UnderlineNav-item[aria-current]:not([aria-current='false'])::after {
-      position: absolute;
-      right: 50%;
-      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */
-      width: 100%;
-      height: 2px;
-      content: '';
-      background: var(--color-yattho-border-active);
-      border-radius: var(--yattho-borderRadius-medium, 6px);
-      transform: translate(50%, -50%);
-    }
-
-.UnderlineNav--right {
-  justify-content: flex-end;
-}
-
-.UnderlineNav--right .UnderlineNav-actions {
-    flex: 1 1 auto;
-  }
-
-.UnderlineNav-actions {
-  align-self: center;
-}
-
-.UnderlineNav--full {
-  display: block;
-
-  /* required for underline to align with additional wrapper element */
-}
-
-.UnderlineNav--full .UnderlineNav-body {
-    min-height: var(--base-size-48, 48px);
-  }
-
-.UnderlineNav-octicon {
-  display: inline !important;
-}
-
-.UnderlineNav-octicon {
-  margin-right: var(--yattho-control-medium-gap, 8px);
-  color: var(--color-fg-muted);
-  fill: var(--color-fg-muted);
-}
-
-.UnderlineNav-container {
-  display: flex;
-  justify-content: space-between;
-}
+.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--color-border-muted);display:flex;justify-content:space-between;min-height:var(--base-size-48,48px);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--color-neutral-muted);color:var(--color-fg-default);margin-left:var(--yattho-control-medium-gap,8px)}.UnderlineNav .Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--yattho-control-medium-gap,8px);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--yattho-borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--yattho-text-body-size-medium,14px);line-height:30px;padding:0 var(--yattho-control-medium-paddingInline-condensed,8px);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--color-neutral-muted);color:var(--color-fg-default);outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--color-action-list-item-default-hover-bg);color:var(--color-fg-default);text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--color-yattho-border-active);color:var(--color-fg-default);font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--color-yattho-border-active);border-radius:var(--yattho-borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,48px)}.UnderlineNav-octicon{fill:var(--color-fg-muted);color:var(--color-fg-muted);display:inline!important;margin-right:var(--yattho-control-medium-gap,8px)}.UnderlineNav-container{display:flex;justify-content:space-between}

data/app/components/yattho/alpha/underline_nav.css.json

@@ -1 +1 @@
-{"name":"alpha/underline_nav","selectors":[".UnderlineNav",".UnderlineNav .Counter",".UnderlineNav .Counter--primary",".UnderlineNav-body",".UnderlineNav-item",".UnderlineNav-item:hover","\n  .UnderlineNav-item:focus","\n  .UnderlineNav-item:focus-visible",".UnderlineNav-item [data-content]::before",".UnderlineNav-item::before",".UnderlineNav-item.selected","\n  .UnderlineNav-item[role='tab'][aria-selected='true']","\n  .UnderlineNav-item[aria-current]:not([aria-current='false'])",".UnderlineNav-item.selected::after"," .UnderlineNav-item[role='tab'][aria-selected='true']::after"," .UnderlineNav-item[aria-current]:not([aria-current='false'])::after",".UnderlineNav--right",".UnderlineNav--right .UnderlineNav-actions",".UnderlineNav-actions",".UnderlineNav--full",".UnderlineNav--full .UnderlineNav-body",".UnderlineNav-octicon",".UnderlineNav-container"]}
+{"name":"alpha/underline_nav","selectors":[".UnderlineNav",".UnderlineNav .Counter",".UnderlineNav .Counter--primary",".UnderlineNav-body",".UnderlineNav-item",".UnderlineNav-item:focus",".UnderlineNav-item:focus-visible",".UnderlineNav-item:hover",".UnderlineNav-item [data-content]:before",".UnderlineNav-item:before",".UnderlineNav-item.selected",".UnderlineNav-item[aria-current]:not([aria-current=false])",".UnderlineNav-item[role=tab][aria-selected=true]",".UnderlineNav-item.selected:after",".UnderlineNav-item[aria-current]:not([aria-current=false]):after",".UnderlineNav-item[role=tab][aria-selected=true]:after",".UnderlineNav--right",".UnderlineNav--right .UnderlineNav-actions",".UnderlineNav-actions",".UnderlineNav--full",".UnderlineNav--full .UnderlineNav-body",".UnderlineNav-octicon",".UnderlineNav-container"]}

data/app/components/yattho/alpha/underline_nav.css.map

@@ -1 +1 @@
-{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAAA,iBAAiB;;AAEjB;EACE,aAAa;EACb,qCAAqC;EACrC,gBAAgB;EAChB,kBAAkB;EAClB,oDAAoD;EACpD,gCAAgC;EAChC,8BAA8B;AAYhC;;AAVE;IACE,kDAAkD;IAClD,8BAA8B;IAC9B,4CAA4C;EAC9C;;AAEA;IACE,kCAAkC;IAClC,+CAA+C;EACjD;;AAGF;EACE,aAAa;EACb,mBAAmB;EACnB,0CAA0C;EAC1C,gBAAgB;AAClB;;AAEA;EACE,kBAAkB;EAClB,aAAa;EACb,oEAAoE;EACpE,oDAAoD;EACpD,iBAAiB;EACjB,8BAA8B;EAC9B,kBAAkB;EAClB,mBAAmB;EACnB,eAAe;EACf,6BAA6B;EAC7B,SAAS;EACT,qDAAqD;EACrD,mBAAmB;AAwDrB;;AAtDE;;;IAGE,8BAA8B;IAC9B,qBAAqB;IACrB,+CAA+C;IAC/C,oBAAoB;IACpB,8CAA8C;EAChD;;AAEA,sHAAsH;;AACtH;IACE,cAAc;IACd,SAAS;IACT,kDAAkD;IAClD,kBAAkB;IAClB,2BAA2B;EAC7B;;AAEA,+BAA+B;;AAE7B;EClEJ,mBAAA;EAAA,SAAA;EAAA,UAAA;EAAA,YAAA;EAAA,aAAA;EAAA,iBAAA;EAAA,YAAA;EAAA;ADkE8B;;AAG5B,qDAAqD;;AACrD;IACE;MACE,8BAA8B;MAC9B,qBAAqB;MACrB,0DAA0D;MAC1D,qCAAqC;IACvC;EACF;;AAEA;;;IAGE,kDAAkD;IAClD,8BAA8B;IAC9B,sDAAsD;;IAEtD,+BAA+B;EAYjC;;AAXE;MACE,kBAAkB;MAClB,UAAU;MACV,wBAAwB,EAAE,uCAAuC;MACjE,WAAW;MACX,WAAW;MACX,WAAW;MACX,6CAA6C;MAC7C,qDAAqD;MACrD,+BAA+B;IACjC;;AAIJ;EACE,yBAAyB;AAK3B;;AAHE;IACE,cAAc;EAChB;;AAGF;EACE,kBAAkB;AACpB;;AAEA;EACE,cAAc;;EAEd,oEAAoE;AAItE;;AAHE;IACE,qCAAqC;EACvC;;AAGF;EACE,0BAA0B;AAI5B;;AALA;EAEE,mDAAmD;EACnD,4BAA4B;EAC5B,2BAA2B;AAC7B;;AAEA;EACE,aAAa;EACb,8BAA8B;AAChC","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n  display: flex;\n  min-height: var(--base-size-48, 48px);\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--color-border-muted);\n  -webkit-overflow-scrolling: auto;\n  justify-content: space-between;\n\n  & .Counter {\n    margin-left: var(--yattho-control-medium-gap, 8px);\n    color: var(--color-fg-default);\n    background-color: var(--color-neutral-muted);\n  }\n\n  & .Counter--primary {\n    color: var(--color-fg-on-emphasis);\n    background-color: var(--color-neutral-emphasis);\n  }\n}\n\n.UnderlineNav-body {\n  display: flex;\n  align-items: center;\n  gap: var(--yattho-control-medium-gap, 8px);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--yattho-control-medium-paddingInline-condensed, 8px);\n  font-size: var(--yattho-text-body-size-medium, 14px);\n  line-height: 30px;\n  color: var(--color-fg-default);\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n  align-items: center;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    color: var(--color-fg-default);\n    text-decoration: none;\n    border-bottom-color: var(--color-neutral-muted);\n    outline-offset: -2px;\n    transition: border-bottom-color 0.12s ease-out;\n  }\n\n  /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n  & [data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold, 600);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* increase touch target area */\n  &::before {\n    @mixin minTouchTarget 48px;\n  }\n\n  /* hover state was \"sticking\" on mobile after click */\n  @media (pointer: fine) {\n    &:hover {\n      color: var(--color-fg-default);\n      text-decoration: none;\n      background: var(--color-action-list-item-default-hover-bg);\n      transition: background 0.12s ease-out;\n    }\n  }\n\n  &.selected,\n  &[role='tab'][aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    font-weight: var(--base-text-weight-semibold, 600);\n    color: var(--color-fg-default);\n    border-bottom-color: var(--color-yattho-border-active);\n\n    /* current/selected underline */\n    &::after {\n      position: absolute;\n      right: 50%;\n      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n      width: 100%;\n      height: 2px;\n      content: '';\n      background: var(--color-yattho-border-active);\n      border-radius: var(--yattho-borderRadius-medium, 6px);\n      transform: translate(50%, -50%);\n    }\n  }\n}\n\n.UnderlineNav--right {\n  justify-content: flex-end;\n\n  & .UnderlineNav-actions {\n    flex: 1 1 auto;\n  }\n}\n\n.UnderlineNav-actions {\n  align-self: center;\n}\n\n.UnderlineNav--full {\n  display: block;\n\n  /* required for underline to align with additional wrapper element */\n  & .UnderlineNav-body {\n    min-height: var(--base-size-48, 48px);\n  }\n}\n\n.UnderlineNav-octicon {\n  display: inline !important;\n  margin-right: var(--yattho-control-medium-gap, 8px);\n  color: var(--color-fg-muted);\n  fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n  display: flex;\n  justify-content: space-between;\n}",null]}
+{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,mDAAoD,CAJpD,YAAa,CAMb,6BAA8B,CAL9B,mCAAqC,CACrC,eAAgB,CAChB,iBAeF,CAVE,uBAGE,2CAA4C,CAD5C,6BAA8B,CAD9B,gDAGF,CAEA,gCAEE,8CAA+C,CAD/C,iCAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,wCAA0C,CAC1C,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,mDAAqD,CANrD,6BAA8B,CAG9B,cAAe,CAPf,YAAa,CAEb,kDAAoD,CACpD,gBAAiB,CAFjB,kEAAoE,CAFpE,iBAAkB,CAMlB,iBAAkB,CAClB,kBA6DF,CAtDE,mFAKE,8CAA+C,CAF/C,6BAA8B,CAG9B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,yDAA0D,CAF1D,6BAA8B,CAC9B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,qDAAsD,CADtD,6BAA8B,CAD9B,gDAgBF,CAXE,0JAOE,4CAA6C,CAC7C,mDAAqD,CALrD,uBAAwB,CAGxB,UAAW,CADX,UAAW,CAJX,iBAAkB,CAClB,SAAU,CAOV,6BAA+B,CAL/B,UAMF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,0BAA2B,CAD3B,2BAA4B,CAF5B,wBAA0B,CAC1B,iDAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n  display: flex;\n  min-height: var(--base-size-48, 48px);\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--color-border-muted);\n  -webkit-overflow-scrolling: auto;\n  justify-content: space-between;\n\n  & .Counter {\n    margin-left: var(--yattho-control-medium-gap, 8px);\n    color: var(--color-fg-default);\n    background-color: var(--color-neutral-muted);\n  }\n\n  & .Counter--primary {\n    color: var(--color-fg-on-emphasis);\n    background-color: var(--color-neutral-emphasis);\n  }\n}\n\n.UnderlineNav-body {\n  display: flex;\n  align-items: center;\n  gap: var(--yattho-control-medium-gap, 8px);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--yattho-control-medium-paddingInline-condensed, 8px);\n  font-size: var(--yattho-text-body-size-medium, 14px);\n  line-height: 30px;\n  color: var(--color-fg-default);\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n  align-items: center;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    color: var(--color-fg-default);\n    text-decoration: none;\n    border-bottom-color: var(--color-neutral-muted);\n    outline-offset: -2px;\n    transition: border-bottom-color 0.12s ease-out;\n  }\n\n  /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n  & [data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold, 600);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* increase touch target area */\n  &::before {\n    @mixin minTouchTarget 48px;\n  }\n\n  /* hover state was \"sticking\" on mobile after click */\n  @media (pointer: fine) {\n    &:hover {\n      color: var(--color-fg-default);\n      text-decoration: none;\n      background: var(--color-action-list-item-default-hover-bg);\n      transition: background 0.12s ease-out;\n    }\n  }\n\n  &.selected,\n  &[role='tab'][aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    font-weight: var(--base-text-weight-semibold, 600);\n    color: var(--color-fg-default);\n    border-bottom-color: var(--color-yattho-border-active);\n\n    /* current/selected underline */\n    &::after {\n      position: absolute;\n      right: 50%;\n      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n      width: 100%;\n      height: 2px;\n      content: '';\n      background: var(--color-yattho-border-active);\n      border-radius: var(--yattho-borderRadius-medium, 6px);\n      transform: translate(50%, -50%);\n    }\n  }\n}\n\n.UnderlineNav--right {\n  justify-content: flex-end;\n\n  & .UnderlineNav-actions {\n    flex: 1 1 auto;\n  }\n}\n\n.UnderlineNav-actions {\n  align-self: center;\n}\n\n.UnderlineNav--full {\n  display: block;\n\n  /* required for underline to align with additional wrapper element */\n  & .UnderlineNav-body {\n    min-height: var(--base-size-48, 48px);\n  }\n}\n\n.UnderlineNav-octicon {\n  display: inline !important;\n  margin-right: var(--yattho-control-medium-gap, 8px);\n  color: var(--color-fg-muted);\n  fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n  display: flex;\n  justify-content: space-between;\n}",null]}

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

@@ -1,74 +1 @@
-/* avatar */
-
-.avatar {
-  display: inline-block;
-  overflow: hidden; /* Ensure page layout in Firefox should images fail to load */
-  line-height: 1;
-  vertical-align: middle;
-  background-color: var(--color-avatar-bg); /* adds opaque bg to transparent avatars */
-  border-radius: var(--yattho-borderRadius-medium, 6px);
-  flex-shrink: 0;
-  box-shadow: 0 0 0 1px var(--color-avatar-border);
-}
-
-.avatar-link {
-  float: left;
-  line-height: 1;
-}
-
-/* User for example on /stars and /user for grids of avatars */
-
-.avatar-group-item {
-  display: inline-block;
-  margin-bottom: 3px;
-}
-
-/* Border radius */
-
-.avatar-1,
-.avatar-2,
-.avatar-small {
-  border-radius: var(--yattho-borderRadius-small, 4px);
-}
-
-/* Sizes */
-
-.avatar-1 {
-  width: var(--base-size-16, 16px);
-  height: var(--base-size-16, 16px);
-}
-
-.avatar-2 {
-  width: var(--base-size-20, 20px);
-  height: var(--base-size-20, 20px);
-}
-
-.avatar-3 {
-  width: var(--base-size-24, 24px);
-  height: var(--base-size-24, 24px);
-}
-
-.avatar-4 {
-  width: var(--base-size-28, 28px);
-  height: var(--base-size-28, 28px);
-}
-
-.avatar-5 {
-  width: var(--base-size-32, 32px);
-  height: var(--base-size-32, 32px);
-}
-
-.avatar-6 {
-  width: var(--base-size-40, 40px);
-  height: var(--base-size-40, 40px);
-}
-
-.avatar-7 {
-  width: var(--base-size-48, 48px);
-  height: var(--base-size-48, 48px);
-}
-
-.avatar-8 {
-  width: var(--base-size-64, 64px);
-  height: var(--base-size-64, 64px);
-}
+.avatar{background-color:var(--color-avatar-bg);border-radius:var(--yattho-borderRadius-medium,6px);box-shadow:0 0 0 1px var(--color-avatar-border);display:inline-block;flex-shrink:0;line-height:1;overflow:hidden;vertical-align:middle}.avatar-link{float:left;line-height:1}.avatar-group-item{display:inline-block;margin-bottom:3px}.avatar-1,.avatar-2,.avatar-small{border-radius:var(--yattho-borderRadius-small,4px)}.avatar-1{height:var(--base-size-16,16px);width:var(--base-size-16,16px)}.avatar-2{height:var(--base-size-20,20px);width:var(--base-size-20,20px)}.avatar-3{height:var(--base-size-24,24px);width:var(--base-size-24,24px)}.avatar-4{height:var(--base-size-28,28px);width:var(--base-size-28,28px)}.avatar-5{height:var(--base-size-32,32px);width:var(--base-size-32,32px)}.avatar-6{height:var(--base-size-40,40px);width:var(--base-size-40,40px)}.avatar-7{height:var(--base-size-48,48px);width:var(--base-size-48,48px)}.avatar-8{height:var(--base-size-64,64px);width:var(--base-size-64,64px)}

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

@@ -1 +1 @@
-{"name":"beta/avatar","selectors":[".avatar",".avatar-link",".avatar-group-item",".avatar-1","\n.avatar-2","\n.avatar-small",".avatar-2",".avatar-3",".avatar-4",".avatar-5",".avatar-6",".avatar-7",".avatar-8"]}
+{"name":"beta/avatar","selectors":[".avatar",".avatar-link",".avatar-group-item",".avatar-1",".avatar-2",".avatar-small",".avatar-3",".avatar-4",".avatar-5",".avatar-6",".avatar-7",".avatar-8"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["avatar.pcss"],"names":[],"mappings":"AAAA,WAAW;;AAEX;EACE,qBAAqB;EACrB,gBAAgB,EAAE,6DAA6D;EAC/E,cAAc;EACd,sBAAsB;EACtB,wCAAwC,EAAE,0CAA0C;EACpF,qDAAqD;EACrD,cAAc;EACd,gDAAgD;AAClD;;AAEA;EACE,WAAW;EACX,cAAc;AAChB;;AAEA,8DAA8D;;AAC9D;EACE,qBAAqB;EACrB,kBAAkB;AACpB;;AAEA,kBAAkB;;AAElB;;;EAGE,oDAAoD;AACtD;;AAEA,UAAU;;AAEV;EACE,gCAAgC;EAChC,iCAAiC;AACnC;;AAEA;EACE,gCAAgC;EAChC,iCAAiC;AACnC;;AAEA;EACE,gCAAgC;EAChC,iCAAiC;AACnC;;AAEA;EACE,gCAAgC;EAChC,iCAAiC;AACnC;;AAEA;EACE,gCAAgC;EAChC,iCAAiC;AACnC;;AAEA;EACE,gCAAgC;EAChC,iCAAiC;AACnC;;AAEA;EACE,gCAAgC;EAChC,iCAAiC;AACnC;;AAEA;EACE,gCAAgC;EAChC,iCAAiC;AACnC","file":"avatar.css","sourcesContent":["/* avatar */\n\n.avatar {\n  display: inline-block;\n  overflow: hidden; /* Ensure page layout in Firefox should images fail to load */\n  line-height: 1;\n  vertical-align: middle;\n  background-color: var(--color-avatar-bg); /* adds opaque bg to transparent avatars */\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n  flex-shrink: 0;\n  box-shadow: 0 0 0 1px var(--color-avatar-border);\n}\n\n.avatar-link {\n  float: left;\n  line-height: 1;\n}\n\n/* User for example on /stars and /user for grids of avatars */\n.avatar-group-item {\n  display: inline-block;\n  margin-bottom: 3px;\n}\n\n/* Border radius */\n\n.avatar-1,\n.avatar-2,\n.avatar-small {\n  border-radius: var(--yattho-borderRadius-small, 4px);\n}\n\n/* Sizes */\n\n.avatar-1 {\n  width: var(--base-size-16, 16px);\n  height: var(--base-size-16, 16px);\n}\n\n.avatar-2 {\n  width: var(--base-size-20, 20px);\n  height: var(--base-size-20, 20px);\n}\n\n.avatar-3 {\n  width: var(--base-size-24, 24px);\n  height: var(--base-size-24, 24px);\n}\n\n.avatar-4 {\n  width: var(--base-size-28, 28px);\n  height: var(--base-size-28, 28px);\n}\n\n.avatar-5 {\n  width: var(--base-size-32, 32px);\n  height: var(--base-size-32, 32px);\n}\n\n.avatar-6 {\n  width: var(--base-size-40, 40px);\n  height: var(--base-size-40, 40px);\n}\n\n.avatar-7 {\n  width: var(--base-size-48, 48px);\n  height: var(--base-size-48, 48px);\n}\n\n.avatar-8 {\n  width: var(--base-size-64, 64px);\n  height: var(--base-size-64, 64px);\n}"]}
+{"version":3,"sources":["avatar.pcss"],"names":[],"mappings":"AAEA,QAKE,uCAAwC,CACxC,mDAAqD,CAErD,+CAAgD,CAPhD,oBAAqB,CAMrB,aAAc,CAJd,aAAc,CADd,eAAgB,CAEhB,qBAKF,CAEA,aACE,UAAW,CACX,aACF,CAGA,mBACE,oBAAqB,CACrB,iBACF,CAIA,kCAGE,kDACF,CAIA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF","file":"avatar.css","sourcesContent":["/* avatar */\n\n.avatar {\n  display: inline-block;\n  overflow: hidden; /* Ensure page layout in Firefox should images fail to load */\n  line-height: 1;\n  vertical-align: middle;\n  background-color: var(--color-avatar-bg); /* adds opaque bg to transparent avatars */\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n  flex-shrink: 0;\n  box-shadow: 0 0 0 1px var(--color-avatar-border);\n}\n\n.avatar-link {\n  float: left;\n  line-height: 1;\n}\n\n/* User for example on /stars and /user for grids of avatars */\n.avatar-group-item {\n  display: inline-block;\n  margin-bottom: 3px;\n}\n\n/* Border radius */\n\n.avatar-1,\n.avatar-2,\n.avatar-small {\n  border-radius: var(--yattho-borderRadius-small, 4px);\n}\n\n/* Sizes */\n\n.avatar-1 {\n  width: var(--base-size-16, 16px);\n  height: var(--base-size-16, 16px);\n}\n\n.avatar-2 {\n  width: var(--base-size-20, 20px);\n  height: var(--base-size-20, 20px);\n}\n\n.avatar-3 {\n  width: var(--base-size-24, 24px);\n  height: var(--base-size-24, 24px);\n}\n\n.avatar-4 {\n  width: var(--base-size-28, 28px);\n  height: var(--base-size-28, 28px);\n}\n\n.avatar-5 {\n  width: var(--base-size-32, 32px);\n  height: var(--base-size-32, 32px);\n}\n\n.avatar-6 {\n  width: var(--base-size-40, 40px);\n  height: var(--base-size-40, 40px);\n}\n\n.avatar-7 {\n  width: var(--base-size-48, 48px);\n  height: var(--base-size-48, 48px);\n}\n\n.avatar-8 {\n  width: var(--base-size-64, 64px);\n  height: var(--base-size-64, 64px);\n}"]}

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

@@ -1,138 +1 @@
-/* AvatarStack */
-
-/* Stacked avatars can be used to show who is participating in thread when
-** there is limited space available. */
-
-.AvatarStack {
-  position: relative;
-  min-width: 26px;
-  height: 20px;
-}
-
-.AvatarStack .AvatarStack-body {
-    position: absolute;
-  }
-
-.AvatarStack.AvatarStack--two {
-    min-width: 36px;
-  }
-
-.AvatarStack.AvatarStack--three-plus {
-    min-width: 46px;
-  }
-
-.AvatarStack-body {
-  display: flex;
-  background: var(--color-canvas-default);
-  border-radius: 100px;
-}
-
-.AvatarStack-body .avatar {
-    position: relative;
-    z-index: 2;
-    display: flex;
-    width: 20px;
-    height: 20px;
-    box-sizing: content-box;
-    margin-right: -11px;
-    background-color: var(--color-canvas-default);
-    border-right: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);
-    border-radius: var(--yattho-borderRadius-small, 4px);
-    box-shadow: none;
-    transition: margin 0.1s ease-in-out;
-  }
-
-.AvatarStack-body .avatar:first-child {
-      z-index: 3;
-    }
-
-.AvatarStack-body .avatar:last-child {
-      z-index: 1;
-      border-right: 0;
-    }
-
-.AvatarStack-body .avatar img {
-      border-radius: var(--yattho-borderRadius-small, 4px);
-    }
-
-/* Account for 4+ avatars */
-
-.AvatarStack-body .avatar:nth-child(n + 4) {
-      display: none;
-      opacity: 0;
-    }
-
-.AvatarStack-body:hover .avatar {
-      margin-right: 3px;
-    }
-
-.AvatarStack-body:hover .avatar:nth-child(n + 4) {
-      display: flex;
-      opacity: 1;
-    }
-
-.AvatarStack-body:hover .avatar-more {
-      display: none !important;
-    }
-
-.avatar.avatar-more {
-  z-index: 1;
-  margin-right: 0;
-  background: var(--color-canvas-subtle);
-}
-
-.avatar.avatar-more::before,
-  .avatar.avatar-more::after {
-    position: absolute;
-    display: block;
-    height: 20px;
-    content: '';
-    border-radius: 2px;
-    outline: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);
-  }
-
-.avatar.avatar-more::before {
-    width: 17px;
-    background: var(--color-avatar-stack-fade-more);
-  }
-
-.avatar.avatar-more::after {
-    width: 14px;
-    background: var(--color-avatar-stack-fade);
-  }
-
-/* Right aligned variation */
-
-.AvatarStack--right .AvatarStack-body {
-    right: 0;
-    flex-direction: row-reverse;
-  }
-
-.AvatarStack--right .AvatarStack-body:hover .avatar {
-      margin-right: 0;
-      margin-left: 3px;
-    }
-
-.AvatarStack--right .AvatarStack-body .avatar:not(:last-child) {
-      border-left: 0;
-    }
-
-.AvatarStack--right .avatar.avatar-more {
-    background: var(--color-avatar-stack-fade);
-  }
-
-.AvatarStack--right .avatar.avatar-more::before {
-      width: 5px;
-    }
-
-.AvatarStack--right .avatar.avatar-more::after {
-      width: 2px;
-      background: var(--color-canvas-subtle);
-    }
-
-.AvatarStack--right .avatar {
-    margin-right: 0;
-    margin-left: -11px;
-    border-right: 0;
-    border-left: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);
-  }
+.AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--color-canvas-default);border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--color-canvas-default);border-radius:var(--yattho-borderRadius-small,4px);border-right:var(--yattho-borderWidth-thin,1px) solid var(--color-canvas-default);box-shadow:none;box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}.AvatarStack-body .avatar:first-child{z-index:3}.AvatarStack-body .avatar:last-child{border-right:0;z-index:1}.AvatarStack-body .avatar img{border-radius:var(--yattho-borderRadius-small,4px)}.AvatarStack-body .avatar:nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:3px}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none!important}.avatar.avatar-more{background:var(--color-canvas-subtle);margin-right:0;z-index:1}.avatar.avatar-more:after,.avatar.avatar-more:before{border-radius:2px;content:"";display:block;height:20px;outline:var(--yattho-borderWidth-thin,1px) solid var(--color-canvas-default);position:absolute}.avatar.avatar-more:before{background:var(--color-avatar-stack-fade-more);width:17px}.avatar.avatar-more:after{background:var(--color-avatar-stack-fade);width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}.AvatarStack--right .AvatarStack-body:hover .avatar{margin-left:3px;margin-right:0}.AvatarStack--right .AvatarStack-body .avatar:not(:last-child){border-left:0}.AvatarStack--right .avatar.avatar-more{background:var(--color-avatar-stack-fade)}.AvatarStack--right .avatar.avatar-more:before{width:5px}.AvatarStack--right .avatar.avatar-more:after{background:var(--color-canvas-subtle);width:2px}.AvatarStack--right .avatar{border-left:var(--yattho-borderWidth-thin,1px) solid var(--color-canvas-default);border-right:0;margin-left:-11px;margin-right:0}

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

@@ -1 +1 @@
-{"name":"beta/avatar_stack","selectors":[".AvatarStack",".AvatarStack .AvatarStack-body",".AvatarStack.AvatarStack--two",".AvatarStack.AvatarStack--three-plus",".AvatarStack-body",".AvatarStack-body .avatar",".AvatarStack-body .avatar:first-child",".AvatarStack-body .avatar:last-child",".AvatarStack-body .avatar img",".AvatarStack-body .avatar:nth-child(n + 4)",".AvatarStack-body:hover .avatar",".AvatarStack-body:hover .avatar:nth-child(n + 4)",".AvatarStack-body:hover .avatar-more",".avatar.avatar-more",".avatar.avatar-more::before","\n  .avatar.avatar-more::after",".avatar.avatar-more::after",".AvatarStack--right .AvatarStack-body",".AvatarStack--right .AvatarStack-body:hover .avatar",".AvatarStack--right .AvatarStack-body .avatar:not(:last-child)",".AvatarStack--right .avatar.avatar-more",".AvatarStack--right .avatar.avatar-more::before",".AvatarStack--right .avatar.avatar-more::after",".AvatarStack--right .avatar"]}
+{"name":"beta/avatar_stack","selectors":[".AvatarStack",".AvatarStack .AvatarStack-body",".AvatarStack.AvatarStack--two",".AvatarStack.AvatarStack--three-plus",".AvatarStack-body",".AvatarStack-body .avatar",".AvatarStack-body .avatar:first-child",".AvatarStack-body .avatar:last-child",".AvatarStack-body .avatar img",".AvatarStack-body .avatar:nth-child(n+4)",".AvatarStack-body:hover .avatar",".AvatarStack-body:hover .avatar:nth-child(n+4)",".AvatarStack-body:hover .avatar-more",".avatar.avatar-more",".avatar.avatar-more:after",".avatar.avatar-more:before",".AvatarStack--right .AvatarStack-body",".AvatarStack--right .AvatarStack-body:hover .avatar",".AvatarStack--right .AvatarStack-body .avatar:not(:last-child)",".AvatarStack--right .avatar.avatar-more",".AvatarStack--right .avatar.avatar-more:before",".AvatarStack--right .avatar.avatar-more:after",".AvatarStack--right .avatar"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAAA,gBAAgB;;AAEhB;sCACsC;;AAEtC;EACE,kBAAkB;EAClB,eAAe;EACf,YAAY;AAad;;AAXE;IACE,kBAAkB;EACpB;;AAEA;IACE,eAAe;EACjB;;AAEA;IACE,eAAe;EACjB;;AAGF;EACE,aAAa;EACb,uCAAuC;EACvC,oBAAoB;AAkDtB;;AAhDE;IACE,kBAAkB;IAClB,UAAU;IACV,aAAa;IACb,WAAW;IACX,YAAY;IACZ,uBAAuB;IACvB,mBAAmB;IACnB,6CAA6C;IAC7C,mFAAmF;IACnF,oDAAoD;IACpD,gBAAgB;IAChB,mCAAmC;EAoBrC;;AAlBE;MACE,UAAU;IACZ;;AAEA;MACE,UAAU;MACV,eAAe;IACjB;;AAEA;MACE,oDAAoD;IACtD;;AAEA,2BAA2B;;AAC3B;MACE,aAAa;MACb,UAAU;IACZ;;AAIA;MACE,iBAAiB;IACnB;;AAEA;MACE,aAAa;MACb,UAAU;IACZ;;AAEA;MACE,wBAAwB;IAC1B;;AAIJ;EACE,UAAU;EACV,eAAe;EACf,sCAAsC;AAqBxC;;AAnBE;;IAEE,kBAAkB;IAClB,cAAc;IACd,YAAY;IACZ,WAAW;IACX,kBAAkB;IAClB,8EAA8E;EAChF;;AAEA;IACE,WAAW;IACX,+CAA+C;EACjD;;AAEA;IACE,WAAW;IACX,0CAA0C;EAC5C;;AAGF,4BAA4B;;AAG1B;IACE,QAAQ;IACR,2BAA2B;EAU7B;;AARE;MACE,eAAe;MACf,gBAAgB;IAClB;;AAEA;MACE,cAAc;IAChB;;AAGF;IACE,0CAA0C;EAU5C;;AARE;MACE,UAAU;IACZ;;AAEA;MACE,UAAU;MACV,sCAAsC;IACxC;;AAGF;IACE,eAAe;IACf,kBAAkB;IAClB,eAAe;IACf,kFAAkF;EACpF","file":"avatar_stack.css","sourcesContent":["/* AvatarStack */\n\n/* Stacked avatars can be used to show who is participating in thread when\n** there is limited space available. */\n\n.AvatarStack {\n  position: relative;\n  min-width: 26px;\n  height: 20px;\n\n  & .AvatarStack-body {\n    position: absolute;\n  }\n\n  &.AvatarStack--two {\n    min-width: 36px;\n  }\n\n  &.AvatarStack--three-plus {\n    min-width: 46px;\n  }\n}\n\n.AvatarStack-body {\n  display: flex;\n  background: var(--color-canvas-default);\n  border-radius: 100px;\n\n  & .avatar {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    width: 20px;\n    height: 20px;\n    box-sizing: content-box;\n    margin-right: -11px;\n    background-color: var(--color-canvas-default);\n    border-right: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);\n    border-radius: var(--yattho-borderRadius-small, 4px);\n    box-shadow: none;\n    transition: margin 0.1s ease-in-out;\n\n    &:first-child {\n      z-index: 3;\n    }\n\n    &:last-child {\n      z-index: 1;\n      border-right: 0;\n    }\n\n    & img {\n      border-radius: var(--yattho-borderRadius-small, 4px);\n    }\n\n    /* Account for 4+ avatars */\n    &:nth-child(n + 4) {\n      display: none;\n      opacity: 0;\n    }\n  }\n\n  &:hover {\n    & .avatar {\n      margin-right: 3px;\n    }\n\n    & .avatar:nth-child(n + 4) {\n      display: flex;\n      opacity: 1;\n    }\n\n    & .avatar-more {\n      display: none !important;\n    }\n  }\n}\n\n.avatar.avatar-more {\n  z-index: 1;\n  margin-right: 0;\n  background: var(--color-canvas-subtle);\n\n  &::before,\n  &::after {\n    position: absolute;\n    display: block;\n    height: 20px;\n    content: '';\n    border-radius: 2px;\n    outline: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);\n  }\n\n  &::before {\n    width: 17px;\n    background: var(--color-avatar-stack-fade-more);\n  }\n\n  &::after {\n    width: 14px;\n    background: var(--color-avatar-stack-fade);\n  }\n}\n\n/* Right aligned variation */\n\n.AvatarStack--right {\n  & .AvatarStack-body {\n    right: 0;\n    flex-direction: row-reverse;\n\n    &:hover .avatar {\n      margin-right: 0;\n      margin-left: 3px;\n    }\n\n    & .avatar:not(:last-child) {\n      border-left: 0;\n    }\n  }\n\n  & .avatar.avatar-more {\n    background: var(--color-avatar-stack-fade);\n\n    &::before {\n      width: 5px;\n    }\n\n    &::after {\n      width: 2px;\n      background: var(--color-canvas-subtle);\n    }\n  }\n\n  & .avatar {\n    margin-right: 0;\n    margin-left: -11px;\n    border-right: 0;\n    border-left: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);\n  }\n}"]}
+{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAKA,aAGE,WAAY,CADZ,cAAe,CADf,iBAeF,CAXE,+BACE,iBACF,CAEA,8BACE,cACF,CAEA,qCACE,cACF,CAGF,kBAEE,sCAAuC,CACvC,mBAAoB,CAFpB,YAoDF,CAhDE,0BAQE,4CAA6C,CAE7C,kDAAoD,CADpD,iFAAmF,CAEnF,eAAgB,CALhB,kBAAuB,CAHvB,YAAa,CAEb,WAAY,CAEZ,kBAAmB,CANnB,iBAAkB,CAWlB,iCAAmC,CARnC,UAAW,CAFX,SA8BF,CAlBE,sCACE,SACF,CAEA,qCAEE,cAAe,CADf,SAEF,CAEA,8BACE,kDACF,CAGA,yCACE,YAAa,CACb,SACF,CAIA,gCACE,gBACF,CAEA,+CACE,YAAa,CACb,SACF,CAEA,qCACE,sBACF,CAIJ,oBAGE,qCAAsC,CADtC,cAAe,CADf,SAuBF,CAnBE,qDAME,iBAAkB,CADlB,UAAW,CAFX,aAAc,CACd,WAAY,CAGZ,4EAA8E,CAL9E,iBAMF,CAEA,2BAEE,8CAA+C,CAD/C,UAEF,CAEA,0BAEE,yCAA0C,CAD1C,UAEF,CAMA,sCAEE,0BAA2B,CAD3B,OAWF,CARE,oDAEE,eAAgB,CADhB,cAEF,CAEA,+DACE,aACF,CAGF,wCACE,yCAUF,CARE,+CACE,SACF,CAEA,8CAEE,qCAAsC,CADtC,SAEF,CAGF,4BAIE,gFAAkF,CADlF,cAAe,CADf,iBAAkB,CADlB,cAIF","file":"avatar_stack.css","sourcesContent":["/* AvatarStack */\n\n/* Stacked avatars can be used to show who is participating in thread when\n** there is limited space available. */\n\n.AvatarStack {\n  position: relative;\n  min-width: 26px;\n  height: 20px;\n\n  & .AvatarStack-body {\n    position: absolute;\n  }\n\n  &.AvatarStack--two {\n    min-width: 36px;\n  }\n\n  &.AvatarStack--three-plus {\n    min-width: 46px;\n  }\n}\n\n.AvatarStack-body {\n  display: flex;\n  background: var(--color-canvas-default);\n  border-radius: 100px;\n\n  & .avatar {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    width: 20px;\n    height: 20px;\n    box-sizing: content-box;\n    margin-right: -11px;\n    background-color: var(--color-canvas-default);\n    border-right: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);\n    border-radius: var(--yattho-borderRadius-small, 4px);\n    box-shadow: none;\n    transition: margin 0.1s ease-in-out;\n\n    &:first-child {\n      z-index: 3;\n    }\n\n    &:last-child {\n      z-index: 1;\n      border-right: 0;\n    }\n\n    & img {\n      border-radius: var(--yattho-borderRadius-small, 4px);\n    }\n\n    /* Account for 4+ avatars */\n    &:nth-child(n + 4) {\n      display: none;\n      opacity: 0;\n    }\n  }\n\n  &:hover {\n    & .avatar {\n      margin-right: 3px;\n    }\n\n    & .avatar:nth-child(n + 4) {\n      display: flex;\n      opacity: 1;\n    }\n\n    & .avatar-more {\n      display: none !important;\n    }\n  }\n}\n\n.avatar.avatar-more {\n  z-index: 1;\n  margin-right: 0;\n  background: var(--color-canvas-subtle);\n\n  &::before,\n  &::after {\n    position: absolute;\n    display: block;\n    height: 20px;\n    content: '';\n    border-radius: 2px;\n    outline: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);\n  }\n\n  &::before {\n    width: 17px;\n    background: var(--color-avatar-stack-fade-more);\n  }\n\n  &::after {\n    width: 14px;\n    background: var(--color-avatar-stack-fade);\n  }\n}\n\n/* Right aligned variation */\n\n.AvatarStack--right {\n  & .AvatarStack-body {\n    right: 0;\n    flex-direction: row-reverse;\n\n    &:hover .avatar {\n      margin-right: 0;\n      margin-left: 3px;\n    }\n\n    & .avatar:not(:last-child) {\n      border-left: 0;\n    }\n  }\n\n  & .avatar.avatar-more {\n    background: var(--color-avatar-stack-fade);\n\n    &::before {\n      width: 5px;\n    }\n\n    &::after {\n      width: 2px;\n      background: var(--color-canvas-subtle);\n    }\n  }\n\n  & .avatar {\n    margin-right: 0;\n    margin-left: -11px;\n    border-right: 0;\n    border-left: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);\n  }\n}"]}

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

@@ -1,90 +1 @@
-/* blankslate */
-
-.blankslate {
-  position: relative;
-  padding: var(--base-size-32, 32px);
-  text-align: center;
-}
-
-.blankslate p {
-    color: var(--color-fg-muted);
-  }
-
-.blankslate code {
-    padding: 2px 5px 3px;
-    font-size: var(--yattho-text-body-size-medium, 14px);
-    background: var(--color-canvas-default);
-    border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted);
-    border-radius: var(--yattho-borderRadius-medium, 6px);
-  }
-
-.blankslate img {
-    width: 56px;
-    height: 56px;
-  }
-
-.blankslate-icon {
-  margin-right: var(--yattho-control-small-gap, 4px);
-  margin-bottom: var(--yattho-stack-gap-condensed, 8px);
-  margin-left: var(--yattho-control-small-gap, 4px);
-  color: var(--color-fg-muted);
-}
-
-.blankslate-image {
-  margin-bottom: var(--yattho-stack-gap-normal, 16px);
-}
-
-.blankslate-heading {
-  margin-bottom: var(--base-size-4, 4px);
-}
-
-.blankslate-action {
-  margin-top: var(--yattho-stack-gap-normal, 16px);
-}
-
-.blankslate-action:first-of-type {
-    margin-top: var(--yattho-stack-gap-spacious, 24px);
-  }
-
-.blankslate-action:last-of-type {
-    margin-bottom: var(--yattho-stack-gap-condensed, 8px);
-  }
-
-.blankslate-capped {
-  border-radius: 0 0 var(--yattho-borderRadius-medium, 6px) var(--yattho-borderRadius-medium, 6px);
-}
-
-.blankslate-spacious {
-  padding: var(--base-size-80, 80px) var(--base-size-40, 40px);
-}
-
-.blankslate-narrow {
-  max-width: 485px;
-  margin: 0 auto;
-}
-
-/* was .large-format
-** QUESTION: should we deprecate this? */
-
-.blankslate-large img {
-    width: 80px;
-    height: 80px;
-  }
-
-.blankslate-large h3 {
-    margin: var(--yattho-stack-gap-normal, 16px) 0;
-
-    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
-    font-size: 24px;
-  }
-
-.blankslate-large p {
-    font-size: var(--yattho-text-body-size-large, 16px);
-  }
-
-/* was .clean-background
-** TO DO: deprecate this and use utility instead */
-
-.blankslate-clean-background {
-  border: 0;
-}
+.blankslate{padding:var(--base-size-32,32px);position:relative;text-align:center}.blankslate p{color:var(--color-fg-muted)}.blankslate code{background:var(--color-canvas-default);border:var(--yattho-borderWidth-thin,1px) solid var(--color-border-muted);border-radius:var(--yattho-borderRadius-medium,6px);font-size:var(--yattho-text-body-size-medium,14px);padding:2px 5px 3px}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--color-fg-muted);margin-bottom:var(--yattho-stack-gap-condensed,8px);margin-left:var(--yattho-control-small-gap,4px);margin-right:var(--yattho-control-small-gap,4px)}.blankslate-image{margin-bottom:var(--yattho-stack-gap-normal,16px)}.blankslate-heading{margin-bottom:var(--base-size-4,4px)}.blankslate-action{margin-top:var(--yattho-stack-gap-normal,16px)}.blankslate-action:first-of-type{margin-top:var(--yattho-stack-gap-spacious,24px)}.blankslate-action:last-of-type{margin-bottom:var(--yattho-stack-gap-condensed,8px)}.blankslate-capped{border-radius:0 0 var(--yattho-borderRadius-medium,6px) var(--yattho-borderRadius-medium,6px)}.blankslate-spacious{padding:var(--base-size-80,80px) var(--base-size-40,40px)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--yattho-stack-gap-normal,16px) 0}.blankslate-large p{font-size:var(--yattho-text-body-size-large,16px)}.blankslate-clean-background{border:0}

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

@@ -1 +1 @@
-{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAAA,eAAe;;AAEf;EACE,kBAAkB;EAClB,kCAAkC;EAClC,kBAAkB;AAkBpB;;AAhBE;IACE,4BAA4B;EAC9B;;AAEA;IACE,oBAAoB;IACpB,oDAAoD;IACpD,uCAAuC;IACvC,2EAA2E;IAC3E,qDAAqD;EACvD;;AAEA;IACE,WAAW;IACX,YAAY;EACd;;AAGF;EACE,kDAAkD;EAClD,qDAAqD;EACrD,iDAAiD;EACjD,4BAA4B;AAC9B;;AAEA;EACE,mDAAmD;AACrD;;AAEA;EACE,sCAAsC;AACxC;;AAEA;EACE,gDAAgD;AASlD;;AAPE;IACE,kDAAkD;EACpD;;AAEA;IACE,qDAAqD;EACvD;;AAGF;EACE,gGAAgG;AAClG;;AAEA;EACE,4DAA4D;AAC9D;;AAEA;EACE,gBAAgB;EAChB,cAAc;AAChB;;AAEA;wCACwC;;AAEtC;IACE,WAAW;IACX,YAAY;EACd;;AAEA;IACE,8CAA8C;;IAE9C,iGAAiG;IACjG,eAAe;EACjB;;AAEA;IACE,mDAAmD;EACrD;;AAGF;kDACkD;;AAClD;EACE,SAAS;AACX","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate {\n  position: relative;\n  padding: var(--base-size-32, 32px);\n  text-align: center;\n\n  & p {\n    color: var(--color-fg-muted);\n  }\n\n  & code {\n    padding: 2px 5px 3px;\n    font-size: var(--yattho-text-body-size-medium, 14px);\n    background: var(--color-canvas-default);\n    border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted);\n    border-radius: var(--yattho-borderRadius-medium, 6px);\n  }\n\n  & img {\n    width: 56px;\n    height: 56px;\n  }\n}\n\n.blankslate-icon {\n  margin-right: var(--yattho-control-small-gap, 4px);\n  margin-bottom: var(--yattho-stack-gap-condensed, 8px);\n  margin-left: var(--yattho-control-small-gap, 4px);\n  color: var(--color-fg-muted);\n}\n\n.blankslate-image {\n  margin-bottom: var(--yattho-stack-gap-normal, 16px);\n}\n\n.blankslate-heading {\n  margin-bottom: var(--base-size-4, 4px);\n}\n\n.blankslate-action {\n  margin-top: var(--yattho-stack-gap-normal, 16px);\n\n  &:first-of-type {\n    margin-top: var(--yattho-stack-gap-spacious, 24px);\n  }\n\n  &:last-of-type {\n    margin-bottom: var(--yattho-stack-gap-condensed, 8px);\n  }\n}\n\n.blankslate-capped {\n  border-radius: 0 0 var(--yattho-borderRadius-medium, 6px) var(--yattho-borderRadius-medium, 6px);\n}\n\n.blankslate-spacious {\n  padding: var(--base-size-80, 80px) var(--base-size-40, 40px);\n}\n\n.blankslate-narrow {\n  max-width: 485px;\n  margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n  & img {\n    width: 80px;\n    height: 80px;\n  }\n\n  & h3 {\n    margin: var(--yattho-stack-gap-normal, 16px) 0;\n\n    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n    font-size: 24px;\n  }\n\n  & p {\n    font-size: var(--yattho-text-body-size-large, 16px);\n  }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n  border: 0;\n}"]}
+{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,YAEE,gCAAkC,CADlC,iBAAkB,CAElB,iBAkBF,CAhBE,cACE,2BACF,CAEA,iBAGE,sCAAuC,CACvC,yEAA2E,CAC3E,mDAAqD,CAHrD,kDAAoD,CADpD,mBAKF,CAEA,gBAEE,WAAY,CADZ,UAEF,CAGF,iBAIE,2BAA4B,CAF5B,mDAAqD,CACrD,+CAAiD,CAFjD,gDAIF,CAEA,kBACE,iDACF,CAEA,oBACE,oCACF,CAEA,mBACE,8CASF,CAPE,iCACE,gDACF,CAEA,gCACE,mDACF,CAGF,mBACE,6FACF,CAEA,qBACE,yDACF,CAEA,mBAEE,aAAc,CADd,eAEF,CAKE,sBAEE,WAAY,CADZ,UAEF,CAEA,qBAIE,cAAe,CAHf,4CAIF,CAEA,oBACE,iDACF,CAKF,6BACE,QACF","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate {\n  position: relative;\n  padding: var(--base-size-32, 32px);\n  text-align: center;\n\n  & p {\n    color: var(--color-fg-muted);\n  }\n\n  & code {\n    padding: 2px 5px 3px;\n    font-size: var(--yattho-text-body-size-medium, 14px);\n    background: var(--color-canvas-default);\n    border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted);\n    border-radius: var(--yattho-borderRadius-medium, 6px);\n  }\n\n  & img {\n    width: 56px;\n    height: 56px;\n  }\n}\n\n.blankslate-icon {\n  margin-right: var(--yattho-control-small-gap, 4px);\n  margin-bottom: var(--yattho-stack-gap-condensed, 8px);\n  margin-left: var(--yattho-control-small-gap, 4px);\n  color: var(--color-fg-muted);\n}\n\n.blankslate-image {\n  margin-bottom: var(--yattho-stack-gap-normal, 16px);\n}\n\n.blankslate-heading {\n  margin-bottom: var(--base-size-4, 4px);\n}\n\n.blankslate-action {\n  margin-top: var(--yattho-stack-gap-normal, 16px);\n\n  &:first-of-type {\n    margin-top: var(--yattho-stack-gap-spacious, 24px);\n  }\n\n  &:last-of-type {\n    margin-bottom: var(--yattho-stack-gap-condensed, 8px);\n  }\n}\n\n.blankslate-capped {\n  border-radius: 0 0 var(--yattho-borderRadius-medium, 6px) var(--yattho-borderRadius-medium, 6px);\n}\n\n.blankslate-spacious {\n  padding: var(--base-size-80, 80px) var(--base-size-40, 40px);\n}\n\n.blankslate-narrow {\n  max-width: 485px;\n  margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n  & img {\n    width: 80px;\n    height: 80px;\n  }\n\n  & h3 {\n    margin: var(--yattho-stack-gap-normal, 16px) 0;\n\n    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n    font-size: 24px;\n  }\n\n  & p {\n    font-size: var(--yattho-text-body-size-large, 16px);\n  }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n  border: 0;\n}"]}