siam-ui-utils 2.2.0 → 2.2.1
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/package.json +1 -1
- package/src/assets/css/sass/_gogo.style.scss +1 -47
- package/src/assets/css/sass/_mixins.scss +20 -13
- package/src/assets/css/sass/ampf_style.scss +3 -0
- package/src/assets/css/sass/main.scss +1 -1
- package/src/assets/css/sass/plugins/react-table.scss +4 -1
- package/src/assets/css/sass/themes/variables.scss +48 -0
- package/vite.config.ts +1 -1
package/package.json
CHANGED
|
@@ -55,54 +55,8 @@ Table of Contents
|
|
|
55
55
|
|
|
56
56
|
@use 'sass:color';
|
|
57
57
|
@use './themes/variables.scss' as *;
|
|
58
|
+
@use './mixins' as *;
|
|
58
59
|
|
|
59
|
-
$main-menu-item-height: 30px;
|
|
60
|
-
$main-menu-width: 150px;
|
|
61
|
-
$main-menu-width-lg: 150px;
|
|
62
|
-
$main-menu-width-md: 130px;
|
|
63
|
-
$main-menu-width-xs: 130px;
|
|
64
|
-
|
|
65
|
-
$sub-menu-width: 200px;
|
|
66
|
-
$sub-menu-width-lg: 200px;
|
|
67
|
-
$sub-menu-width-md: 200px;
|
|
68
|
-
$sub-menu-width-xs: 200px;
|
|
69
|
-
|
|
70
|
-
$navbar-height: 40px;
|
|
71
|
-
$navbar-height-xs: 40px;
|
|
72
|
-
$navbar-height-md: 40px;
|
|
73
|
-
$navbar-height-lg: 40px;
|
|
74
|
-
|
|
75
|
-
$main-margin: 10px;
|
|
76
|
-
$main-margin-lg: 10px;
|
|
77
|
-
$main-margin-md: 10px;
|
|
78
|
-
$main-margin-xs: 10px;
|
|
79
|
-
|
|
80
|
-
$app-menu-width: 280px;
|
|
81
|
-
|
|
82
|
-
$main-menu-item-height-mobile: 30px;
|
|
83
|
-
|
|
84
|
-
$menu-collapse-time: 300ms;
|
|
85
|
-
$animation-time-long: 1000ms;
|
|
86
|
-
$animation-time-short: 200ms;
|
|
87
|
-
|
|
88
|
-
$border-radius: 0.1rem;
|
|
89
|
-
$border-radius-rounded: 0.75rem;
|
|
90
|
-
|
|
91
|
-
$theme-color-purple-monster: #922c88;
|
|
92
|
-
$theme-color-blue-navy: #00365a;
|
|
93
|
-
$theme-color-blue-yale: #145388;
|
|
94
|
-
$theme-color-blue-olympic: #008ecc;
|
|
95
|
-
$theme-color-green-moss: #576a3d;
|
|
96
|
-
$theme-color-green-lime: #6fb327;
|
|
97
|
-
$theme-color-orange-carrot: #ed7117;
|
|
98
|
-
$theme-color-red-ruby: #900604;
|
|
99
|
-
$theme-color-yellow-granola: #c0a145;
|
|
100
|
-
$theme-color-grey-steel: #48494b;
|
|
101
|
-
|
|
102
|
-
$info-color: #3195a5;
|
|
103
|
-
$success-color: #3e884f;
|
|
104
|
-
$warning-color: #b69329;
|
|
105
|
-
$error-color: #c43d4b;
|
|
106
60
|
|
|
107
61
|
/* 01.Base */
|
|
108
62
|
html {
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
@use './themes/variables.scss' as *;
|
|
2
|
+
@use "sass:list";
|
|
3
|
+
@use "sass:map";
|
|
4
|
+
@use "sass:meta";
|
|
5
|
+
@use "sass:string";
|
|
6
|
+
|
|
7
|
+
|
|
1
8
|
// Mixin to prefix several properties at once
|
|
2
9
|
// @author Hugo Giraudel
|
|
3
10
|
// @param {Map} $declarations - Declarations to prefix
|
|
@@ -31,9 +38,9 @@
|
|
|
31
38
|
// @return {List}
|
|
32
39
|
|
|
33
40
|
@function top-shadow($depth) {
|
|
34
|
-
$primary-offset: nth($shadowOffsetsTop, $depth) * 1px;
|
|
35
|
-
$blur: nth($shadowBlursTop, $depth) * 4px;
|
|
36
|
-
$color: rgba(black, nth($shadowOpacitiesTop, $depth));
|
|
41
|
+
$primary-offset: list.nth($shadowOffsetsTop, $depth) * 1px;
|
|
42
|
+
$blur: list.nth($shadowBlursTop, $depth) * 4px;
|
|
43
|
+
$color: rgba(black, list.nth($shadowOpacitiesTop, $depth));
|
|
37
44
|
|
|
38
45
|
@return 0 $primary-offset $blur $color;
|
|
39
46
|
}
|
|
@@ -42,9 +49,9 @@
|
|
|
42
49
|
// @param {Number} $depth - depth level
|
|
43
50
|
// @return {List}
|
|
44
51
|
@function bottom-shadow($depth) {
|
|
45
|
-
$primary-offset: nth($shadowOffsetsBottom, $depth) * 1px;
|
|
46
|
-
$blur: nth($shadowBlursBottom, $depth) * 5px;
|
|
47
|
-
$color: rgba(black, nth($shadowOpacitiesBottom, $depth));
|
|
52
|
+
$primary-offset: list.nth($shadowOffsetsBottom, $depth) * 1px;
|
|
53
|
+
$blur: list.nth($shadowBlursBottom, $depth) * 5px;
|
|
54
|
+
$color: rgba(black, list.nth($shadowOpacitiesBottom, $depth));
|
|
48
55
|
@return 0 $primary-offset $blur $color;
|
|
49
56
|
}
|
|
50
57
|
|
|
@@ -72,9 +79,9 @@ $breakpoints: (
|
|
|
72
79
|
|
|
73
80
|
@mixin respond-above($breakpoint) {
|
|
74
81
|
// If the breakpoint exists in the map.
|
|
75
|
-
@if map
|
|
82
|
+
@if map.has-key($breakpoints, $breakpoint) {
|
|
76
83
|
// Get the breakpoint value.
|
|
77
|
-
$breakpoint-value: map
|
|
84
|
+
$breakpoint-value: map.get(
|
|
78
85
|
$breakpoints,
|
|
79
86
|
$breakpoint
|
|
80
87
|
); // Write the media query.
|
|
@@ -91,9 +98,9 @@ $breakpoints: (
|
|
|
91
98
|
|
|
92
99
|
@mixin respond-below($breakpoint) {
|
|
93
100
|
// If the breakpoint exists in the map.
|
|
94
|
-
@if map
|
|
101
|
+
@if map.has-key($breakpoints, $breakpoint) {
|
|
95
102
|
// Get the breakpoint value.
|
|
96
|
-
$breakpoint-value: map
|
|
103
|
+
$breakpoint-value: map.get(
|
|
97
104
|
$breakpoints,
|
|
98
105
|
$breakpoint
|
|
99
106
|
); // Write the media query.
|
|
@@ -108,9 +115,9 @@ $breakpoints: (
|
|
|
108
115
|
}
|
|
109
116
|
|
|
110
117
|
@function encodecolor($string) {
|
|
111
|
-
@if type-of($string) == 'color' {
|
|
112
|
-
$hex:
|
|
113
|
-
$string:unquote("#{$hex}");
|
|
118
|
+
@if meta.type-of($string) == 'color' {
|
|
119
|
+
$hex: string.slice(ie-hex-str($string), 4);
|
|
120
|
+
$string: string.unquote("#{$hex}");
|
|
114
121
|
}
|
|
115
122
|
$string: '%23' + $string;
|
|
116
123
|
@return $string;
|
|
@@ -36,3 +36,51 @@ $shadowOpacitiesBottom: 0.04 0.1 0.2 0.22 0.22;
|
|
|
36
36
|
$logoPath: '';
|
|
37
37
|
// $logoPathMobile: "/assets/img/logo-mobile.svg";
|
|
38
38
|
$logoPathMobile: '';
|
|
39
|
+
|
|
40
|
+
$main-menu-item-height: 30px;
|
|
41
|
+
$main-menu-width: 150px;
|
|
42
|
+
$main-menu-width-lg: 150px;
|
|
43
|
+
$main-menu-width-md: 130px;
|
|
44
|
+
$main-menu-width-xs: 130px;
|
|
45
|
+
|
|
46
|
+
$sub-menu-width: 200px;
|
|
47
|
+
$sub-menu-width-lg: 200px;
|
|
48
|
+
$sub-menu-width-md: 200px;
|
|
49
|
+
$sub-menu-width-xs: 200px;
|
|
50
|
+
|
|
51
|
+
$navbar-height: 40px;
|
|
52
|
+
$navbar-height-xs: 40px;
|
|
53
|
+
$navbar-height-md: 40px;
|
|
54
|
+
$navbar-height-lg: 40px;
|
|
55
|
+
|
|
56
|
+
$main-margin: 10px;
|
|
57
|
+
$main-margin-lg: 10px;
|
|
58
|
+
$main-margin-md: 10px;
|
|
59
|
+
$main-margin-xs: 10px;
|
|
60
|
+
|
|
61
|
+
$app-menu-width: 280px;
|
|
62
|
+
|
|
63
|
+
$main-menu-item-height-mobile: 30px;
|
|
64
|
+
|
|
65
|
+
$menu-collapse-time: 300ms;
|
|
66
|
+
$animation-time-long: 1000ms;
|
|
67
|
+
$animation-time-short: 200ms;
|
|
68
|
+
|
|
69
|
+
$border-radius: 0.1rem;
|
|
70
|
+
$border-radius-rounded: 0.75rem;
|
|
71
|
+
|
|
72
|
+
$theme-color-purple-monster: #922c88;
|
|
73
|
+
$theme-color-blue-navy: #00365a;
|
|
74
|
+
$theme-color-blue-yale: #145388;
|
|
75
|
+
$theme-color-blue-olympic: #008ecc;
|
|
76
|
+
$theme-color-green-moss: #576a3d;
|
|
77
|
+
$theme-color-green-lime: #6fb327;
|
|
78
|
+
$theme-color-orange-carrot: #ed7117;
|
|
79
|
+
$theme-color-red-ruby: #900604;
|
|
80
|
+
$theme-color-yellow-granola: #c0a145;
|
|
81
|
+
$theme-color-grey-steel: #48494b;
|
|
82
|
+
|
|
83
|
+
$info-color: #3195a5;
|
|
84
|
+
$success-color: #3e884f;
|
|
85
|
+
$warning-color: #b69329;
|
|
86
|
+
$error-color: #c43d4b;
|