@useblu/ocean-core 1.27.3 → 1.29.1

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.29.1](https://github.com/ocean-ds/ocean-web/compare/v1.29.0...v1.29.1) (2022-02-24)
+
+### Bug Fixes
+
+- **button:** add hover transition to icon button variant. ([#923](https://github.com/ocean-ds/ocean-web/issues/923)) ([c3b94d6](https://github.com/ocean-ds/ocean-web/commit/c3b94d66f278a286c76731c5114562da0a671b30))
+
+# [1.29.0](https://github.com/ocean-ds/ocean-web/compare/v1.28.0...v1.29.0) (2022-02-24)
+
+### Features
+
+- **progress:** add progress and other fixes ([#922](https://github.com/ocean-ds/ocean-web/issues/922)) ([5888456](https://github.com/ocean-ds/ocean-web/commit/5888456c5618d73ca891005b743fdfacd0ab1c30))
+
+# [1.28.0](https://github.com/ocean-ds/ocean-web/compare/v1.27.3...v1.28.0) (2022-02-23)
+
+### Features
+
+- **badge:** add new badge component. ([#918](https://github.com/ocean-ds/ocean-web/issues/918)) ([b183b16](https://github.com/ocean-ds/ocean-web/commit/b183b16837580f59319d4957d7235b44431660cb))
+
 ## [1.27.3](https://github.com/ocean-ds/ocean-web/compare/v1.27.2...v1.27.3) (2022-02-15)
 
 **Note:** Version bump only for package @useblu/ocean-core

package/ocean.css

@@ -1380,7 +1380,7 @@
 }
 
 .ods-select__root {
-  width: 237px;
+  min-width: 237px;
 }
 .ods-select__control {
   align-items: center;
@@ -1868,6 +1868,7 @@
   line-height: 1;
   outline: none;
   text-align: center;
+  transition: background-color 0.1s ease-out;
 }
 .ods-btn--sm {
   font-size: 14px;
@@ -1890,11 +1891,6 @@
   padding-left: 32px;
   padding-right: 32px;
 }
-.ods-btn:disabled {
-  background-color: #ebecf5;
-  color: #b6b9cc;
-  cursor: not-allowed;
-}
 .ods-btn--primary {
   background-color: #0025e0;
   color: white;
@@ -1968,6 +1964,16 @@
 .ods-btn--blocked {
   width: 100%;
 }
+.ods-btn--loading > span {
+  display: block;
+  height: 0;
+  visibility: hidden;
+}
+.ods-btn:disabled, .ods-btn:disabled .ods-btn:hover {
+  background-color: #ebecf5;
+  color: #b6b9cc;
+  cursor: not-allowed;
+}
 
 .ods-icon-btn {
   align-items: center;
@@ -1980,6 +1986,7 @@
   justify-content: center;
   line-height: 1;
   outline: none;
+  transition: background-color 0.1s ease-out;
   width: 48px;
 }
 .ods-icon-btn:hover, .ods-icon-btn:focus {
@@ -2190,80 +2197,57 @@
   font-weight: 600;
 }
 
-.ods-progress {
-  display: inline-block;
-  position: relative;
-}
-.ods-progress__primary {
-  display: inline-block;
-  transform: rotate(-90deg);
-  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-}
-.ods-progress__primary svg {
-  display: block;
-  stroke-width: 8px;
+.ods-progress svg {
+  -webkit-animation: ods-loading-animation 0.8s linear infinite;
+          animation: ods-loading-animation 0.8s linear infinite;
 }
-.ods-progress__primary svg circle {
-  stroke: rgba(255, 255, 255, 0.4);
+.ods-progress svg circle {
+  stroke: #b8c3ff;
 }
-.ods-progress__secondary {
-  left: 0;
-  position: absolute;
+.ods-progress svg path {
+  stroke: #0025e0;
 }
-.ods-progress__secondary svg {
-  display: block;
+.ods-progress--on-color svg circle {
+  stroke: #fff;
 }
-.ods-progress__secondary svg circle {
-  -webkit-animation: animate-progress 1.4s ease-in-out infinite;
-          animation: animate-progress 1.4s ease-in-out infinite;
-  display: block;
-  stroke: white;
-  stroke-dasharray: 80px, 200px;
-  stroke-dashoffset: 0;
-  stroke-width: 8px;
+.ods-progress--on-color svg path {
+  stroke: #fff;
 }
-.ods-progress--md {
+.ods-progress--md svg {
   height: 24px;
   width: 24px;
 }
-.ods-progress--sm {
+.ods-progress--sm svg {
   height: 16px;
   width: 16px;
 }
-.ods-progress--lg {
+.ods-progress--lg svg {
   height: 32px;
   width: 32px;
 }
-
-@-webkit-keyframes animate-progress {
+@-webkit-keyframes ods-loading-animation {
   0% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: 0;
+    transform: rotate(0deg);
   }
-  50% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -15px;
+  90% {
+    transform: rotate(340deg);
   }
   100% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -125px;
+    transform: rotate(360deg);
   }
 }
-
-@keyframes animate-progress {
+@keyframes ods-loading-animation {
   0% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: 0;
+    transform: rotate(0deg);
   }
-  50% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -15px;
+  90% {
+    transform: rotate(340deg);
   }
   100% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -125px;
+    transform: rotate(360deg);
   }
 }
+
 .ods-modal__overlay {
   background: rgba(57, 59, 71, 0.4);
   bottom: 0;
@@ -2454,6 +2438,80 @@
   white-space: nowrap;
 }
 
+.ods-badge {
+  display: flex;
+  font-family: "Nunito Sans";
+}
+.ods-badge__content {
+  align-items: center;
+  background-color: #ff726e;
+  border-radius: 40px;
+  box-sizing: border-box;
+  color: white;
+  display: flex;
+  font-weight: 700;
+  justify-content: center;
+  white-space: nowrap;
+  width: auto;
+}
+.ods-badge--medium .ods-badge__content {
+  font-size: 12px;
+  height: 24px;
+  min-width: 24px;
+  width: 24px;
+}
+.ods-badge--small .ods-badge__content {
+  font-size: 10px;
+  height: 16px;
+  min-width: 16px;
+}
+.ods-badge--tiny .ods-badge__content {
+  display: block;
+  font-size: 10px;
+  height: 8px;
+  min-width: 8px;
+  overflow: hidden;
+  width: 8px;
+}
+.ods-badge--small .ods-badge__text {
+  border-radius: 40px;
+  box-shadow: 0 4px 10px #ff726e3d;
+  padding: 0 4px;
+  width: auto;
+}
+.ods-badge--overflow .ods-badge__content {
+  padding: 0 4px;
+  width: auto;
+}
+.ods-badge--overflow .ods-badge__content {
+  padding: 0 4px;
+  width: auto;
+}
+.ods-badge--brand .ods-badge__content {
+  background-color: #0025e0;
+}
+.ods-badge--brand .ods-badge__text.ods-badge__content {
+  box-shadow: 0 4px 10px #0025e03d;
+}
+.ods-badge--complementary .ods-badge__content {
+  background-color: #13bdbd;
+}
+.ods-badge--complementary .ods-badge__text.ods-badge__content {
+  box-shadow: 0 4px 10px #13bdbd3d;
+}
+.ods-badge--alert .ods-badge__content {
+  background-color: #ff8a14;
+}
+.ods-badge--alert .ods-badge__text.ods-badge__content {
+  box-shadow: 0 4px 10px #ff8a143d;
+}
+.ods-badge--neutral .ods-badge__content {
+  background-color: #b6b9cc;
+}
+.ods-badge--neutral .ods-badge__text.ods-badge__content {
+  box-shadow: 0 4px 10px #b6b9cc3d;
+}
+
 .ods-sub-header {
   background-color: #f7f9ff;
   box-sizing: border-box;