npm - lakelib - Versions diffs - 0.2.4 → 0.2.5 - Mend

lakelib 0.2.4 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (162) hide show

package/dist/lake.css CHANGED Viewed

@@ -1,7 +1,7 @@
 :root {
-  /* font family */
+  /* common */
   --lake-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
-  /* common color */
+  --lake-font-size: 16px;
   --lake-text-color: #000000e0;
   --lake-secondary-text-color: #000000a6;
   --lake-border-color: #d9d9d9;
@@ -10,8 +10,6 @@
   --lake-success-color: #52c41a;
   --lake-warning-color: #faad14;
   --lake-error-color: #ff4d4f;
-  /* z-index */
-  --lake-z-index-popup: 822;
   /* selection */
   --lake-selection-background-color: #1ba2e333;
   /* link */
@@ -21,12 +19,16 @@
   --lake-box-border-color: #d9d9d9;
   --lake-box-border-focus-color: #1677ff;
   --lake-box-background-color: #f6f8fa;
+  /* popup */
+  --lake-popup-z-index: 822;
+  --lake-popup-font-size: 14px;
+  --lake-popup-border-color: #d9d9d9;
+  --lake-popup-shadow: 0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d;
   /* button */
+  --lake-button-font-size: 14px;
   --lake-button-shadow: 0 2px 0 #00000005;
   --lake-button-outline: 2px solid #69b1ff;
-  /* popup */
-  --lake-popup-shadow: 0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d;
-  /* input form */
+  /* input element, text field */
   --lake-input-border-color: #d9d9d9;
   --lake-input-border-hover-color: #69b1ff;
   --lake-input-outline: 2px solid #69b1ff;
@@ -47,7 +49,7 @@
 .lake-container {
   box-sizing: border-box;
   font-family: var(--lake-font-family);
-  font-size: 16px;
+  font-size: var(--lake-font-size);
   font-weight: normal;
   line-height: 1.45;
   padding: 16px 24px;
@@ -195,34 +197,12 @@ lake-box .lake-button-group button svg {
   height: 16px;
   margin: 6px;
 }
-/* box toolbar */
-.lake-box-toolbar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: var(--lake-z-index-popup);
-  border: 1px solid var(--lake-border-color);
-  border-radius: 5px;
-  background-color: #fff;
-  box-shadow: 0 2px 0 #00000005;
-  padding: 4px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
-.lake-box-toolbar .lake-toolbar-divider {
-  width: 1px;
-  height: 20px;
-  margin: 0 4px;
-  border-left: 1px solid var(--lake-border-color);
-  user-select: none;
-}
 button.lake-button {
   border-radius: 5px;
   border: 0;
   font-family: Arial;
-  font-size: 14px;
+  font-size: var(--lake-button-font-size);
   color: var(--lake-text-color);
   background-color: #fff;
   padding: 0;
@@ -287,14 +267,14 @@ button.lake-primary-button.lake-button-hovered {
   position: relative;
   font-family: var(--lake-font-family);
   color: var(--lake-text-color);
-  font-size: 14px;
+  font-size: var(--lake-button-font-size);
   user-select: none;
 }
 .lake-dropdown button.lake-dropdown-title {
   border-radius: 5px;
   border: 0;
   font-family: Arial;
-  font-size: 14px;
+  font-size: var(--lake-button-font-size);
   color: var(--lake-text-color);
   background-color: #fff;
   padding: 0;
@@ -366,11 +346,11 @@ button.lake-primary-button.lake-button-hovered {
   position: absolute;
   top: 30px;
   left: 0;
-  z-index: var(--lake-z-index-popup);
+  z-index: var(--lake-popup-z-index);
   list-style: none;
   margin: 0;
   padding: 6px 0;
-  border: 1px solid var(--lake-border-color);
+  border: 1px solid var(--lake-popup-border-color);
   border-radius: 5px;
   background-color: #fff;
   box-shadow: var(--lake-popup-shadow);
@@ -536,7 +516,7 @@ button.lake-primary-button.lake-button-hovered {
 }
 .lake-color-dropdown-menu li:first-child .lake-dropdown-menu-text {
   width: 100%;
-  font-size: 14px;
+  font-size: var(--lake-button-font-size);
   border: 1px solid transparent;
   height: auto;
 }
@@ -544,7 +524,7 @@ button.lake-primary-button.lake-button-hovered {
 .lake-popup {
   box-sizing: border-box;
   font-family: var(--lake-font-family);
-  font-size: 14px;
+  font-size: var(--lake-popup-font-size);
   font-weight: normal;
   line-height: normal;
   color: var(--lake-text-color);
@@ -554,12 +534,12 @@ button.lake-primary-button.lake-button-hovered {
 .lake-popup ::after {
   box-sizing: border-box;
 }
-.lake-popup button {
+.lake-popup .lake-text-button {
   box-shadow: var(--lake-button-shadow);
 }
 .lake-popup input[type="text"] {
   font-family: var(--lake-font-family);
-  font-size: 14px;
+  font-size: var(--lake-popup-font-size);
   color: var(--lake-text-color);
   border-radius: 5px;
   border: 1px solid var(--lake-input-border-color);
@@ -580,9 +560,9 @@ button.lake-primary-button.lake-button-hovered {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: var(--lake-z-index-popup);
+  z-index: var(--lake-popup-z-index);
   list-style: none;
-  border: 1px solid var(--lake-border-color);
+  border: 1px solid var(--lake-popup-border-color);
   border-radius: 5px;
   margin: 0;
   padding: 4px 8px;
@@ -714,8 +694,8 @@ button.lake-primary-button.lake-button-hovered {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: var(--lake-z-index-popup);
-  border: 1px solid var(--lake-border-color);
+  z-index: var(--lake-popup-z-index);
+  border: 1px solid var(--lake-popup-border-color);
   border-radius: 5px;
   padding: 16px;
   width: fit-content;
@@ -1160,7 +1140,7 @@ lake-box[name="video"] .lake-box-hovered .lake-resizer {
 .lake-file {
   position: relative;
-  font-size: 16px;
+  font-size: var(--lake-font-size);
   font-weight: normal;
   line-height: 0;
   border: 1px solid transparent;
@@ -1404,6 +1384,28 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
   display: none;
 }
+.lake-floating-toolbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--lake-popup-z-index);
+  border: 1px solid var(--lake-border-color);
+  border-radius: 5px;
+  background-color: #fff;
+  box-shadow: 0 2px 0 #00000005;
+  padding: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.lake-floating-toolbar .lake-toolbar-divider {
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+  border-left: 1px solid var(--lake-border-color);
+  user-select: none;
+}
 /*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
 .pswp {