@timus-networks/theme 2.2.2 → 2.3.0

package/dist/runtime/public/scss/element-plus/select.scss

@@ -0,0 +1,277 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/utils' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+@use './select-dropdown.scss';
+@use './option.scss';
+@use './option-group.scss';
+
+@mixin mixed-input-border($color, $isShadowed: false) {
+  @if $isShadowed == true {
+    box-shadow:
+      0 0 0 1px $color inset,
+      0 3px 0 0 rgba(213, 205, 245, 0.4);
+  } @else {
+    box-shadow: 0 0 0 1px $color inset;
+  }
+}
+
+@include b(select) {
+  @include set-component-css-var('select', $select);
+}
+
+@include b(select) {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  width: getCssVar('select-width');
+  min-width: getCssVar('select-min-width');
+
+  @include e(wrapper) {
+    display: flex;
+    align-items: center;
+    position: relative;
+    box-sizing: border-box;
+    cursor: pointer;
+    text-align: left;
+    font-size: map.get($input-font-size, 'default');
+    padding: map.get($select-wrapper-padding, 'default');
+    gap: map.get($select-item-gap, 'default');
+    min-height: map.get($input-height, 'default');
+    line-height: map.get($select-item-height, 'default');
+    border-radius: getCssVar('border-radius-base');
+    background-color: getCssVar('fill-color', 'blank');
+    transition: getCssVar('transition', 'duration');
+    @include mixed-input-border(#{getCssVar('border-color')});
+
+    &:hover {
+      @include mixed-input-border(#{getCssVar('color-primary')}, true);
+    }
+
+    @include when(filterable) {
+      cursor: text;
+    }
+
+    @include when(focused) {
+      @include mixed-input-border(#{getCssVar('color-primary')}, true);
+    }
+
+    @include when(hovering) {
+      &:not(.is-focused) {
+        @include mixed-input-border(#{getCssVar('color-primary')}, true);
+      }
+    }
+
+    @include when(disabled) {
+      cursor: not-allowed;
+
+      background-color: getCssVar('color-neutral-light-2');
+      color: getCssVar('text-color', 'placeholder');
+      @include mixed-input-border(#{getCssVar('select-disabled-border')});
+
+      &:hover {
+        @include mixed-input-border(#{getCssVar('select-disabled-border')});
+      }
+
+      &.is-focus {
+        @include mixed-input-border(#{getCssVar('input-focus-border-color')});
+      }
+
+      @include e(selected-item) {
+        color: getCssVar('select-disabled-color');
+      }
+
+      @include e(caret) {
+        cursor: not-allowed;
+      }
+
+      @include e(selection) {
+        .#{$namespace}-tag {
+          cursor: not-allowed;
+          @include css-var-from-global(('tag', 'bg-color'), ('color', 'neutral', 'light-2'));
+          @include css-var-from-global(('tag', 'border-color'), ('color', 'neutral', 'light-4'));
+          @include css-var-from-global(('tag', 'hover-color'), ('color', 'primary', 'light-5'));
+          @include css-var-from-global(('tag', 'text-color'), ('color', 'neutral', 'light-4'));
+        }
+      }
+
+      @include e(prefix) {
+        color: getCssVar('select-disabled-color');
+      }
+
+      @include e(suffix) {
+        color: getCssVar('select-disabled-color');
+      }
+    }
+  }
+
+  @include e(prefix) {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: map.get($select-item-gap, 'default');
+    color: var(#{getCssVarName('input-icon-color')}, map.get($input, 'icon-color'));
+  }
+
+  @include e(suffix) {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: map.get($select-item-gap, 'default');
+    color: var(#{getCssVarName('input-icon-color')}, map.get($input, 'icon-color'));
+  }
+
+  @include e(caret) {
+    color: getCssVar('select-input-color');
+    font-size: getCssVar('select-input-font-size');
+    transition: getCssVar('transition', 'duration');
+    transform: rotateZ(0deg);
+    cursor: pointer;
+
+    @include when(reverse) {
+      transform: rotateZ(180deg);
+    }
+  }
+
+  @include e(selection) {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    gap: map.get($select-item-gap, 'default');
+
+    @include when(near) {
+      // margin: map.get($select-near-margin-left, 'default');
+    }
+
+    .#{$namespace}-tag {
+      cursor: pointer;
+      // border-color: transparent;
+
+      &.#{$namespace}-tag--plain {
+        border-color: getCssVar('tag', 'border-color');
+      }
+
+      .#{$namespace}-tag__content {
+        min-width: 0;
+      }
+
+      &.#{$namespace}-tag--small {
+        // This is a trick. Element Plus only adds the .el-tag--small class to the tag when the size is set to 'small'.
+        // So it should be set back to the default
+        height: map.get($tag-height, 'default');
+      }
+    }
+  }
+
+  @include e(selected-item) {
+    display: flex;
+    flex-wrap: wrap;
+    user-select: none;
+
+    .el-tag.#{$namespace}-tag--info {
+      @include css-var-from-global(('tag', 'bg-color'), ('color', 'primary', 'light-1'));
+      @include css-var-from-global(('tag', 'border-color'), ('color', 'primary', 'light-4'));
+      @include css-var-from-global(('tag', 'hover-color'), ('color', 'primary', 'light-5'));
+      @include css-var-from-global(('tag', 'text-color'), ('color', 'primary', 'light-5'));
+    }
+  }
+
+  @include e(tags-text) {
+    display: block;
+    line-height: normal;
+    @include utils-ellipsis;
+  }
+
+  @include e(placeholder) {
+    position: absolute;
+    display: block;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    @include utils-ellipsis;
+    color: var(#{getCssVarName('input-text-color')}, map.get($input, 'text-color'));
+
+    @include when(transparent) {
+      user-select: none;
+      color: getCssVar('text-color', 'placeholder');
+    }
+  }
+
+  @include e(popper) {
+    @include picker-popper(map.get($select-dropdown, 'bg-color'), map.get($select-dropdown, 'border'), map.get($select-dropdown, 'shadow'));
+  }
+
+  @include e(input-wrapper) {
+    max-width: 100%;
+
+    @include when(hidden) {
+      // Out of the document flow
+      position: absolute;
+      opacity: 0;
+    }
+  }
+
+  @include e(input) {
+    border: none;
+    outline: none;
+    padding: 0;
+    color: getCssVar('select-multiple-input-color');
+    font-size: inherit;
+    font-family: inherit;
+    appearance: none;
+    height: map.get($select-item-height, 'default');
+    max-width: 100%;
+    background-color: transparent;
+
+    @include when(disabled) {
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(input-calculator) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    max-width: 100%;
+    visibility: hidden;
+    white-space: pre;
+    overflow: hidden;
+  }
+
+  @each $size in $sizes {
+    @include m($size) {
+      @include e(wrapper) {
+        gap: map.get($select-item-gap, $size);
+        padding: map.get($select-wrapper-padding, $size);
+        min-height: map.get($input-height, $size);
+        line-height: map.get($select-item-height, $size);
+        font-size: map.get($input-font-size, $size);
+      }
+
+      @include e(selection) {
+        gap: map.get($select-item-gap, $size);
+
+        @include when(near) {
+          margin: map.get($select-near-margin-left, $size);
+        }
+      }
+
+      @include e(prefix) {
+        gap: map.get($select-item-gap, $size);
+      }
+
+      @include e(suffix) {
+        gap: map.get($select-item-gap, $size);
+      }
+
+      @include e(input) {
+        height: map.get($select-item-height, $size);
+      }
+    }
+  }
+}

package/dist/runtime/public/scss/element-plus/skeleton-item.css

@@ -36,116 +36,116 @@
   --el-color-light-light-9: rgba(255, 255, 255, 0.01);
 }
 :root {
-  --el-color-default-light-1: #dee2ff;
+  --el-color-default-light-1: #ddd7f7;
 }
 :root {
-  --el-color-default-light-2: #c3c8ff;
+  --el-color-default-light-2: #bcafef;
 }
 :root {
-  --el-color-default-light-3: #9fa4ff;
+  --el-color-default-light-3: #9a87e6;
 }
 :root {
-  --el-color-default-light-4: #7e79ff;
+  --el-color-default-light-4: #795fde;
 }
 :root {
-  --el-color-default-light-5: #6959fb;
-  --el-color-default: #6959fb;
+  --el-color-default-light-5: #5737d6;
+  --el-color-default: #5737d6;
 }
 :root {
-  --el-color-default-light-6: #5c3bf0;
+  --el-color-default-light-6: #462cab;
 }
 :root {
-  --el-color-default-light-7: #5737d6;
+  --el-color-default-light-7: #342180;
 }
 :root {
-  --el-color-default-light-8: #4028ab;
+  --el-color-default-light-8: #231656;
 }
 :root {
-  --el-color-default-light-9: #151517;
+  --el-color-default-light-9: #110b2b;
 }
 :root {
-  --el-color-primary-light-1: #dee2ff;
+  --el-color-primary-light-1: #ddd7f7;
 }
 :root {
-  --el-color-primary-light-2: #c3c8ff;
+  --el-color-primary-light-2: #bcafef;
 }
 :root {
-  --el-color-primary-light-3: #9fa4ff;
+  --el-color-primary-light-3: #9a87e6;
 }
 :root {
-  --el-color-primary-light-4: #7e79ff;
+  --el-color-primary-light-4: #795fde;
 }
 :root {
-  --el-color-primary-light-5: #6959fb;
-  --el-color-primary: #6959fb;
+  --el-color-primary-light-5: #5737d6;
+  --el-color-primary: #5737d6;
 }
 :root {
-  --el-color-primary-light-6: #5c3bf0;
+  --el-color-primary-light-6: #462cab;
 }
 :root {
-  --el-color-primary-light-7: #5737d6;
+  --el-color-primary-light-7: #342180;
 }
 :root {
-  --el-color-primary-light-8: #4028ab;
+  --el-color-primary-light-8: #231656;
 }
 :root {
-  --el-color-primary-light-9: #382887;
+  --el-color-primary-light-9: #110b2b;
 }
 :root {
-  --el-color-secondary-light-1: #d5f6e8;
+  --el-color-secondary-light-1: #e9fdf7;
 }
 :root {
-  --el-color-secondary-light-2: #aeecd4;
+  --el-color-secondary-light-2: #d4fbee;
 }
 :root {
-  --el-color-secondary-light-3: #7eddbf;
+  --el-color-secondary-light-3: #bef8e6;
 }
 :root {
-  --el-color-secondary-light-4: #43c49f;
+  --el-color-secondary-light-4: #a9f6dd;
 }
 :root {
-  --el-color-secondary-light-5: #20a987;
-  --el-color-secondary: #20a987;
+  --el-color-secondary-light-5: #93f4d5;
+  --el-color-secondary: #93f4d5;
 }
 :root {
-  --el-color-secondary-light-6: #12896e;
+  --el-color-secondary-light-6: #77d4b7;
 }
 :root {
-  --el-color-secondary-light-7: #0f6d5a;
+  --el-color-secondary-light-7: #5cb599;
 }
 :root {
-  --el-color-secondary-light-8: #0e5748;
+  --el-color-secondary-light-8: #40957a;
 }
 :root {
-  --el-color-secondary-light-9: #0d473d;
+  --el-color-secondary-light-9: #25765c;
 }
 :root {
-  --el-color-neutral-light-1: #f8f7f8;
+  --el-color-neutral-light-1: #eeedef;
 }
 :root {
-  --el-color-neutral-light-2: #f3f2f4;
+  --el-color-neutral-light-2: #dcdbe0;
 }
 :root {
-  --el-color-neutral-light-3: #dad9dd;
+  --el-color-neutral-light-3: #cbcad0;
 }
 :root {
-  --el-color-neutral-light-4: #c1c0c7;
+  --el-color-neutral-light-4: #b9b8c1;
 }
 :root {
   --el-color-neutral-light-5: #a8a6b1;
   --el-color-neutral: #a8a6b1;
 }
 :root {
-  --el-color-neutral-light-6: #8f8d9a;
+  --el-color-neutral-light-6: #8b8993;
 }
 :root {
-  --el-color-neutral-light-7: #83818f;
+  --el-color-neutral-light-7: #6e6c74;
 }
 :root {
-  --el-color-neutral-light-8: #454157;
+  --el-color-neutral-light-8: #515056;
 }
 :root {
-  --el-color-neutral-light-9: #07021f;
+  --el-color-neutral-light-9: #343337;
 }
 :root {
   --el-color-info-light-1: #e3f1fb;
@@ -176,116 +176,116 @@
   --el-color-info-light-9: #144a66;
 }
 :root {
-  --el-color-danger-light-1: #fde3e3;
+  --el-color-danger-light-1: #f9dede;
 }
 :root {
-  --el-color-danger-light-2: #fdcbcb;
+  --el-color-danger-light-2: #f4bcbd;
 }
 :root {
-  --el-color-danger-light-3: #faa7a7;
+  --el-color-danger-light-3: #ee9b9d;
 }
 :root {
-  --el-color-danger-light-4: #f35c5c;
+  --el-color-danger-light-4: #e9797c;
 }
 :root {
-  --el-color-danger-light-5: #eb4848;
-  --el-color-danger: #eb4848;
+  --el-color-danger-light-5: #e3585b;
+  --el-color-danger: #e3585b;
 }
 :root {
-  --el-color-danger-light-6: #d82a2a;
+  --el-color-danger-light-6: #b94749;
 }
 :root {
-  --el-color-danger-light-7: #b52020;
+  --el-color-danger-light-7: #8f3638;
 }
 :root {
-  --el-color-danger-light-8: #961e1e;
+  --el-color-danger-light-8: #642526;
 }
 :root {
-  --el-color-danger-light-9: #7d1f1f;
+  --el-color-danger-light-9: #3a1415;
 }
 :root {
-  --el-color-error-light-1: #fde3e3;
+  --el-color-error-light-1: #f9dede;
 }
 :root {
-  --el-color-error-light-2: #fdcbcb;
+  --el-color-error-light-2: #f4bcbd;
 }
 :root {
-  --el-color-error-light-3: #faa7a7;
+  --el-color-error-light-3: #ee9b9d;
 }
 :root {
-  --el-color-error-light-4: #f35c5c;
+  --el-color-error-light-4: #e9797c;
 }
 :root {
-  --el-color-error-light-5: #eb4848;
-  --el-color-error: #eb4848;
+  --el-color-error-light-5: #e3585b;
+  --el-color-error: #e3585b;
 }
 :root {
-  --el-color-error-light-6: #d82a2a;
+  --el-color-error-light-6: #b94749;
 }
 :root {
-  --el-color-error-light-7: #b52020;
+  --el-color-error-light-7: #8f3638;
 }
 :root {
-  --el-color-error-light-8: #961e1e;
+  --el-color-error-light-8: #642526;
 }
 :root {
-  --el-color-error-light-9: #7d1f1f;
+  --el-color-error-light-9: #3a1415;
 }
 :root {
-  --el-color-success-light-1: #f0f8ed;
+  --el-color-success-light-1: #dbf1e2;
 }
 :root {
-  --el-color-success-light-2: #d9edd3;
+  --el-color-success-light-2: #b7e2c6;
 }
 :root {
-  --el-color-success-light-3: #b4daa7;
+  --el-color-success-light-3: #94d4a9;
 }
 :root {
-  --el-color-success-light-4: #8ec87b;
+  --el-color-success-light-4: #70c58d;
 }
 :root {
-  --el-color-success-light-5: #69b64f;
-  --el-color-success: #69b64f;
+  --el-color-success-light-5: #4cb770;
+  --el-color-success: #4cb770;
 }
 :root {
-  --el-color-success-light-6: #488633;
+  --el-color-success-light-6: #3d925a;
 }
 :root {
-  --el-color-success-light-7: #3a6a2b;
+  --el-color-success-light-7: #2e6e43;
 }
 :root {
-  --el-color-success-light-8: #315526;
+  --el-color-success-light-8: #1e492d;
 }
 :root {
-  --el-color-success-light-9: #294621;
+  --el-color-success-light-9: #0f2516;
 }
 :root {
-  --el-color-warning-light-1: #fff5c6;
+  --el-color-warning-light-1: #faf3dc;
 }
 :root {
-  --el-color-warning-light-2: #ffe988;
+  --el-color-warning-light-2: #f6e8ba;
 }
 :root {
-  --el-color-warning-light-3: #ffd643;
+  --el-color-warning-light-3: #f1dc97;
 }
 :root {
-  --el-color-warning-light-4: #ffc520;
+  --el-color-warning-light-4: #edd175;
 }
 :root {
-  --el-color-warning-light-5: #f9a307;
-  --el-color-warning: #f9a307;
+  --el-color-warning-light-5: #e8c552;
+  --el-color-warning: #e8c552;
 }
 :root {
-  --el-color-warning-light-6: #dd7b02;
+  --el-color-warning-light-6: #bda042;
 }
 :root {
-  --el-color-warning-light-7: #b75606;
+  --el-color-warning-light-7: #927b32;
 }
 :root {
-  --el-color-warning-light-8: #94410c;
+  --el-color-warning-light-8: #665722;
 }
 :root {
-  --el-color-warning-light-9: #7a370d;
+  --el-color-warning-light-9: #3b3212;
 }
 /**
 Bununla selectorun içerisine variable ekleyebiliyorsun

package/dist/runtime/public/scss/element-plus/skeleton-item.scss

@@ -0,0 +1,83 @@
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@include b(skeleton) {
+  @include css-var-from-global(('skeleton', 'circle-size'), ('avatar', 'size'));
+}
+
+@mixin circle-size($size) {
+  width: $size;
+  height: $size;
+  line-height: $size;
+}
+
+@include b(skeleton) {
+  @include e(item) {
+    background: getCssVar('skeleton-color');
+    display: inline-block;
+    height: 16px;
+    border-radius: getCssVar('border-radius-base');
+    width: 100%;
+  }
+
+  @include e(circle) {
+    border-radius: 50%;
+
+    width: getCssVar('skeleton-circle-size');
+    height: getCssVar('skeleton-circle-size');
+    line-height: getCssVar('skeleton-circle-size');
+  }
+
+  @include e(button) {
+    height: 40px;
+    width: 64px;
+    border-radius: 4px;
+  }
+
+  @include e(p) {
+    width: 100%;
+    @include when(last) {
+      width: 61%;
+    }
+
+    @include when(first) {
+      width: 33%;
+    }
+  }
+
+  @include e(text) {
+    width: 100%;
+    height: getCssVar('font-size-small');
+  }
+
+  @include e(caption) {
+    height: getCssVar('font-size-tiny');
+  }
+
+  @include e(h1) {
+    height: getCssVar('font-size-huge');
+  }
+
+  @include e(h3) {
+    height: getCssVar('font-size-large');
+  }
+
+  @include e(h5) {
+    height: getCssVar('font-size-medium');
+  }
+
+  @include e(image) {
+    width: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0;
+
+    svg {
+      color: getCssVar('svg-monochrome-grey');
+      fill: currentColor;
+      width: 22%;
+      height: 22%;
+    }
+  }
+}