cozy-bar 0.0.0-development

package/src/styles/indicators.css

@@ -0,0 +1,58 @@
+/* Spinner */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+/* Progress bar */
+[role=banner] progress[value] {
+  /* Reset the default appearance */
+  appearance: none;
+  background-color: var(--paleGrey);
+  border: solid 1px var(--silver);
+  border-radius: 2px;
+  color: var(--dodgerBlue);
+}
+
+[role=banner] progress[value]::-webkit-progress-bar {
+  background: var(--paleGrey);
+  border-radius: 2px;
+}
+
+[role=banner] progress[value]::-webkit-progress-value {
+  background: var(--dodgerBlue);
+  border-radius: 1px;
+}
+
+[role=banner] progress[value]::-moz-progress-bar {
+  background: var(--dodgerBlue);
+  border-radius: 1px;
+}
+
+/* Errors */
+[role=banner] .coz-nav--error {
+  margin: 0 0 .1em 0;
+  font-weight: normal;
+  font-size: .875em;
+  color: var(--pomegranate);
+}
+
+/* Claudy loading */
+[role=banner] .coz-claudy [data-claudy-loading=true]::before {
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 100%;
+  bottom: 0;
+  right: 0;
+  background: none;
+  border-radius: 100%;
+  border: .2em solid var(--scienceBlue);
+  border-right: .2em solid white;
+  box-sizing: border-box;
+  animation: 1s linear infinite spin;
+}

package/src/styles/nav.css

@@ -0,0 +1,81 @@
+[role=banner] .coz-nav {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  position: relative;
+}
+
+@media (max-width: 48em) {
+  [role=banner] .coz-nav {
+    display: none;
+  }
+}
+
+[role=banner] [aria-controls][aria-busy]::after {
+  position: relative;
+  top: .12em;
+  margin: 0 .355em;
+  font-size: .875em;
+}
+
+[role=banner] [aria-controls][aria-busy=true] {
+  padding-right: 0;
+}
+
+[role=banner] .coz-nav [aria-controls][data-icon] {
+  padding-left: calc(1.25em + 16px + .5em);
+  background-position: 1em calc(50% - 1px);
+}
+
+/* POP */
+[role=banner] .coz-nav-pop[aria-hidden=true] {
+  display: flex;
+  transform: scale(0);
+  opacity: 0;
+  transition: .2s transform ease-in, .1s opacity ease-in;
+}
+
+[role=banner] .coz-nav-pop {
+  position: absolute;
+  top: calc(100% - .25em);
+  box-sizing: border-box;
+  min-width: 100%;
+  max-height: calc(100vh - 4rem);
+  overflow-y: auto;
+  background-color: #fff;
+  border-radius: 8px;
+  border: solid 1px rgba(50, 54, 63, 0.12);
+  box-shadow: 0 1px 3px 0 rgba(50, 54, 63, 0.19), 0 6px 18px 0 rgba(50, 54, 63, 0.19);
+  opacity: 1;
+  transform: scale(1);
+  transform-origin: 80% 0%;
+  transition: .2s transform cubic-bezier(0.2, 0.75, 0.3, 1.15);
+  /* hide scrollbars */
+  -ms-overflow-style: none;  /* IE 10+ */
+}
+
+[role=banner] .coz-nav-pop::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}
+
+[role=banner] .coz-nav-pop-content .coz-nav-group {
+  padding: 0;
+  margin: 0;
+}
+
+[role=banner] .coz-nav-pop-content .coz-nav-group:last-of-type {
+  border-radius: 0 0 8px 8px;
+}
+
+[role=banner] .coz-nav-pop-content .coz-nav-group:first-of-type {
+  border-radius: 8px 8px 0 0;
+}
+
+[role=banner] .coz-nav-pop .coz-nav-group {
+  border-bottom: solid 1px var(--silver);
+}
+
+[role=banner] .coz-nav-pop .coz-nav-group:last-child {
+  border: 0;
+}

package/src/styles/navigation_item.css

@@ -0,0 +1,34 @@
+/* Force pointer on clickable elements*/
+[role=banner] a[role=menuitem],
+[role=banner] button[role=menuitem] {
+  cursor: pointer;
+  border-left: 4px solid transparent;
+}
+
+[role=banner] a[role=menuitem]:hover,
+[role=banner] a[role=menuitem]:focus,
+[role=banner] button[role=menuitem]:hover,
+[role=banner] button[role=menuitem]:focus {
+  background-color: var(--paleGrey);
+}
+
+[role=banner] [role=menuitem][aria-busy=true]::after {
+  right: 1.5em;
+  top: .5em;
+}
+
+[role=banner] .coz-drawer-wrapper [role=menuitem][aria-busy=true]::after {
+  top: .8em;
+}
+
+/* nav group */
+
+[role=banner] .coz-nav-group.coz-nav--error {
+  padding: 0.75em;
+  min-width: 20em;
+}
+
+[role=banner] div[role=menuitem]:not([data-icon]) {
+  margin: 0;
+  padding-left: 1.5em;
+}

package/src/styles/searchbar.css

@@ -0,0 +1,156 @@
+[role=banner] .coz-searchbar{
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-grow: 1;
+  padding: .3em .8em .3em .7em;
+  box-sizing: border-box;
+  position: relative;
+}
+
+[role=banner] .coz-searchbar-autosuggest-container{
+  position: relative;
+  width: 100%;
+  opacity: .4;
+  transition: all .2s ease-out;
+}
+[role=banner] .coz-searchbar-autosuggest-container.--focused{
+  opacity: 1;
+}
+[role=banner] .coz-searchbar-autosuggest-container:before{
+  content: '';
+  display: inline-block;
+  width: 1.6em;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+[role=banner] .coz-searchbar-autosuggest-container.--searching:before{
+  padding-left: .5em;
+  background-size: 1em;
+  animation: spin 1s linear infinite;
+}
+
+[role=banner] .coz-searchbar-autosuggest-input{
+  box-sizing: border-box;
+  width: 100%;
+  padding: .5em;
+  padding-left: 2em;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: 4px;
+  transition: all .2s ease-out;
+}
+[role=banner] .coz-searchbar-autosuggest-input:hover{
+  border-color: var(--silver);
+}
+[role=banner] .coz-searchbar-autosuggest-input:focus,
+[role=banner] .coz-searchbar-autosuggest-input-focused{
+  outline: none;
+  border-color: var(--dodgerBlue);
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestions-container {
+  position: absolute;
+  top: 100%;
+  margin-top: 3px;
+  width: 100%;
+  max-height: em(170px);
+  overflow: auto;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--silver);
+  border-radius: 4px;
+  background: white;
+  box-shadow: 0 1px 3px 0 rgba(50, 54, 63, 0.19), 0 6px 18px 0 rgba(50, 54, 63, 0.19);
+  display: none;
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestions-container--open {
+	display: block;
+}
+
+[role=banner] .coz-searchbar-autosuggest-status-container {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin: -0.3em .8em .3em;
+  padding: .8em .5em;
+  max-height: em(170px);
+  overflow: auto;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--silver);
+  border-radius: 4px;
+  background: white;
+  box-shadow: 0 1px 3px 0 rgba(50, 54, 63, 0.19), 0 6px 18px 0 rgba(50, 54, 63, 0.19);
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestions-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestions-list b {
+  font-weight: bolder;
+  color: var(--scienceBlue)
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestion {
+	padding: .8em .5em;
+  border-width: 0;
+  border-bottom-width: 1px;
+  border-style:  solid;
+  border-color: var(--silver);
+  cursor: pointer;
+}
+[role=banner] .coz-searchbar-autosuggest-suggestion:last-child {
+  border-bottom-width: 0;
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestion-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestion-icon {
+  max-height: 2rem;
+  min-height: 2rem;
+  margin-right: 1rem;
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestion-content {
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  flex-direction: column;
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestion-subtitle {
+  color: var(--coolGrey);
+}
+
+[role=banner] .coz-searchbar-autosuggest-suggestion-highlighted {
+  background: var(--paleGrey);
+  box-shadow: inset 4px 0 0 0 var(--dodgerBlue);
+}
+
+[role=banner] .coz-searchbar-autosuggest-section-title {
+  padding: .5em;
+  font-size: .8em;
+}
+
+@media (max-width: 48em) {
+  [role=banner] .coz-searchbar{
+    display: none;
+  }
+}

package/src/styles/settings.css

@@ -0,0 +1,34 @@
+[role=banner] .coz-nav-settings-btn {
+  color: var(--slateGrey);
+}
+[role=banner] .coz-nav-settings-btn:hover,
+[role=banner] .coz-nav-settings-btn:focus {
+  background-color: var(--paleGrey);
+  box-shadow: inset 0 -1px 0 0 var(--silver);
+  color: var(--charcoalGrey);
+}
+
+[role=banner] .coz-nav-pop--settings {
+  right: 0;
+}
+
+[role=banner] .coz-nav-settings-item [role=menuitem] {
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: none;
+  background-color: transparent;
+  text-align: left;
+  font-size: 1rem;
+  white-space: nowrap;
+  color: var(--charcoalGrey);
+  text-decoration: none;
+  outline: none;
+}
+
+[role=banner] .coz-nav-settings-item .coz-nav-settings-item-btn[role=menuitem] > span > span {
+  margin-right: auto;
+}
+

package/src/styles/storage.css

@@ -0,0 +1,22 @@
+[role=banner] [role=menuitem][data-icon=icon-storage] {
+  background-position: 1.5em calc(.8em + 1px);
+}
+
+[role=banner] .coz-nav-storage {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  padding-top: .5em;
+  color: var(--coolGrey);
+}
+
+[role=banner] .coz-nav-storage-text {
+  margin: 0 0 .1em 0;
+  font-weight: normal;
+  font-size: .875em;
+}
+
+[role=banner] .cozy-nav-storage-bar {
+    height: .5em;
+    margin: .2em 0 .1em 0;
+}

package/src/styles/supportModal.css

@@ -0,0 +1,20 @@
+[role=banner] .coz-support-modal .coz-support-modal-content {
+  min-height: 8em;
+}
+
+[role=banner] .coz-support-modal .coz-support-intent-wrapper .coz-intent {
+  width: 100%;
+  height: 24em;
+  border: none;
+}
+
+[role=banner] .coz-support-modal .coz-support-modal-close {
+  margin-top: .7rem;
+  margin-right: 1rem;
+}
+
+@media (max-width: 48em) {
+  [role=banner] .coz-support-modal .coz-support-intent-wrapper .coz-intent {
+    height: 27em;
+  }
+}

package/src/styles/theme.styl

@@ -0,0 +1,25 @@
+
+[role=banner] .coz-bar-wrapper
+    box-shadow inset 0 -1px 0 0 var(--silver)
+    --cozBarThemePrimaryColor var(--primaryColor)
+    --cozBarThemePrimaryContrastTextColor var(--primaryContrastTextColor)
+
+    .coz-nav-apps-btns
+        color var(--slateGrey)
+
+    .coz-bar-burger
+        color var(--coolGrey)
+
+@media (max-width: 64em)
+    [role=banner] .coz-bar-wrapper
+        background-color var(--white)
+
+@media (max-width: 48em)
+    [role=banner] .coz-bar-wrapper
+        &.coz-theme-primary
+            box-shadow inherit
+            background-color var(--cozBarThemePrimaryColor)
+
+            .coz-nav-apps-btns,
+            .coz-bar-burger
+                color var(--cozBarThemePrimaryContrastTextColor)