@timus-networks/theme 2.4.72 → 2.4.73

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.
package/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@timus-networks/theme",
3
3
  "configKey": "themeOptions",
4
- "version": "2.4.72",
4
+ "version": "2.4.73",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "0.8.4",
7
7
  "unbuild": "2.0.0"
package/dist/module.mjs CHANGED
@@ -11,7 +11,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
11
11
  const __dirname = __cjs_path__.dirname(__filename);
12
12
  const require = __cjs_mod__.createRequire(import.meta.url);
13
13
  const name = "@timus-networks/theme";
14
- const version = "2.4.72";
14
+ const version = "2.4.73";
15
15
  const description = "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.";
16
16
  const type = "module";
17
17
  const exports = {
@@ -0,0 +1,48 @@
1
+ <template>
2
+ <div class="flex flex-col gap-8 mb-16">
3
+ <h1 class="">Tab</h1>
4
+ <p>Divide data collections which are related yet belong to different types.</p>
5
+
6
+ <el-card>
7
+ <template #header> Basic Tab </template>
8
+ <div class="flex flex-col gap-7.5 items-start">
9
+ <p>
10
+ Basic and concise tabs. Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the value
11
+ attribute.
12
+ </p>
13
+ <el-tabs v-model="activeName" class="demo-tabs" style="width: 100%" @tab-click="handleClick">
14
+ <el-tab-pane label="User" name="first">User</el-tab-pane>
15
+ <el-tab-pane label="Config" name="second">Config</el-tab-pane>
16
+ <el-tab-pane label="Role" name="third">Role</el-tab-pane>
17
+ <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
18
+ </el-tabs>
19
+ </div>
20
+ <template #footer>
21
+ <code class="flex flex-col gap-3 items-start">
22
+ <html-encode :tag="snippets.basic" />
23
+ </code>
24
+ </template>
25
+ </el-card>
26
+ </div>
27
+ </template>
28
+ <script lang="ts" setup>
29
+ import type { TabsPaneContext } from 'element-plus';
30
+ import { ref } from 'vue';
31
+
32
+ const activeName = ref('first');
33
+
34
+ const handleClick = (tab: TabsPaneContext, event: Event) => {
35
+ console.log(tab, event);
36
+ };
37
+
38
+ const snippets = ref({
39
+ basic: `
40
+ <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
41
+ <el-tab-pane label="User" name="first">User</el-tab-pane>
42
+ <el-tab-pane label="Config" name="second">Config</el-tab-pane>
43
+ <el-tab-pane label="Role" name="third">Role</el-tab-pane>
44
+ <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
45
+ </el-tabs>
46
+ `,
47
+ });
48
+ </script>
@@ -76,6 +76,111 @@
76
76
  </code>
77
77
  </template>
78
78
  </el-card>
79
+
80
+ <el-card>
81
+ <template #header> Top and Bottom Border </template>
82
+ <div class="flex flex-col gap-7.5 items-start">
83
+ <p>Just add <el-text tag="mark">.t-border-y</el-text> to table class attribute for top and bottom border.</p>
84
+ <el-table :data="tableData" style="width: 100%" flexible height="300" class="t-border-y">
85
+ <el-table-column type="selection" width="16" />
86
+ <el-table-column label="Date" width="120" show-overflow-tooltip>
87
+ <template #default="scope">{{ scope.row.date }}</template>
88
+ </el-table-column>
89
+ <el-table-column property="name" label="Name" width="120" show-overflow-tooltip />
90
+ <el-table-column property="state" label="State" width="240" show-overflow-tooltip />
91
+ <el-table-column property="city" label="City" show-overflow-tooltip />
92
+ <el-table-column property="zip" label="Zip" show-overflow-tooltip />
93
+ <el-table-column property="address" label="Address" width="140" show-overflow-tooltip />
94
+ <el-table-column min-width="37" width="37" fixed="right">
95
+ <el-dropdown>
96
+ <el-icon class="more-icon"><el-icon-more-filled /></el-icon>
97
+ <template #dropdown>
98
+ <el-dropdown-menu data-testid="pages-customers-index-yisqvkendj">
99
+ <el-dropdown-item value="1"> Action 01 </el-dropdown-item>
100
+ <el-dropdown-item value="2"> Action 02 </el-dropdown-item>
101
+ <el-dropdown-item value="3"> Action 03 </el-dropdown-item>
102
+ </el-dropdown-menu>
103
+ </template>
104
+ </el-dropdown>
105
+ </el-table-column>
106
+ </el-table>
107
+ </div>
108
+ <template #footer>
109
+ <code class="flex flex-col gap-3 items-start">
110
+ <html-encode :tag="snippets.top_and_bottom_border" />
111
+ </code>
112
+ </template>
113
+ </el-card>
114
+
115
+ <el-card>
116
+ <template #header>Just Top Border </template>
117
+ <div class="flex flex-col gap-7.5 items-start">
118
+ <p>Just add <el-text tag="mark">.t-border-t</el-text> to table class attribute for top border.</p>
119
+ <el-table :data="tableData" style="width: 100%" flexible height="300" class="t-border-t">
120
+ <el-table-column type="selection" width="16" />
121
+ <el-table-column label="Date" width="120" show-overflow-tooltip>
122
+ <template #default="scope">{{ scope.row.date }}</template>
123
+ </el-table-column>
124
+ <el-table-column property="name" label="Name" width="120" show-overflow-tooltip />
125
+ <el-table-column property="state" label="State" width="240" show-overflow-tooltip />
126
+ <el-table-column property="city" label="City" show-overflow-tooltip />
127
+ <el-table-column property="zip" label="Zip" show-overflow-tooltip />
128
+ <el-table-column property="address" label="Address" width="140" show-overflow-tooltip />
129
+ <el-table-column min-width="37" width="37" fixed="right">
130
+ <el-dropdown>
131
+ <el-icon class="more-icon"><el-icon-more-filled /></el-icon>
132
+ <template #dropdown>
133
+ <el-dropdown-menu data-testid="pages-customers-index-yisqvkendj">
134
+ <el-dropdown-item value="1"> Action 01 </el-dropdown-item>
135
+ <el-dropdown-item value="2"> Action 02 </el-dropdown-item>
136
+ <el-dropdown-item value="3"> Action 03 </el-dropdown-item>
137
+ </el-dropdown-menu>
138
+ </template>
139
+ </el-dropdown>
140
+ </el-table-column>
141
+ </el-table>
142
+ </div>
143
+ <template #footer>
144
+ <code class="flex flex-col gap-3 items-start">
145
+ <html-encode :tag="snippets.top_border" />
146
+ </code>
147
+ </template>
148
+ </el-card>
149
+
150
+ <el-card>
151
+ <template #header>Just Bottom Border </template>
152
+ <div class="flex flex-col gap-7.5 items-start">
153
+ <p>Just add <el-text tag="mark">.t-border-b</el-text> to table class attribute for bottom border.</p>
154
+ <el-table :data="tableData" style="width: 100%" flexible height="300" class="t-border-b">
155
+ <el-table-column type="selection" width="16" />
156
+ <el-table-column label="Date" width="120" show-overflow-tooltip>
157
+ <template #default="scope">{{ scope.row.date }}</template>
158
+ </el-table-column>
159
+ <el-table-column property="name" label="Name" width="120" show-overflow-tooltip />
160
+ <el-table-column property="state" label="State" width="240" show-overflow-tooltip />
161
+ <el-table-column property="city" label="City" show-overflow-tooltip />
162
+ <el-table-column property="zip" label="Zip" show-overflow-tooltip />
163
+ <el-table-column property="address" label="Address" width="140" show-overflow-tooltip />
164
+ <el-table-column min-width="37" width="37" fixed="right">
165
+ <el-dropdown>
166
+ <el-icon class="more-icon"><el-icon-more-filled /></el-icon>
167
+ <template #dropdown>
168
+ <el-dropdown-menu data-testid="pages-customers-index-yisqvkendj">
169
+ <el-dropdown-item value="1"> Action 01 </el-dropdown-item>
170
+ <el-dropdown-item value="2"> Action 02 </el-dropdown-item>
171
+ <el-dropdown-item value="3"> Action 03 </el-dropdown-item>
172
+ </el-dropdown-menu>
173
+ </template>
174
+ </el-dropdown>
175
+ </el-table-column>
176
+ </el-table>
177
+ </div>
178
+ <template #footer>
179
+ <code class="flex flex-col gap-3 items-start">
180
+ <html-encode :tag="snippets.bottom_border" />
181
+ </code>
182
+ </template>
183
+ </el-card>
79
184
  </div>
80
185
  </template>
81
186
  <script lang="ts" setup>
@@ -165,5 +270,26 @@
165
270
  <el-table-column prop="address" label="Address" />
166
271
  </el-table>
167
272
  `,
273
+ top_and_bottom_border: `
274
+ <el-table :data="tableData" class="t-border-y">
275
+ <el-table-column prop="date" label="Date" width="180" />
276
+ <el-table-column prop="name" label="Name" width="180" />
277
+ <el-table-column prop="address" label="Address" />
278
+ </el-table>
279
+ `,
280
+ bottom_border: `
281
+ <el-table :data="tableData" class="t-border-b">
282
+ <el-table-column prop="date" label="Date" width="180" />
283
+ <el-table-column prop="name" label="Name" width="180" />
284
+ <el-table-column prop="address" label="Address" />
285
+ </el-table>
286
+ `,
287
+ top_border: `
288
+ <el-table :data="tableData" class="t-border-t">
289
+ <el-table-column prop="date" label="Date" width="180" />
290
+ <el-table-column prop="name" label="Name" width="180" />
291
+ <el-table-column prop="address" label="Address" />
292
+ </el-table>
293
+ `,
168
294
  });
169
295
  </script>
@@ -25,6 +25,7 @@
25
25
  <el-tab-pane label="Sidebar" name="sidebar" lazy><example-sidebar /></el-tab-pane>
26
26
  <el-tab-pane label="Static" name="static" lazy><example-static /></el-tab-pane>
27
27
  <el-tab-pane label="Switch" name="switch" lazy><example-switch /></el-tab-pane>
28
+ <el-tab-pane label="Tab" name="tab" lazy><example-tab /></el-tab-pane>
28
29
  <el-tab-pane label="Table" name="table" lazy><example-table /></el-tab-pane>
29
30
  <el-tab-pane label="Tag" name="tag" lazy><example-tag /></el-tab-pane>
30
31
  <el-tab-pane label="TimePicker" name="time" lazy><example-timepicker /></el-tab-pane>
@@ -359,7 +359,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
359
359
  --el-text-color-placeholder: var(--el-color-neutral-light-4);
360
360
  --el-text-color-disabled: var(--el-color-neutral-light-4);
361
361
  --el-border-color: var(--el-color-neutral-light-4);
362
- --el-border-color-light: #e4e7ed;
362
+ --el-border-color-light: var(--el-color-neutral-light-2);
363
363
  --el-border-color-lighter: #ebeef5;
364
364
  --el-border-color-extra-light: #f2f6fc;
365
365
  --el-border-color-dark: #d4d7de;
@@ -130,7 +130,7 @@ $border-color: () !default;
130
130
  $border-color: map.merge(
131
131
  (
132
132
  '': getCssVar('color', 'neutral', 'light-4'),
133
- 'light': #e4e7ed,
133
+ 'light': getCssVar('color', 'neutral', 'light-2'),
134
134
  'lighter': #ebeef5,
135
135
  'extra-light': #f2f6fc,
136
136
  'dark': #d4d7de,
@@ -957,7 +957,7 @@ $table: map.merge(
957
957
  'index': getCssVar('index-normal'),
958
958
  'font-weight-body': 300,
959
959
  'font-weight-head': 400,
960
- 'font-size': 13px,
960
+ 'font-size': 14px,
961
961
  ),
962
962
  $table
963
963
  );
@@ -978,8 +978,9 @@ $table-padding: () !default;
978
978
  $table-padding: map.merge(
979
979
  (
980
980
  'large': 12px 0,
981
- 'default': 11px 0,
981
+ 'default': 8px 0,
982
982
  'small': 4px 0,
983
+ 'mini': 2px 0,
983
984
  ),
984
985
  $table-padding
985
986
  );
@@ -990,6 +991,7 @@ $table-cell-padding: map.merge(
990
991
  'large': 0 16px,
991
992
  'default': 0 12px,
992
993
  'small': 0 8px,
994
+ 'mini': 0 4px,
993
995
  ),
994
996
  $table-cell-padding
995
997
  );
@@ -1390,7 +1392,7 @@ $timeline: map.merge(
1390
1392
  $tabs: () !default;
1391
1393
  $tabs: map.merge(
1392
1394
  (
1393
- 'header-height': 40px,
1395
+ 'header-height': 36px,
1394
1396
  ),
1395
1397
  $tabs
1396
1398
  );
@@ -359,7 +359,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
359
359
  --el-text-color-placeholder: var(--el-color-neutral-light-4);
360
360
  --el-text-color-disabled: var(--el-color-neutral-light-4);
361
361
  --el-border-color: var(--el-color-neutral-light-4);
362
- --el-border-color-light: #e4e7ed;
362
+ --el-border-color-light: var(--el-color-neutral-light-2);
363
363
  --el-border-color-lighter: #ebeef5;
364
364
  --el-border-color-extra-light: #f2f6fc;
365
365
  --el-border-color-dark: #d4d7de;
@@ -11440,7 +11440,6 @@ h6,
11440
11440
  box-shadow: var(--el-box-shadow-light);
11441
11441
  overflow-wrap: break-word;
11442
11442
  box-sizing: border-box;
11443
- width: auto !important;
11444
11443
  }
11445
11444
  .el-popover.el-popper--plain {
11446
11445
  padding: var(--el-popover-padding-large);
@@ -13815,7 +13814,7 @@ h6,
13815
13814
  --el-table-index: var(--el-index-normal);
13816
13815
  --el-table-font-weight-body: 300;
13817
13816
  --el-table-font-weight-head: 400;
13818
- --el-table-font-size: 13px;
13817
+ --el-table-font-size: 14px;
13819
13818
  }
13820
13819
 
13821
13820
  .el-table {
@@ -13823,25 +13822,12 @@ h6,
13823
13822
  overflow: hidden;
13824
13823
  box-sizing: border-box;
13825
13824
  height: fit-content;
13826
- width: calc(100% - 48px) !important;
13827
13825
  max-width: 100%;
13828
13826
  background-color: var(--el-table-bg-color);
13829
- font-size: var(--el-table-font-size);
13827
+ font-size: var(--el-table-font-size-default);
13830
13828
  font-weight: var(--el-table-font-weight-body);
13831
13829
  color: var(--el-table-text-color);
13832
13830
  overflow: initial;
13833
- transform: translateX(24px);
13834
- margin: 8px 0;
13835
- }
13836
- .el-table::before {
13837
- content: "";
13838
- position: absolute;
13839
- top: -7px;
13840
- left: -23px;
13841
- right: -23px;
13842
- bottom: -7px;
13843
- box-shadow: 0 0 0 1px var(--el-color-neutral-light-3);
13844
- border-radius: 6px;
13845
13831
  }
13846
13832
  .el-table__inner-wrapper {
13847
13833
  position: relative;
@@ -13937,7 +13923,7 @@ h6,
13937
13923
  background: var(--el-fill-color-light);
13938
13924
  }
13939
13925
  .el-table .el-table__cell {
13940
- padding: 11px 0;
13926
+ padding: 8px 0;
13941
13927
  min-width: 0;
13942
13928
  box-sizing: border-box;
13943
13929
  text-overflow: ellipsis;
@@ -13975,7 +13961,7 @@ h6,
13975
13961
  text-overflow: ellipsis;
13976
13962
  white-space: normal;
13977
13963
  overflow-wrap: break-word;
13978
- line-height: 25px;
13964
+ line-height: 20px;
13979
13965
  padding: 0 12px;
13980
13966
  }
13981
13967
  .el-table .cell.el-tooltip {
@@ -13983,7 +13969,7 @@ h6,
13983
13969
  min-width: 50px;
13984
13970
  }
13985
13971
  .el-table .cell .el-link {
13986
- font-size: var(--el-table-font-size);
13972
+ font-size: var(--el-table-font-size-default);
13987
13973
  line-height: 16px;
13988
13974
  }
13989
13975
  .el-table .cell .more-icon {
@@ -13991,13 +13977,23 @@ h6,
13991
13977
  align-items: center;
13992
13978
  justify-content: center;
13993
13979
  color: var(--el-color-neutral-light-3);
13994
- width: 24px;
13995
- height: 24px;
13980
+ width: 20px;
13981
+ height: 20px;
13996
13982
  }
13997
13983
  .el-table .cell .more-icon svg {
13998
- width: 24px;
13984
+ width: 20px;
13999
13985
  height: 20px;
14000
13986
  }
13987
+ .el-table--default {
13988
+ font-size: 14px;
13989
+ }
13990
+ .el-table--default .el-table__cell {
13991
+ padding: 8px 0;
13992
+ }
13993
+ .el-table--default .cell {
13994
+ padding: 0 12px;
13995
+ }
13996
+
14001
13997
  .el-table--large {
14002
13998
  font-size: var(--el-font-size-base);
14003
13999
  }
@@ -14008,16 +14004,9 @@ h6,
14008
14004
  padding: 0 16px;
14009
14005
  }
14010
14006
 
14011
- .el-table--default {
14012
- font-size: 14px;
14013
- }
14014
- .el-table--default .el-table__cell {
14015
- padding: 11px 0;
14016
- }
14017
- .el-table--default .cell {
14018
- padding: 0 12px;
14007
+ .el-table--medium {
14008
+ font-size: 13px;
14019
14009
  }
14020
-
14021
14010
  .el-table--small {
14022
14011
  font-size: 12px;
14023
14012
  }
@@ -14419,6 +14408,30 @@ h6,
14419
14408
  .el-table.no-border::before {
14420
14409
  box-shadow: none;
14421
14410
  }
14411
+ .el-table.with-frame {
14412
+ width: calc(100% - 48px) !important;
14413
+ transform: translateX(24px);
14414
+ }
14415
+ .el-table.with-frame::before {
14416
+ content: "";
14417
+ position: absolute;
14418
+ top: -7px;
14419
+ left: -23px;
14420
+ right: -23px;
14421
+ bottom: -7px;
14422
+ box-shadow: 0 0 0 1px var(--el-color-neutral-light-3);
14423
+ border-radius: 6px;
14424
+ }
14425
+ .el-table.t-border-b {
14426
+ border-bottom: 1px solid var(--el-table-border-color);
14427
+ }
14428
+ .el-table.t-border-t {
14429
+ border-top: 1px solid var(--el-table-border-color);
14430
+ }
14431
+ .el-table.t-border-y {
14432
+ border-bottom: 1px solid var(--el-table-border-color);
14433
+ border-top: 1px solid var(--el-table-border-color);
14434
+ }
14422
14435
 
14423
14436
  .el-table-v2 {
14424
14437
  --el-table-border-color: var(--el-color-neutral-light-3);
@@ -14437,7 +14450,7 @@ h6,
14437
14450
  --el-table-index: var(--el-index-normal);
14438
14451
  --el-table-font-weight-body: 300;
14439
14452
  --el-table-font-weight-head: 400;
14440
- --el-table-font-size: 13px;
14453
+ --el-table-font-size: 14px;
14441
14454
  }
14442
14455
 
14443
14456
  .el-table-v2 {
@@ -14641,13 +14654,12 @@ h6,
14641
14654
  }
14642
14655
 
14643
14656
  .el-tabs {
14644
- --el-tabs-header-height: 40px;
14657
+ --el-tabs-header-height: 36px;
14645
14658
  display: flex;
14646
14659
  }
14647
14660
  .el-tabs__header {
14648
14661
  padding: 0;
14649
14662
  position: relative;
14650
- margin: 0 0 15px;
14651
14663
  display: flex;
14652
14664
  align-items: center;
14653
14665
  justify-content: space-between;
@@ -14712,7 +14724,7 @@ h6,
14712
14724
  left: 0;
14713
14725
  bottom: 0;
14714
14726
  width: 100%;
14715
- height: 2px;
14727
+ height: 1px;
14716
14728
  background-color: var(--el-border-color-light);
14717
14729
  z-index: var(--el-index-normal);
14718
14730
  }
@@ -14761,7 +14773,7 @@ h6,
14761
14773
  }
14762
14774
 
14763
14775
  .el-tabs__item {
14764
- padding: 0 12px;
14776
+ padding: 0 8px;
14765
14777
  height: var(--el-tabs-header-height);
14766
14778
  box-sizing: border-box;
14767
14779
  display: flex;
@@ -14770,7 +14782,7 @@ h6,
14770
14782
  list-style: none;
14771
14783
  font-size: var(--el-font-size-base);
14772
14784
  font-weight: 500;
14773
- color: var(--el-color-neutral-light-4);
14785
+ color: var(--el-color-neutral-light-6);
14774
14786
  position: relative;
14775
14787
  }
14776
14788
  .el-tabs__item:focus, .el-tabs__item:focus:active {
@@ -324,7 +324,6 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
324
324
  box-shadow: var(--el-box-shadow-light);
325
325
  overflow-wrap: break-word;
326
326
  box-sizing: border-box;
327
- width: auto !important;
328
327
  }
329
328
  .el-popover.el-popper--plain {
330
329
  padding: var(--el-popover-padding-large);
@@ -18,7 +18,7 @@
18
18
  box-shadow: getCssVar('box-shadow-light');
19
19
  overflow-wrap: break-word;
20
20
  box-sizing: border-box;
21
- width: auto !important;
21
+ // width: auto !important;
22
22
 
23
23
  @include m(plain) {
24
24
  padding: getCssVar('popover-padding-large');
@@ -317,7 +317,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
317
317
  --el-table-index: var(--el-index-normal);
318
318
  --el-table-font-weight-body: 300;
319
319
  --el-table-font-weight-head: 400;
320
- --el-table-font-size: 13px;
320
+ --el-table-font-size: 14px;
321
321
  }
322
322
 
323
323
  .el-table-v2 {
@@ -317,7 +317,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
317
317
  --el-table-index: var(--el-index-normal);
318
318
  --el-table-font-weight-body: 300;
319
319
  --el-table-font-weight-head: 400;
320
- --el-table-font-size: 13px;
320
+ --el-table-font-size: 14px;
321
321
  }
322
322
 
323
323
  .el-table {
@@ -325,25 +325,12 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
325
325
  overflow: hidden;
326
326
  box-sizing: border-box;
327
327
  height: fit-content;
328
- width: calc(100% - 48px) !important;
329
328
  max-width: 100%;
330
329
  background-color: var(--el-table-bg-color);
331
- font-size: var(--el-table-font-size);
330
+ font-size: var(--el-table-font-size-default);
332
331
  font-weight: var(--el-table-font-weight-body);
333
332
  color: var(--el-table-text-color);
334
333
  overflow: initial;
335
- transform: translateX(24px);
336
- margin: 8px 0;
337
- }
338
- .el-table::before {
339
- content: "";
340
- position: absolute;
341
- top: -7px;
342
- left: -23px;
343
- right: -23px;
344
- bottom: -7px;
345
- box-shadow: 0 0 0 1px var(--el-color-neutral-light-3);
346
- border-radius: 6px;
347
334
  }
348
335
  .el-table__inner-wrapper {
349
336
  position: relative;
@@ -439,7 +426,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
439
426
  background: var(--el-fill-color-light);
440
427
  }
441
428
  .el-table .el-table__cell {
442
- padding: 11px 0;
429
+ padding: 8px 0;
443
430
  min-width: 0;
444
431
  box-sizing: border-box;
445
432
  text-overflow: ellipsis;
@@ -477,7 +464,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
477
464
  text-overflow: ellipsis;
478
465
  white-space: normal;
479
466
  overflow-wrap: break-word;
480
- line-height: 25px;
467
+ line-height: 20px;
481
468
  padding: 0 12px;
482
469
  }
483
470
  .el-table .cell.el-tooltip {
@@ -485,7 +472,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
485
472
  min-width: 50px;
486
473
  }
487
474
  .el-table .cell .el-link {
488
- font-size: var(--el-table-font-size);
475
+ font-size: var(--el-table-font-size-default);
489
476
  line-height: 16px;
490
477
  }
491
478
  .el-table .cell .more-icon {
@@ -493,13 +480,23 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
493
480
  align-items: center;
494
481
  justify-content: center;
495
482
  color: var(--el-color-neutral-light-3);
496
- width: 24px;
497
- height: 24px;
483
+ width: 20px;
484
+ height: 20px;
498
485
  }
499
486
  .el-table .cell .more-icon svg {
500
- width: 24px;
487
+ width: 20px;
501
488
  height: 20px;
502
489
  }
490
+ .el-table--default {
491
+ font-size: 14px;
492
+ }
493
+ .el-table--default .el-table__cell {
494
+ padding: 8px 0;
495
+ }
496
+ .el-table--default .cell {
497
+ padding: 0 12px;
498
+ }
499
+
503
500
  .el-table--large {
504
501
  font-size: var(--el-font-size-base);
505
502
  }
@@ -510,16 +507,9 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
510
507
  padding: 0 16px;
511
508
  }
512
509
 
513
- .el-table--default {
514
- font-size: 14px;
515
- }
516
- .el-table--default .el-table__cell {
517
- padding: 11px 0;
518
- }
519
- .el-table--default .cell {
520
- padding: 0 12px;
510
+ .el-table--medium {
511
+ font-size: 13px;
521
512
  }
522
-
523
513
  .el-table--small {
524
514
  font-size: 12px;
525
515
  }
@@ -920,4 +910,28 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
920
910
  }
921
911
  .el-table.no-border::before {
922
912
  box-shadow: none;
913
+ }
914
+ .el-table.with-frame {
915
+ width: calc(100% - 48px) !important;
916
+ transform: translateX(24px);
917
+ }
918
+ .el-table.with-frame::before {
919
+ content: "";
920
+ position: absolute;
921
+ top: -7px;
922
+ left: -23px;
923
+ right: -23px;
924
+ bottom: -7px;
925
+ box-shadow: 0 0 0 1px var(--el-color-neutral-light-3);
926
+ border-radius: 6px;
927
+ }
928
+ .el-table.t-border-b {
929
+ border-bottom: 1px solid var(--el-table-border-color);
930
+ }
931
+ .el-table.t-border-t {
932
+ border-top: 1px solid var(--el-table-border-color);
933
+ }
934
+ .el-table.t-border-y {
935
+ border-bottom: 1px solid var(--el-table-border-color);
936
+ border-top: 1px solid var(--el-table-border-color);
923
937
  }
@@ -13,26 +13,26 @@
13
13
  overflow: hidden;
14
14
  box-sizing: border-box;
15
15
  height: fit-content;
16
- width: calc(100% - 48px) !important;
16
+ // width: calc(100% - 48px) !important;
17
17
  max-width: 100%;
18
18
  background-color: getCssVar('table-bg-color');
19
- font-size: getCssVar('table-font-size');
19
+ font-size: getCssVar('table-font-size-default');
20
20
  font-weight: getCssVar('table-font-weight-body');
21
21
  color: getCssVar('table-text-color');
22
22
  overflow: initial;
23
- transform: translateX(24px);
24
- margin: 8px 0;
25
-
26
- &::before {
27
- content: '';
28
- position: absolute;
29
- top: -7px;
30
- left: -23px;
31
- right: -23px;
32
- bottom: -7px;
33
- box-shadow: 0 0 0 1px getCssVar('color-neutral-light-3');
34
- border-radius: 6px;
35
- }
23
+ // transform: translateX(24px);
24
+ // margin: 8px 0;
25
+
26
+ // &::before {
27
+ // content: '';
28
+ // position: absolute;
29
+ // top: -7px;
30
+ // left: -23px;
31
+ // right: -23px;
32
+ // bottom: -7px;
33
+ // box-shadow: 0 0 0 1px getCssVar('color-neutral-light-3');
34
+ // border-radius: 6px;
35
+ // }
36
36
 
37
37
  @include e(inner-wrapper) {
38
38
  position: relative;
@@ -214,7 +214,7 @@
214
214
  text-overflow: ellipsis;
215
215
  white-space: normal;
216
216
  overflow-wrap: break-word;
217
- line-height: 25px;
217
+ line-height: 20px;
218
218
  padding: 0 12px;
219
219
 
220
220
  &.#{$namespace}-tooltip {
@@ -223,7 +223,7 @@
223
223
  }
224
224
 
225
225
  .el-link {
226
- font-size: getCssVar('table-font-size');
226
+ font-size: getCssVar('table-font-size-default');
227
227
  line-height: 16px;
228
228
  }
229
229
 
@@ -232,18 +232,18 @@
232
232
  align-items: center;
233
233
  justify-content: center;
234
234
  color: var(--el-color-neutral-light-3);
235
- width: 24px;
236
- height: 24px;
235
+ width: 20px;
236
+ height: 20px;
237
237
  // margin-left: 4px;
238
238
 
239
239
  svg {
240
- width: 24px;
240
+ width: 20px;
241
241
  height: 20px;
242
242
  }
243
243
  }
244
244
  }
245
245
 
246
- @each $size in (large, default, small) {
246
+ @each $size in (default, large, medium, small) {
247
247
  @include m($size) {
248
248
  font-size: map.get($table-font-size, $size);
249
249
 
@@ -762,4 +762,33 @@
762
762
  box-shadow: none;
763
763
  }
764
764
  }
765
+
766
+ &.with-frame {
767
+ width: calc(100% - 48px) !important;
768
+ transform: translateX(24px);
769
+
770
+ &::before {
771
+ content: '';
772
+ position: absolute;
773
+ top: -7px;
774
+ left: -23px;
775
+ right: -23px;
776
+ bottom: -7px;
777
+ box-shadow: 0 0 0 1px var(--el-color-neutral-light-3);
778
+ border-radius: 6px;
779
+ }
780
+ }
781
+
782
+ &.t-border-b {
783
+ border-bottom: 1px solid getCssVar('table-border-color');
784
+ }
785
+
786
+ &.t-border-t {
787
+ border-top: 1px solid getCssVar('table-border-color');
788
+ }
789
+
790
+ &.t-border-y {
791
+ border-bottom: 1px solid getCssVar('table-border-color');
792
+ border-top: 1px solid getCssVar('table-border-color');
793
+ }
765
794
  }
@@ -301,13 +301,12 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
301
301
  }
302
302
  **/
303
303
  .el-tabs {
304
- --el-tabs-header-height: 40px;
304
+ --el-tabs-header-height: 36px;
305
305
  display: flex;
306
306
  }
307
307
  .el-tabs__header {
308
308
  padding: 0;
309
309
  position: relative;
310
- margin: 0 0 15px;
311
310
  display: flex;
312
311
  align-items: center;
313
312
  justify-content: space-between;
@@ -372,7 +371,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
372
371
  left: 0;
373
372
  bottom: 0;
374
373
  width: 100%;
375
- height: 2px;
374
+ height: 1px;
376
375
  background-color: var(--el-border-color-light);
377
376
  z-index: var(--el-index-normal);
378
377
  }
@@ -421,7 +420,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
421
420
  }
422
421
 
423
422
  .el-tabs__item {
424
- padding: 0 12px;
423
+ padding: 0 8px;
425
424
  height: var(--el-tabs-header-height);
426
425
  box-sizing: border-box;
427
426
  display: flex;
@@ -430,7 +429,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
430
429
  list-style: none;
431
430
  font-size: var(--el-font-size-base);
432
431
  font-weight: 500;
433
- color: var(--el-color-neutral-light-4);
432
+ color: var(--el-color-neutral-light-6);
434
433
  position: relative;
435
434
  }
436
435
  .el-tabs__item:focus, .el-tabs__item:focus:active {
@@ -8,7 +8,7 @@
8
8
  @include e(header) {
9
9
  padding: 0;
10
10
  position: relative;
11
- margin: 0 0 15px;
11
+ // margin: 0 0 15px;
12
12
  display: flex;
13
13
  align-items: center;
14
14
  justify-content: space-between;
@@ -73,7 +73,7 @@
73
73
  left: 0;
74
74
  bottom: 0;
75
75
  width: 100%;
76
- height: 2px;
76
+ height: 1px;
77
77
  background-color: getCssVar('border-color-light');
78
78
  z-index: getCssVar('index-normal');
79
79
  }
@@ -119,7 +119,7 @@
119
119
  }
120
120
  }
121
121
  @include e(item) {
122
- padding: 0 12px;
122
+ padding: 0 8px;
123
123
  height: getCssVar('tabs', 'header-height');
124
124
  box-sizing: border-box;
125
125
  display: flex;
@@ -128,7 +128,7 @@
128
128
  list-style: none;
129
129
  font-size: getCssVar('font-size-base');
130
130
  font-weight: 500;
131
- color: getCssVar('color', 'neutral-light-4');
131
+ color: getCssVar('color', 'neutral-light-6');
132
132
  position: relative;
133
133
 
134
134
  &:focus,
@@ -359,7 +359,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
359
359
  --el-text-color-placeholder: var(--el-color-neutral-light-4);
360
360
  --el-text-color-disabled: var(--el-color-neutral-light-4);
361
361
  --el-border-color: var(--el-color-neutral-light-4);
362
- --el-border-color-light: #e4e7ed;
362
+ --el-border-color-light: var(--el-color-neutral-light-2);
363
363
  --el-border-color-lighter: #ebeef5;
364
364
  --el-border-color-extra-light: #f2f6fc;
365
365
  --el-border-color-dark: #d4d7de;
@@ -1238,11 +1238,11 @@ body {
1238
1238
  align-items: center;
1239
1239
  color: var(--el-color-neutral-light-3);
1240
1240
  display: flex;
1241
- height: 24px;
1241
+ height: 20px;
1242
1242
  justify-content: center;
1243
- width: 24px;
1243
+ width: 20px;
1244
1244
  }
1245
1245
  .el-icon.more-icon svg {
1246
1246
  height: 20px;
1247
- width: 24px;
1247
+ width: 20px;
1248
1248
  }
@@ -49,13 +49,13 @@ body {
49
49
  align-items: center;
50
50
  color: var(--el-color-neutral-light-3);
51
51
  display: flex;
52
- height: 24px;
52
+ height: 20px;
53
53
  justify-content: center;
54
- width: 24px;
54
+ width: 20px;
55
55
 
56
56
  svg {
57
57
  height: 20px;
58
- width: 24px;
58
+ width: 20px;
59
59
  }
60
60
  }
61
61
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@timus-networks/theme",
3
- "version": "2.4.72",
3
+ "version": "2.4.73",
4
4
  "description": "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.",
5
5
  "type": "module",
6
6
  "exports": {