cozy-bar 0.0.0-development

package/src/styles/apps.css

@@ -0,0 +1,248 @@
+[role=banner] .coz-nav-apps-btns {
+  display: flex;
+  align-items: center;
+  font-size: 1rem;
+  text-decoration: none;
+  border: none;
+  background-color: transparent;
+  line-height: 1rem;
+}
+
+[role=banner] .coz-nav-apps-btns-main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 3rem;
+  margin: 0 .75rem;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  color: black;
+  font-size: 1rem;
+}
+
+[role=banner] .coz-nav-apps-btns-main:hover,
+[role=banner] .coz-nav-apps-btns-main:focus,
+[role=banner] .coz-nav-apps-btns-main:active {
+  cursor: pointer;
+  color: black;
+}
+
+[role=banner] .coz-nav-apps-btns-main[disabled]:hover,
+[role=banner] .coz-nav-apps-btns-main[disabled]:focus,
+[role=banner] .coz-nav-apps-btns-main[disabled]:active {
+  cursor: default;
+}
+
+[role=banner] .coz-nav-app-name {
+  margin: 0 .4rem;
+  font-weight: bold;
+}
+
+[role=banner] .coz-nav-apps-btns-sep {
+  height: 1.75rem;
+  background-color: #d8d8d8;
+  width: 1px;
+}
+
+[role=banner] .coz-nav-apps-btns-home {
+  height: 2rem;
+  margin-right: .75rem;
+}
+
+[role=banner] .coz-nav-apps-btns-home.--flagship {
+  background: none;
+  border: 0;
+  height: 100%;
+}
+
+[role=banner] .coz-nav-apps-btns-home-svg {
+  max-width: 2rem;
+  max-height: 2rem;
+}
+
+[role=banner] .coz-nav-apps-btns-home,
+[role=banner] .coz-nav-apps-btns-home[href]:visited {
+  color: var(--dodgerBlue);
+}
+
+[role=banner] .coz-nav-apps-btns-home[href]:hover,
+[role=banner] .coz-nav-apps-btns-home[href]:active,
+[role=banner] .coz-nav-apps-btns-home[href]:focus {
+  color: var(--scienceBlue);
+}
+
+[role=banner] .coz-nav-apps-btns.--currentHome .coz-nav-apps-btns-main {
+  margin-left: 0;
+}
+
+[role=banner] .coz-nav-apps-btns.--currentHome .coz-nav-apps-btns-home {
+  margin-right: 0;
+}
+
+/* POP */
+[role=banner] .coz-nav-pop--apps {
+  width: 20rem;
+  max-height: 20rem;
+  left: 3.5rem;
+  transform-origin: 10% 0%;
+}
+
+[role=banner] .coz-nav .--currentHome + .coz-nav-pop--apps {
+  left: 0;
+}
+
+/* POP CONTENT */
+
+[role=banner] .coz-nav-pop--apps .coz-nav-pop-content {
+  display: flex;
+  flex-direction: column;
+  /* pop size less pop border size*/
+  max-height: calc(20rem - 2px);
+  width: 100%;
+}
+
+@media (max-height: 21rem) {
+  [role=banner] .coz-nav-pop--apps {
+    max-height: calc(100vh - 4rem)
+  }
+
+  [role=banner] .coz-nav-pop--apps .coz-nav-pop-content {
+    max-height: calc(100vh - 4rem - 2px);
+  }
+}
+
+
+[role=banner] .coz-nav-pop--apps .coz-nav-pop-content .coz-nav-group {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow-y: auto;
+}
+
+[role=banner] .coz-nav-apps-item {
+  display: flex;
+}
+
+/* current app item */
+[role=banner] .coz-nav-apps-item.--current a[role=menuitem] {
+  font-weight: bold;
+  background-color: var(--paleGrey);
+  border-left: 4px solid var(--dodgerBlue)
+}
+
+[role=banner] .coz-nav-apps-item [role=menuitem],
+[role=banner] [role=menuitem].coz-apps-home-btn {
+  display: flex;
+  box-sizing: border-box;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  align-items: center;
+  width: 100%;
+  height: 3rem;
+  /* we remove the left border from the padding */
+  padding: .5rem 1rem .5rem calc(1rem - 4px);
+  color: var(--charcoalGrey);
+  text-decoration: none;
+  outline: none;
+}
+
+[role=banner] .coz-nav-apps-item:first-of-type [role=menuitem] {
+  margin-top: .5rem;
+}
+
+[role=banner] .coz-nav-apps-item:last-of-type [role=menuitem] {
+  margin-bottom: .5rem;
+}
+
+[role=banner] .coz-nav-apps-item-icon {
+  margin-right: .5rem;
+  height: 2rem;
+  width: 2rem;
+  /* force svg inline to be 2rem */
+  min-width: 2rem;
+}
+
+[role=banner] .coz-nav-apps-item [role=menuitem] .coz-label {
+  padding-right: .5rem;
+  width: 100%;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[role=banner] [role=menuitem].coz-apps-home-btn {
+  display: flex;
+  margin-top: 0;
+  color: #5d6165;
+  font-weight: bold;
+  font-size: 14px;
+  justify-content: center;
+  align-items: center;
+}
+
+[role=banner] [role=menuitem].coz-apps-home-btn.--mobile > span {
+  display: flex;
+  justify-content: flex-start;
+}
+[role=banner] [role=menuitem].coz-apps-home-btn img, .coz-apps-home-btn svg {
+  width: 1rem;
+  height: 1rem;
+  margin-right: .5rem;
+}
+
+@keyframes barPlaceHolderShimmer {
+    0% { background-position: -20rem 0; }
+    80% { background-position: 20rem 0; }
+    80.1% { background-position: -20rem 0; }
+    100% { background-position: -20rem 0; }
+}
+
+[role=banner] .coz-loading-placeholder {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    min-height: 1em;
+    animation: barPlaceHolderShimmer 1s linear infinite;
+    animation-delay: .1s;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    background-position: -20rem 0;
+    background-image: linear-gradient(to right, var(--silver) 0, var(--paleGrey) 50%, var(--silver) 100%);
+    background-size: 20rem 10rem;
+    background-repeat: no-repeat;
+    background-color: var(--silver);
+    border-radius: .15rem;
+    margin: .1rem 0;
+}
+
+
+[role=banner] .coz-nav-apps-item-icon.coz-loading-placeholder {
+  width: 2rem;
+  height: 2rem;
+  margin: 0 1rem;
+  display: block;
+}
+
+[role=banner] .coz-nav-apps-item [role=menuitem] .coz-label.coz-loading-placeholder {
+  height: 1em;
+  width: 7rem;
+}
+
+[role=banner] .coz-nav-apps-btns.--loading {
+  width: 12rem;
+}
+
+[role=banner] .coz-nav-apps-btns-home.coz-loading-placeholder {
+  height: 2rem;
+  width: 2rem;
+  border-radius: 2rem;
+  background-color: var(--silver);
+  flex-shrink: 0;
+}
+
+[role=banner] .coz-nav-apps-btns-main.coz-loading-placeholder {
+  height: 1.5rem;
+  margin: 0;
+  background-color: var(--silver);
+}

package/src/styles/banner.css

@@ -0,0 +1,64 @@
+@media (max-width: 63.9375rem) {
+  .has-banner [role=application] .o-layout-2panes:before {
+    height: 6rem;
+  }
+
+  [role=banner] .coz-bar-banner {
+    font-size: 14px;
+    transition: none;
+    transition-delay: none;
+  }
+
+  [role=banner] .coz-bar-banner-button {
+    max-width: 7rem;
+  }
+}
+
+@media (max-width: 30rem) {
+  .has-banner [role=application] .o-layout-2panes:before {
+    height: 7rem;
+  }
+
+  [role=banner] .coz-bar-banner {
+    height: auto;
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 18rem) {
+  .has-banner [role=application] .o-layout-2panes:before {
+    height: 8rem;
+  }
+}
+
+[role=banner] .coz-bar-banner.unmounted {
+  height: 0;
+}
+
+[role=banner] .coz-bar-banner {
+  display: flex;
+  background: var(--dodgerBlue);
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  padding: 0 1rem 0 1rem;
+  justify-content: space-between;
+  align-items: center;
+  color: white;
+  overflow: hidden;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.06);
+  transition: height 1s;
+  transition-delay: 1s;
+}
+
+[role=banner] .coz-bar-banner-button,
+[role=banner] .coz-bar-banner-button:hover,
+[role=banner] .coz-bar-banner-button:visited
+[role=banner] .coz-bar-banner-button:active
+[role=banner] .coz-bar-banner-button:focus {
+  border-color: white!important;
+  min-height: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  max-width: 10rem;
+}

package/src/styles/bar.css

@@ -0,0 +1,106 @@
+[role=banner] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-index-bar);
+  display: flex;
+  align-items: stretch;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 3em;
+  font-family: Lato, sans-serif;
+  font-size: 1rem;
+}
+
+@media (min-width: 64rem) {
+  [role=banner] {
+    position: relative;
+  }
+}
+
+[role=banner] .coz-bar-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+[role=banner] .coz-bar-container {
+  display: flex;
+  height: 3rem;
+  width: 100%;
+  padding: 0 1.25em 0 1em;
+  box-sizing: border-box;
+}
+
+@media (max-width: 48em) {
+  [role=banner] .coz-bar-container {
+    padding: 0 1em 0 0;
+  }
+}
+
+[role=banner] .coz-bar-title {
+  display: flex;
+  margin: 0;
+  align-items: center;
+  min-width: 8em;
+  font-size: 1.5em;
+  font-weight: normal;
+  color: var(--charcoalGrey);
+}
+
+@media (max-width: 48em) {
+  [role=banner] .coz-bar-title {
+    font-size: 1.25em
+  }
+}
+
+[role=banner] .coz-bar-title img {
+  margin-right: .45em;
+}
+
+[role=banner] .coz-bar-title span {
+  margin-right: .25em;
+}
+
+[role=banner] .coz-bar-title strong {
+  font-weight: bold;
+}
+
+@media (max-width: 30em) {
+  [role=banner] .coz-bar-hide-sm {
+    display: none;
+  }
+
+  [role=banner] .coz-bar-title strong {
+    padding: 0;
+    text-transform: capitalize;
+  }
+}
+
+[role=banner] .coz-bar-btn {
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  background-position: center;
+  flex: 0 0 2.5rem;
+  cursor: pointer;
+}
+
+[role=banner] .coz-bar-burger {
+  margin-right: 0.25em;
+}
+
+@media (min-width: 48.0625em) {
+  [role=banner] .coz-bar-burger,
+  [role=banner] .coz-drawer-wrapper {
+    display: none;
+  }
+}
+
+
+@media (max-width: 48em) {
+  [role=banner] .coz-bar-hide-sm {
+    display: none;
+  }
+}

package/src/styles/base.css

@@ -0,0 +1,21 @@
+[role=banner] .coz-sep-flex {
+  margin: 0;
+  border: none;
+  flex: 1 0;
+}
+
+[role=banner] .blurry {
+  opacity: .5;
+  filter: blur(5px);
+}
+
+[role=banner] [data-icon] {
+  background-repeat: no-repeat;
+  background-position: 0 50%;
+  padding-left: calc(16px + .5em);
+}
+
+[role=banner] .u-flex-grow {
+  display: flex;
+  flex-grow: 1;
+}

package/src/styles/claudy.css

@@ -0,0 +1,98 @@
+[role=banner] .coz-claudy {
+  position: fixed;
+  bottom: 5em;
+  right: 2em;
+}
+
+@media (min-width: 64em) {
+  [role=banner] .coz-claudy {
+    bottom: 2em;
+  }
+}
+
+[role=banner] .coz-claudy-icon {
+  width: 3.5em;
+  height: 3.5em;
+  border-radius: 100%;
+  border: none;
+  background-color: var(--dodgerBlue);
+  background-repeat: no-repeat;
+  background-size: 2em;
+  background-position: .75em;
+  box-shadow: 0 1px 3px 0 rgba(50, 54, 63, 0.19), 0 6px 18px 0 rgba(50, 54, 63, 0.39);
+  animation: none;
+  cursor: pointer;
+  opacity: .5;
+  transition: all .2s ease-out;
+  outline: 0;
+}
+
+[role=banner] .coz-claudy-icon:hover,
+[role=banner] .coz-claudy-icon:focus,
+[role=banner] .coz-claudy-icon:active,
+[role=banner] .coz-claudy [data-claudy-opened=true] {
+  animation: none;
+  transform: scale(1.1);
+  opacity: 1;
+  transition: all .2s ease-out;
+}
+
+[role=banner] .coz-claudy .coz-claudy-intent-wrapper {
+  position: fixed;
+  bottom: 9.5em;
+  right: 2em;
+  width: 25em;
+  border-radius: .3em;
+  background: white;
+  transform-origin: 100% 100% 0;
+  transform: scale(0) translateY(6em);
+  filter: drop-shadow(0 4px 6px rgba(50, 54, 63, 0.5));
+  opacity: 0;
+  transition: .2s transform ease-in, .1s opacity ease-in;
+}
+
+[role=banner] .coz-claudy--opened .coz-claudy-intent-wrapper {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+  transition: .2s transform cubic-bezier(0.2, 0.75, 0.3, 1.15), .1s opacity ease-in;
+}
+
+[role=banner] .coz-claudy-intent-wrapper::after {
+  position: fixed;
+  content: '';
+  right: 3em;
+  width: 0;
+  height: 0;
+  /* Make it a bit taller to avoid browser spacing issue
+  between it and the tooltip */
+  border-bottom: .8em solid transparent;
+  border-right: 1.5em solid white;
+  bottom: -.6em;
+}
+
+[role=banner] .coz-claudy .coz-claudy-intent-wrapper .coz-intent{
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: .3em;
+}
+
+@media (min-width: 64em) {
+  [role=banner] .coz-claudy .coz-claudy-intent-wrapper {
+    bottom: 6.5em;
+  }
+}
+
+@media (max-width: 48em) {
+  [role=banner] .coz-claudy .coz-claudy-intent-wrapper {
+    width: calc(100% - 2em);
+    height: calc(100% - 2em)!important; /* overwritte intent setSize here */
+    right: 1em;
+    top: 1em;
+    transform-origin: 50% 50% 0;
+  }
+
+  [role=banner] .coz-claudy-intent-wrapper::after {
+    display: none;
+  }
+}

package/src/styles/drawer.css

@@ -0,0 +1,126 @@
+[role=banner] .coz-drawer-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100%;
+  display: flex;
+}
+
+[role=banner] .coz-drawer-wrapper[aria-hidden=true] {
+  pointer-events: none;
+}
+
+[role=banner] .coz-drawer-wrapper[aria-hidden=false] {
+  pointer-events: auto;
+}
+
+[role=banner] .coz-drawer-wrapper::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--charcoalGrey);
+  opacity: 0;
+  transition: opacity .2s ease-out .1s;
+}
+
+[role=banner] .coz-drawer-wrapper[aria-hidden=false]::before {
+  opacity: .5;
+  transition: opacity .2s ease-out;
+}
+
+[role=banner] .coz-drawer-wrapper aside {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 90%;
+  max-width: 30em;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  transform: translateX(-100%);
+  transform-origin: 0% 0%;
+}
+
+[role=banner] .coz-drawer-wrapper aside.with-transition {
+  transition: transform .2s ease-out;
+}
+
+[role=banner] .coz-drawer-wrapper[aria-hidden=false] aside {
+  transform: translateX(0%);
+}
+
+[role=banner] .coz-drawer-wrapper[aria-hidden=false] aside.with-transition {
+  transition: transform .3s cubic-bezier(0.2, 0.75, 0.3, 1.0);
+}
+
+[role=banner] .coz-drawer-wrapper ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+[role=banner] .coz-drawer-wrapper nav hr {
+  margin: 0;
+  border: none;
+  border-bottom: solid 1px var(--silver);
+}
+
+[role=banner] .coz-drawer-wrapper .coz-nav-icon {
+  margin-right: .5em;
+}
+
+[role=banner] .coz-drawer--apps {
+  flex: 0 1 100%;
+  /* IMPORTANT: on Chrome, the `overflow-y: scroll` property on .coz-drawer--apps prevented
+  swipe events to be dispatched correctly ; the `touch-action: pan-y` fixes the problem
+  see https://greensock.com/forums/topic/17546-draggable-text-elements-with-overflow/ */
+  overflow-y: scroll;
+  touch-action: pan-y;
+  position: relative;
+  overflow-x: hidden;
+}
+
+[role=banner] .coz-drawer--apps ul li {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+[role=banner] .coz-drawer--apps ul:last-of-type + hr {
+  display: none;
+}
+
+[role=banner] .coz-drawer--apps [role=menuitem] {
+  display: flex;
+  flex-direction: row;
+  padding: .3em .3em .3em 1.3em;
+  height: 3rem;
+}
+
+[role=banner] .coz-drawer--apps .coz-nav-item img {
+  width: 2rem;
+  margin-right: .5rem;
+  max-height: 2rem;
+}
+
+
+[role=banner] .coz-drawer--apps .coz-nav-category {
+  font-size: 1em;
+  padding: 2em 2em .5em;
+  margin: 0;
+}
+
+[role=banner] .coz-drawer--settings {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* /!\ Trick to prevent application from scrolling in the background when the drawer is opened */
+[role=banner][data-drawer-visible=true] + [role=application] {
+  position: fixed;
+  width: 100%;
+}

package/src/styles/index.styl

@@ -0,0 +1,33 @@
+@import './base.css'
+@import './indicators.css'
+@import './bar.css'
+@import './banner.css'
+@import './nav.css'
+@import './navigation_item.css'
+@import './apps.css'
+@import './settings.css'
+@import './storage.css'
+@import './drawer.css'
+@import './claudy.css'
+@import './searchbar.css'
+@import './supportModal.css'
+
+@import './theme.styl'
+
+@import 'settings/palette'
+@import 'settings/z-index'
+@import 'tools/mixins'
+@import 'utilities/display'
+@import 'utilities/position'
+@import 'utilities/dimensions'
+
+@import 'components/button.styl'
+
+:root {
+  --z-index-bar: $bar-index;
+  --z-index-selection: $selection-index;
+  --z-index-over-selection: $selection-index + 1;
+}
+
+.coz-bar-hidden
+  @extend $visuallyhidden