@useblu/ocean-core 1.27.1 → 1.28.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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
+
+## [1.27.2](https://github.com/ocean-ds/ocean-web/compare/v1.27.1...v1.27.2) (2022-02-11)
+
+### Bug Fixes
+
+- **carosel:** add shadown to block ([#910](https://github.com/ocean-ds/ocean-web/issues/910)) ([1835bc6](https://github.com/ocean-ds/ocean-web/commit/1835bc6ec497edcc3d05f7a875c903741d7d729e))
+
 ## [1.27.1](https://github.com/ocean-ds/ocean-web/compare/v1.27.0...v1.27.1) (2022-02-11)
 
 ### Bug Fixes

package/ocean.css

@@ -1639,9 +1639,20 @@
   line-height: 1.5;
 }
 
+.ods-carousel.columns-5, .ods-carousel.columns-4, .ods-carousel.columns-3, .ods-carousel.columns-2 {
+  overflow: hidden;
+}
 .ods-carousel.columns-5 .slick-track, .ods-carousel.columns-4 .slick-track, .ods-carousel.columns-3 .slick-track, .ods-carousel.columns-2 .slick-track {
   gap: 8px;
 }
+.ods-carousel.columns-5 .slick-list, .ods-carousel.columns-4 .slick-list, .ods-carousel.columns-3 .slick-list, .ods-carousel.columns-2 .slick-list {
+  box-shadow: none;
+  overflow: inherit;
+}
+.ods-carousel.columns-5 .slick-slide, .ods-carousel.columns-4 .slick-slide, .ods-carousel.columns-3 .slick-slide, .ods-carousel.columns-2 .slick-slide {
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(12, 13, 20, 0.08);
+}
 
 .slick-slider {
   box-sizing: border-box;
@@ -1661,10 +1672,18 @@
 .slick-slider:hover .slick-arrow {
   display: block !important;
 }
+@media (max-width: 767.98px) {
+  .slick-slider:hover .slick-arrow {
+    display: none !important;
+  }
+}
 
 .slick-list {
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(12, 13, 20, 0.08);
   display: block;
   margin: 0;
+  margin-bottom: 15px;
   overflow: hidden;
   padding: 0;
   position: relative;
@@ -1678,7 +1697,6 @@
 .slick-track {
   display: flex;
   left: 0;
-  margin-bottom: 15px;
   margin-left: auto;
   margin-right: auto;
   position: relative;
@@ -2436,6 +2454,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;
@@ -2533,12 +2625,12 @@
 
 .ods-topbar {
   align-items: center;
-  display: grid;
-  flex-wrap: wrap;
+  display: flex;
+  flex-direction: row;
   font-family: "Avenir";
   font-size: 20px;
   grid-template-columns: 3rem auto 3rem;
-  padding: 10px 5px;
+  height: 56px;
   width: 100%;
 }
 .ods-topbar-scroll-bar {
@@ -2560,25 +2652,42 @@
   color: #67697a;
 }
 .ods-topbar-extend {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 128px;
+  justify-content: space-between;
+  padding: 16px 16px 8px;
+}
+.ods-topbar-extend .ods-topbar-actions {
   display: flex;
-  grid-template-columns: 50% 50% auto;
+  flex-direction: row;
+  height: 72px;
+  justify-content: space-between;
+  width: 100%;
 }
-.ods-topbar-extend .ods-topbar-title {
-  padding-top: 4rem;
+.ods-topbar-extend .ods-topbar-left {
+  margin-left: 0;
 }
-.ods-topbar-extend .ods-topbar-search {
-  width: 50%;
+.ods-topbar-extend .ods-topbar-right {
+  margin-right: 0;
 }
-.ods-topbar-prev {
+.ods-topbar-left {
   line-height: 0;
-  width: 50%;
+  margin-left: 16px;
+  width: 24px;
 }
-.ods-topbar-prev svg {
+.ods-topbar-left span {
+  align-items: center;
   cursor: pointer;
+  display: flex;
+  justify-content: center;
 }
 .ods-topbar-title {
   font-weight: 800;
   line-height: 1.1;
+  margin-left: 16px;
+  margin-right: 16px;
   width: 100%;
 }
 .ods-topbar-title span {
@@ -2587,11 +2696,15 @@
   font-size: 12px;
   font-weight: 600;
 }
-.ods-topbar-search {
+.ods-topbar-right {
   line-height: 0;
-  text-align: right;
+  margin-right: 16px;
+  width: 24px;
 }
-.ods-topbar-search svg {
+.ods-topbar-right span {
+  align-items: center;
   cursor: pointer;
+  display: flex;
+  justify-content: center;
 }
 /*# sourceMappingURL=ocean.css.map */