@useblu/ocean-core 1.44.0 → 1.45.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.45.0](https://github.com/ocean-ds/ocean-web/compare/v1.44.0...v1.45.0) (2023-06-02)
+
+### Features
+
+- create shortcut component ([#1068](https://github.com/ocean-ds/ocean-web/issues/1068)) ([6ac9802](https://github.com/ocean-ds/ocean-web/commit/6ac9802bc5bc056e53dfc50b04ecf3f5d1849973))
+
 # [1.44.0](https://github.com/ocean-ds/ocean-web/compare/v1.43.0...v1.44.0) (2023-06-01)
 
 ### Features

package/ocean.css

@@ -4118,4 +4118,99 @@
     width: 100%;
   }
 }
+.ods-shortcut {
+  align-items: flex-start;
+  background-color: white;
+  border: 1px solid #ebecf5;
+  border-radius: 8px;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  position: relative;
+  transition: 200ms ease-in;
+}
+.ods-shortcut:is(:hover, :focus) {
+  background-color: #f7f9ff;
+}
+.ods-shortcut--disabled {
+  background-color: rgba(235, 236, 245, 0.64);
+  border-color: transparent;
+  cursor: not-allowed;
+}
+.ods-shortcut--disabled .ods-shortcut__icon,
+.ods-shortcut--disabled .ods-shortcut__label,
+.ods-shortcut--disabled .ods-shortcut__description {
+  color: #b6b9cc;
+}
+.ods-shortcut--tiny {
+  width: 80px;
+}
+.ods-shortcut--tiny .ods-shortcut__content {
+  gap: 8px;
+}
+.ods-shortcut--small {
+  width: 116px;
+}
+.ods-shortcut--small .ods-shortcut__content {
+  gap: 8px;
+}
+.ods-shortcut--small .ods-shortcut__label {
+  align-items: flex-end;
+  display: flex;
+  height: 40px;
+}
+.ods-shortcut--medium {
+  gap: 8px;
+  width: 158px;
+}
+.ods-shortcut--medium .ods-shortcut__content {
+  gap: 16px;
+}
+.ods-shortcut--large {
+  gap: 12px;
+  width: 200px;
+}
+.ods-shortcut--large .ods-shortcut__content {
+  align-items: center;
+  flex-direction: row;
+  gap: 12px;
+}
+.ods-shortcut__icon {
+  color: #5872f5;
+  height: 24px;
+  width: 24px;
+}
+.ods-shortcut__content {
+  display: flex;
+  flex-direction: column;
+}
+.ods-shortcut__label {
+  color: #393b47;
+  font-weight: 900;
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
+}
+.ods-shortcut__description {
+  font-size: 12px;
+}
+.ods-shortcut__badge {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+}
+.ods-shortcut__blocked {
+  color: #b6b9cc;
+  height: 16px;
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  width: 16px;
+}
+.ods-shortcut__blocked svg {
+  height: 100%;
+  width: 100%;
+}
 /*# sourceMappingURL=ocean.css.map */