ar-design 0.1.1 → 0.1.2

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 (114) hide show
  1. package/dist/{libs/styles → assest/css}/ar-core.css +19 -1
  2. package/dist/{libs/styles → assest/css}/button/button.css +1 -0
  3. package/dist/assest/css/button/core/position.css +19 -0
  4. package/dist/assest/css/css/ar-core.css +107 -0
  5. package/dist/assest/css/css/button/button.css +7 -0
  6. package/dist/assest/css/css/button/core/border.css +18 -0
  7. package/dist/assest/css/css/button/core/core.css +17 -0
  8. package/dist/assest/css/css/button/core/icon.css +21 -0
  9. package/dist/assest/css/css/button/core/position.css +19 -0
  10. package/dist/assest/css/css/button/core/shape.css +11 -0
  11. package/dist/assest/css/css/button/variant/filled/animation.css +95 -0
  12. package/dist/assest/css/css/button/variant/filled/core.css +84 -0
  13. package/dist/assest/css/css/button/variant/outlined/animation.css +95 -0
  14. package/dist/assest/css/css/button/variant/outlined/border.css +64 -0
  15. package/dist/assest/css/css/button/variant/outlined/core.css +85 -0
  16. package/dist/assest/css/css/grid-system/column/large.css +74 -0
  17. package/dist/assest/css/css/grid-system/column/medium.css +74 -0
  18. package/dist/assest/css/css/grid-system/column/small.css +74 -0
  19. package/dist/assest/css/css/grid-system/column/x-large.css +74 -0
  20. package/dist/assest/css/css/grid-system/column/x-small.css +74 -0
  21. package/dist/assest/css/css/grid-system/grid-system.css +9 -0
  22. package/dist/assest/css/css/grid-system/row/core.css +29 -0
  23. package/dist/{libs/styles → assest/css/css}/syntax-highlighter/core/core.css +24 -2
  24. package/dist/assest/css/css/typography/paragraph/color.css +51 -0
  25. package/dist/assest/css/css/typography/paragraph/core.css +4 -0
  26. package/dist/assest/css/css/typography/title/color.css +0 -0
  27. package/dist/assest/css/css/typography/title/core.css +4 -0
  28. package/dist/assest/css/css/typography/typography.css +10 -0
  29. package/dist/assest/css/divider/core/core.css +4 -0
  30. package/dist/assest/css/divider/divider.css +1 -0
  31. package/dist/assest/css/grid-system/column/large.css +74 -0
  32. package/dist/assest/css/grid-system/column/medium.css +74 -0
  33. package/dist/assest/css/grid-system/column/small.css +74 -0
  34. package/dist/assest/css/grid-system/column/x-large.css +74 -0
  35. package/dist/assest/css/grid-system/column/x-small.css +74 -0
  36. package/dist/assest/css/grid-system/grid-system.css +9 -0
  37. package/dist/assest/css/grid-system/row/core.css +29 -0
  38. package/dist/assest/css/menu/core/core.css +47 -0
  39. package/dist/assest/css/menu/core/open-or-close.css +36 -0
  40. package/dist/assest/css/menu/core/selected.css +18 -0
  41. package/dist/assest/css/menu/menu.css +2 -0
  42. package/dist/assest/css/menu/variant/horizontal.css +3 -0
  43. package/dist/assest/css/menu/variant/vertical.css +3 -0
  44. package/dist/assest/css/syntax-highlighter/core/core.css +55 -0
  45. package/dist/assest/css/syntax-highlighter/core/jsx.template.css +73 -0
  46. package/dist/assest/css/syntax-highlighter/syntax-highlighter.css +2 -0
  47. package/dist/assest/css/typography/paragraph/align.css +9 -0
  48. package/dist/assest/css/typography/paragraph/color.css +51 -0
  49. package/dist/assest/css/typography/paragraph/core.css +4 -0
  50. package/dist/assest/css/typography/title/align.css +9 -0
  51. package/dist/assest/css/typography/title/color.css +0 -0
  52. package/dist/assest/css/typography/title/core.css +4 -0
  53. package/dist/assest/css/typography/title/size.css +31 -0
  54. package/dist/assest/css/typography/typography.css +10 -0
  55. package/dist/assest/fonts/JetBrainsMono-Bold.ttf +0 -0
  56. package/dist/assest/fonts/JetBrainsMono-Regular.ttf +0 -0
  57. package/dist/components/button/Types.d.ts +4 -0
  58. package/dist/components/button/index.d.ts +1 -1
  59. package/dist/components/button/index.js +6 -2
  60. package/dist/components/divider/index.d.ts +1 -1
  61. package/dist/components/divider/index.js +1 -1
  62. package/dist/components/grid-system/column/Column.d.ts +4 -0
  63. package/dist/components/grid-system/column/Column.js +13 -0
  64. package/dist/components/grid-system/column/Types.d.ts +13 -0
  65. package/dist/components/grid-system/index.d.ts +6 -0
  66. package/dist/components/grid-system/index.js +9 -0
  67. package/dist/components/grid-system/row/Row.d.ts +4 -0
  68. package/dist/components/grid-system/row/Row.js +5 -0
  69. package/dist/components/grid-system/row/Types.d.ts +4 -0
  70. package/dist/components/grid-system/row/Types.js +1 -0
  71. package/dist/components/menu/index.d.ts +1 -1
  72. package/dist/components/menu/index.js +1 -1
  73. package/dist/components/syntax-highlighter/index.d.ts +1 -1
  74. package/dist/components/syntax-highlighter/index.js +8 -3
  75. package/dist/components/typography/index.d.ts +3 -7
  76. package/dist/components/typography/index.js +3 -3
  77. package/dist/components/typography/paragraph/Paragraph.d.ts +4 -0
  78. package/dist/components/typography/{Paragraph.js → paragraph/Paragraph.js} +3 -1
  79. package/dist/components/typography/paragraph/Types.d.ts +8 -0
  80. package/dist/components/typography/paragraph/Types.js +1 -0
  81. package/dist/components/typography/title/Title.d.ts +4 -0
  82. package/dist/components/typography/{Title.js → title/Title.js} +1 -1
  83. package/dist/components/typography/{Types.d.ts → title/Types.d.ts} +1 -1
  84. package/dist/components/typography/title/Types.js +1 -0
  85. package/dist/index.d.ts +3 -1
  86. package/dist/index.js +3 -1
  87. package/dist/libs/types/Colors.d.ts +1 -1
  88. package/package.json +3 -3
  89. package/dist/components/typography/Paragraph.d.ts +0 -7
  90. package/dist/components/typography/Title.d.ts +0 -4
  91. package/dist/libs/styles/typography/typography.css +0 -3
  92. /package/dist/{libs/styles → assest/css}/button/core/border.css +0 -0
  93. /package/dist/{libs/styles → assest/css}/button/core/core.css +0 -0
  94. /package/dist/{libs/styles → assest/css}/button/core/icon.css +0 -0
  95. /package/dist/{libs/styles → assest/css}/button/core/shape.css +0 -0
  96. /package/dist/{libs/styles → assest/css}/button/variant/filled/animation.css +0 -0
  97. /package/dist/{libs/styles → assest/css}/button/variant/filled/core.css +0 -0
  98. /package/dist/{libs/styles → assest/css}/button/variant/outlined/animation.css +0 -0
  99. /package/dist/{libs/styles → assest/css}/button/variant/outlined/border.css +0 -0
  100. /package/dist/{libs/styles → assest/css}/button/variant/outlined/core.css +0 -0
  101. /package/dist/{libs/styles → assest/css/css}/divider/core/core.css +0 -0
  102. /package/dist/{libs/styles → assest/css/css}/divider/divider.css +0 -0
  103. /package/dist/{libs/styles → assest/css/css}/menu/core/core.css +0 -0
  104. /package/dist/{libs/styles → assest/css/css}/menu/core/open-or-close.css +0 -0
  105. /package/dist/{libs/styles → assest/css/css}/menu/core/selected.css +0 -0
  106. /package/dist/{libs/styles → assest/css/css}/menu/menu.css +0 -0
  107. /package/dist/{libs/styles → assest/css/css}/menu/variant/horizontal.css +0 -0
  108. /package/dist/{libs/styles → assest/css/css}/menu/variant/vertical.css +0 -0
  109. /package/dist/{libs/styles → assest/css/css}/syntax-highlighter/core/jsx.template.css +0 -0
  110. /package/dist/{libs/styles → assest/css/css}/syntax-highlighter/syntax-highlighter.css +0 -0
  111. /package/dist/{libs/styles → assest/css/css}/typography/paragraph/align.css +0 -0
  112. /package/dist/{libs/styles → assest/css/css}/typography/title/align.css +0 -0
  113. /package/dist/{libs/styles → assest/css/css}/typography/title/size.css +0 -0
  114. /package/dist/components/{typography → grid-system/column}/Types.js +0 -0
@@ -1,3 +1,13 @@
1
+ @font-face {
2
+ font-family: "JetBrainsMono-Bold";
3
+ src: url("../../assest/fonts/JetBrainsMono-Bold.ttf");
4
+ }
5
+
6
+ @font-face {
7
+ font-family: "JetBrainsMono-Regular";
8
+ src: url("../../assest/fonts/JetBrainsMono-Regular.ttf");
9
+ }
10
+
1
11
  /* #region Color Palette */
2
12
  :root {
3
13
  --white: #fff;
@@ -49,7 +59,15 @@
49
59
  --dark-rgb: 52, 58, 64;
50
60
  }
51
61
 
52
- /* Code Editor */
62
+ /* #region Fonts */
63
+ :root {
64
+ --jetBrainsMonoBold: "JetBrainsMono-Bold";
65
+ --jetBrainsMonoRegular: "JetBrainsMono-Regular";
66
+ }
67
+ /* #endregion */
68
+ /* Fonts */
69
+
70
+ /* #region Code Editor */
53
71
  :root {
54
72
  --bg-color: #282c34;
55
73
  --color: #abb2bf;
@@ -2,5 +2,6 @@
2
2
  @import url("./core/shape.css");
3
3
  @import url("./core/icon.css");
4
4
  @import url("./core/border.css");
5
+ @import url("./core/position.css");
5
6
  @import url("./variant/filled/core.css");
6
7
  @import url("./variant/outlined/core.css");
@@ -0,0 +1,19 @@
1
+ .ar-button.fixed {
2
+ position: fixed;
3
+ }
4
+ .ar-button.absolute {
5
+ position: absolute;
6
+ }
7
+
8
+ .ar-button.top {
9
+ top: 0.5rem;
10
+ }
11
+ .ar-button.right {
12
+ right: 0.5rem;
13
+ }
14
+ .ar-button.bottom {
15
+ bottom: 0.5rem;
16
+ }
17
+ .ar-button.left {
18
+ left: 0.5rem;
19
+ }
@@ -0,0 +1,107 @@
1
+ @font-face {
2
+ font-family: "JetBrainsMono-Bold";
3
+ src: url("../../assest/fonts/JetBrainsMono-Bold.ttf");
4
+ }
5
+
6
+ @font-face {
7
+ font-family: "JetBrainsMono-Regular";
8
+ src: url("../../assest/fonts/JetBrainsMono-Regular.ttf");
9
+ }
10
+
11
+ /* #region Color Palette */
12
+ :root {
13
+ --white: #fff;
14
+ --white-rgb: 255, 255, 255;
15
+ --black: #000000;
16
+ --black-rgb: 0, 0, 0;
17
+ --gray-100: #f8f9fa;
18
+ --gray-200: #e9ecef;
19
+ --gray-300: #dee2e6;
20
+ --gray-400: #ced4da;
21
+ --gray-500: #adb5bd;
22
+ --gray-600: #6c757d;
23
+ --gray-700: #495057;
24
+ --gray-800: #343a40;
25
+ --gray-900: #212529;
26
+ --gray-dark: #343a40;
27
+ --red: #f11a7b;
28
+ --red-rgb: 241, 26, 123;
29
+ --green: #00ff00;
30
+ --green-rgb: 0, 255, 0;
31
+ --blue: #0000ff;
32
+ --blue-rgb: 0, 0, 255;
33
+
34
+ /* ... */
35
+ --primary: #007bff;
36
+ --primary-active: #005abb;
37
+ --primary-rgb: 0, 123, 255;
38
+ --secondary: #6c757d;
39
+ --secondary-active: #495055;
40
+ --secondary-rgb: 108, 117, 125;
41
+ --success: #28a745;
42
+ --success-active: #1c7a32;
43
+ --success-rgb: 40, 167, 69;
44
+ --warning: #ffc107;
45
+ --warning-active: #cf9c05;
46
+ --warning-rgb: 255, 193, 7;
47
+ --warning-font-color: #463500;
48
+ --danger: #dc3545;
49
+ --danger-active: #af2936;
50
+ --danger-rgb: 220, 53, 69;
51
+ --information: #17a2b8;
52
+ --information-active: #107c8c;
53
+ --information-rgb: 23, 162, 184;
54
+ --light: #f8f9fa;
55
+ --light-active: #a0a1a3;
56
+ --light-rgb: 248, 249, 250;
57
+ --dark: #343a40;
58
+ --dark-active: #23272b;
59
+ --dark-rgb: 52, 58, 64;
60
+ }
61
+
62
+ /* #region Fonts */
63
+ :root {
64
+ --jetBrainsMonoBold: "JetBrainsMono-Bold";
65
+ --jetBrainsMonoRegular: "JetBrainsMono-Regular";
66
+ }
67
+ /* #endregion */
68
+ /* Fonts */
69
+
70
+ /* #region Code Editor */
71
+ :root {
72
+ --bg-color: #282c34;
73
+ --color: #abb2bf;
74
+ --tag-color: #679ad1;
75
+ --custom-tag-color: #6fc2ae;
76
+ --attribute-key-color: #a9d9f9;
77
+ --string-value-color: #c5947c;
78
+ --number-value-color: #bacdab;
79
+ --boolean-value-color: #57b0fe;
80
+ --object-value-color: #57b0fe;
81
+ --curly-bracket-color: #e4e49c;
82
+ --child-curly-bracket-color: #df6ed2;
83
+ }
84
+ /* #endregion */
85
+ /* Color Palette */
86
+
87
+ /* #region Border */
88
+ :root {
89
+ /* Border */
90
+
91
+ /* Border Radius */
92
+ --border-radius: 0.465rem;
93
+ --border-radius-sm: 0.25rem;
94
+ --border-radius-lg: 0.5rem;
95
+ --border-radius-xl: 1rem;
96
+ --border-radius-xxl: 2rem;
97
+ --border-radius-pill: 50rem;
98
+ }
99
+ /* #endregion */
100
+ /* Border */
101
+
102
+ /* #region Box Shadow */
103
+ :root {
104
+ --box-shadow: 0 0.5rem 1.5rem -0.5rem var(--gray-500);
105
+ }
106
+ /* #endregion */
107
+ /* Box Shadow */
@@ -0,0 +1,7 @@
1
+ @import url("./core/core.css");
2
+ @import url("./core/shape.css");
3
+ @import url("./core/icon.css");
4
+ @import url("./core/border.css");
5
+ @import url("./core/position.css");
6
+ @import url("./variant/filled/core.css");
7
+ @import url("./variant/outlined/core.css");
@@ -0,0 +1,18 @@
1
+ .ar-button.border-radius-sm {
2
+ border-radius: var(--border-radius-sm);
3
+ }
4
+ .ar-button.border-radius-lg {
5
+ border-radius: var(--border-radius-lg);
6
+ }
7
+ .ar-button.border-radius-xl {
8
+ border-radius: var(--border-radius-xl);
9
+ }
10
+ .ar-button.border-radius-xxl {
11
+ border-radius: var(--border-radius-xxl);
12
+ }
13
+ .ar-button.border-radius-pill {
14
+ border-radius: var(--border-radius-pill);
15
+ }
16
+ .ar-button.border-radius-none {
17
+ border-radius: 0;
18
+ }
@@ -0,0 +1,17 @@
1
+ .ar-button {
2
+ position: relative;
3
+ height: 2.5rem;
4
+ padding: 0 1rem;
5
+ border: none;
6
+ border-radius: var(--border-radius-sm);
7
+ cursor: pointer;
8
+ transition: background-color 150ms, border 150ms, color 150ms ease-in-out;
9
+ overflow: hidden;
10
+ }
11
+ .ar-button.disabled {
12
+ cursor: no-drop;
13
+ }
14
+
15
+ .ar-button.max-width {
16
+ width: 100%;
17
+ }
@@ -0,0 +1,21 @@
1
+ .ar-button > .icon {
2
+ display: -webkit-box;
3
+ display: -ms-flexbox;
4
+ display: flex;
5
+ -webkit-box-align: start;
6
+ -ms-flex-align: start;
7
+ align-items: flex-start;
8
+ gap: 0 0.5rem;
9
+ }
10
+ .ar-button > .icon-row {
11
+ flex-direction: row;
12
+ }
13
+ .ar-button > .icon-row-end {
14
+ flex-direction: row-reverse;
15
+ }
16
+ .ar-button > .icon-column {
17
+ flex-direction: column;
18
+ }
19
+ .ar-button > .icon-column-end {
20
+ flex-direction: column-reverse;
21
+ }
@@ -0,0 +1,19 @@
1
+ .ar-button.fixed {
2
+ position: fixed;
3
+ }
4
+ .ar-button.absolute {
5
+ position: absolute;
6
+ }
7
+
8
+ .ar-button.top {
9
+ top: 0.5rem;
10
+ }
11
+ .ar-button.right {
12
+ right: 0.5rem;
13
+ }
14
+ .ar-button.bottom {
15
+ bottom: 0.5rem;
16
+ }
17
+ .ar-button.left {
18
+ left: 0.5rem;
19
+ }
@@ -0,0 +1,11 @@
1
+ .ar-button.ar-button-shape {
2
+ align-items: center;
3
+ width: 2rem;
4
+ height: 2rem;
5
+ padding: 0 !important;
6
+ }
7
+ .ar-button.ar-button-shape.circle {
8
+ border-radius: var(--border-radius-pill);
9
+ }
10
+ .ar-button.ar-button-shape.square {
11
+ }
@@ -0,0 +1,95 @@
1
+ @keyframes filled-primary-active-animation {
2
+ 0% {
3
+ box-shadow: 0 0 0 0px rgba(var(--primary-rgb), 0);
4
+ }
5
+ 25% {
6
+ box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.25);
7
+ }
8
+ 100% {
9
+ box-shadow: 0 0 0 7.5px rgba(var(--primary-rgb), 0);
10
+ }
11
+ }
12
+
13
+ @keyframes filled-secondary-active-animation {
14
+ 0% {
15
+ box-shadow: 0 0 0 0px rgba(var(--secondary-rgb), 0);
16
+ }
17
+ 25% {
18
+ box-shadow: 0 0 0 5px rgba(var(--secondary-rgb), 0.25);
19
+ }
20
+ 100% {
21
+ box-shadow: 0 0 0 7.5px rgba(var(--secondary-rgb), 0);
22
+ }
23
+ }
24
+
25
+ @keyframes filled-success-active-animation {
26
+ 0% {
27
+ box-shadow: 0 0 0 0px rgba(var(--success-rgb), 0);
28
+ }
29
+ 25% {
30
+ box-shadow: 0 0 0 5px rgba(var(--success-rgb), 0.25);
31
+ }
32
+ 100% {
33
+ box-shadow: 0 0 0 7.5px rgba(var(--success-rgb), 0);
34
+ }
35
+ }
36
+
37
+ @keyframes filled-warning-active-animation {
38
+ 0% {
39
+ box-shadow: 0 0 0 0px rgba(var(--warning-rgb), 0);
40
+ }
41
+ 25% {
42
+ box-shadow: 0 0 0 5px rgba(var(--warning-rgb), 0.25);
43
+ }
44
+ 100% {
45
+ box-shadow: 0 0 0 7.5px rgba(var(--warning-rgb), 0);
46
+ }
47
+ }
48
+
49
+ @keyframes filled-danger-active-animation {
50
+ 0% {
51
+ box-shadow: 0 0 0 0px rgba(var(--danger-rgb), 0);
52
+ }
53
+ 25% {
54
+ box-shadow: 0 0 0 5px rgba(var(--danger-rgb), 0.25);
55
+ }
56
+ 100% {
57
+ box-shadow: 0 0 0 7.5px rgba(var(--danger-rgb), 0);
58
+ }
59
+ }
60
+
61
+ @keyframes filled-information-active-animation {
62
+ 0% {
63
+ box-shadow: 0 0 0 0px rgba(var(--information-rgb), 0);
64
+ }
65
+ 25% {
66
+ box-shadow: 0 0 0 5px rgba(var(--information-rgb), 0.25);
67
+ }
68
+ 100% {
69
+ box-shadow: 0 0 0 7.5px rgba(var(--information-rgb), 0);
70
+ }
71
+ }
72
+
73
+ @keyframes filled-light-active-animation {
74
+ 0% {
75
+ box-shadow: 0 0 0 0px rgba(var(--dark-rgb), 0);
76
+ }
77
+ 25% {
78
+ box-shadow: 0 0 0 5px rgba(var(--dark-rgb), 0.25);
79
+ }
80
+ 100% {
81
+ box-shadow: 0 0 0 7.5px rgba(var(--dark-rgb), 0);
82
+ }
83
+ }
84
+
85
+ @keyframes filled-dark-active-animation {
86
+ 0% {
87
+ box-shadow: 0 0 0 0px rgba(var(--dark-rgb), 0);
88
+ }
89
+ 25% {
90
+ box-shadow: 0 0 0 5px rgba(var(--dark-rgb), 0.25);
91
+ }
92
+ 100% {
93
+ box-shadow: 0 0 0 7.5px rgba(var(--dark-rgb), 0);
94
+ }
95
+ }
@@ -0,0 +1,84 @@
1
+ @import url("./animation.css");
2
+
3
+ .ar-button.filled {
4
+ border-color: transparent;
5
+ color: var(--white);
6
+ }
7
+
8
+ .ar-button.filled.disabled {
9
+ background-color: var(--gray-100);
10
+ color: var(--gray-500);
11
+ border: solid 1px var(--gray-500);
12
+ }
13
+ .ar-button.filled:not(.disabled):active::before {
14
+ position: absolute;
15
+ inset: 0;
16
+ content: "";
17
+ background-color: rgba(var(--black-rgb), 0.25);
18
+ }
19
+
20
+ .ar-button.filled:not(.disabled).primary {
21
+ background-color: var(--primary);
22
+ }
23
+ .ar-button.filled:not(.disabled).primary.active {
24
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
25
+ animation: filled-primary-active-animation ease-in-out 750ms 0s 1 normal both;
26
+ }
27
+
28
+ .ar-button.filled:not(.disabled).secondary {
29
+ background-color: var(--secondary);
30
+ }
31
+ .ar-button.filled:not(.disabled).secondary.active {
32
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
33
+ animation: filled-secondary-active-animation ease-in-out 750ms 0s 1 normal both;
34
+ }
35
+
36
+ .ar-button.filled:not(.disabled).success {
37
+ background-color: var(--success);
38
+ }
39
+ .ar-button.filled:not(.disabled).success.active {
40
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
41
+ animation: filled-success-active-animation ease-in-out 750ms 0s 1 normal both;
42
+ }
43
+
44
+ .ar-button.filled:not(.disabled).warning {
45
+ background-color: var(--warning);
46
+ color: var(--warning-font-color);
47
+ }
48
+ .ar-button.filled:not(.disabled).warning.active {
49
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
50
+ animation: filled-warning-active-animation ease-in-out 750ms 0s 1 normal both;
51
+ }
52
+
53
+ .ar-button.filled:not(.disabled).danger {
54
+ background-color: var(--danger);
55
+ }
56
+ .ar-button.filled:not(.disabled).danger.active {
57
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
58
+ animation: filled-danger-active-animation ease-in-out 750ms 0s 1 normal both;
59
+ }
60
+
61
+ .ar-button.filled:not(.disabled).information {
62
+ background-color: var(--information);
63
+ }
64
+ .ar-button.filled:not(.disabled).information.active {
65
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
66
+ animation: filled-information-active-animation ease-in-out 750ms 0s 1 normal both;
67
+ }
68
+
69
+ .ar-button.filled:not(.disabled).light {
70
+ background-color: var(--light);
71
+ color: var(--gray-800);
72
+ }
73
+ .ar-button.filled:not(.disabled).light.active {
74
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
75
+ animation: filled-light-active-animation ease-in-out 750ms 0s 1 normal both;
76
+ }
77
+
78
+ .ar-button.filled:not(.disabled).dark {
79
+ background-color: var(--dark);
80
+ }
81
+ .ar-button.filled:not(.disabled).dark.active {
82
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
83
+ animation: filled-dark-active-animation ease-in-out 750ms 0s 1 normal both;
84
+ }
@@ -0,0 +1,95 @@
1
+ @keyframes outlined-primary-active-animation {
2
+ 0% {
3
+ box-shadow: 0 0 0 0px rgba(var(--primary-rgb), 0);
4
+ }
5
+ 25% {
6
+ box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.25);
7
+ }
8
+ 100% {
9
+ box-shadow: 0 0 0 7.5px rgba(var(--primary-rgb), 0);
10
+ }
11
+ }
12
+
13
+ @keyframes outlined-secondary-active-animation {
14
+ 0% {
15
+ box-shadow: 0 0 0 0px rgba(var(--secondary-rgb), 0);
16
+ }
17
+ 25% {
18
+ box-shadow: 0 0 0 5px rgba(var(--secondary-rgb), 0.25);
19
+ }
20
+ 100% {
21
+ box-shadow: 0 0 0 7.5px rgba(var(--secondary-rgb), 0);
22
+ }
23
+ }
24
+
25
+ @keyframes outlined-success-active-animation {
26
+ 0% {
27
+ box-shadow: 0 0 0 0px rgba(var(--success-rgb), 0);
28
+ }
29
+ 25% {
30
+ box-shadow: 0 0 0 5px rgba(var(--success-rgb), 0.25);
31
+ }
32
+ 100% {
33
+ box-shadow: 0 0 0 7.5px rgba(var(--success-rgb), 0);
34
+ }
35
+ }
36
+
37
+ @keyframes outlined-warning-active-animation {
38
+ 0% {
39
+ box-shadow: 0 0 0 0px rgba(var(--warning-rgb), 0);
40
+ }
41
+ 25% {
42
+ box-shadow: 0 0 0 5px rgba(var(--warning-rgb), 0.25);
43
+ }
44
+ 100% {
45
+ box-shadow: 0 0 0 7.5px rgba(var(--warning-rgb), 0);
46
+ }
47
+ }
48
+
49
+ @keyframes outlined-danger-active-animation {
50
+ 0% {
51
+ box-shadow: 0 0 0 0px rgba(var(--danger-rgb), 0);
52
+ }
53
+ 25% {
54
+ box-shadow: 0 0 0 5px rgba(var(--danger-rgb), 0.25);
55
+ }
56
+ 100% {
57
+ box-shadow: 0 0 0 7.5px rgba(var(--danger-rgb), 0);
58
+ }
59
+ }
60
+
61
+ @keyframes outlined-information-active-animation {
62
+ 0% {
63
+ box-shadow: 0 0 0 0px rgba(var(--information-rgb), 0);
64
+ }
65
+ 25% {
66
+ box-shadow: 0 0 0 5px rgba(var(--information-rgb), 0.25);
67
+ }
68
+ 100% {
69
+ box-shadow: 0 0 0 7.5px rgba(var(--information-rgb), 0);
70
+ }
71
+ }
72
+
73
+ @keyframes outlined-light-active-animation {
74
+ 0% {
75
+ box-shadow: 0 0 0 0px rgba(var(--dark-rgb), 0);
76
+ }
77
+ 25% {
78
+ box-shadow: 0 0 0 5px rgba(var(--dark-rgb), 0.25);
79
+ }
80
+ 100% {
81
+ box-shadow: 0 0 0 7.5px rgba(var(--dark-rgb), 0);
82
+ }
83
+ }
84
+
85
+ @keyframes outlined-dark-active-animation {
86
+ 0% {
87
+ box-shadow: 0 0 0 0px rgba(var(--dark-rgb), 0);
88
+ }
89
+ 25% {
90
+ box-shadow: 0 0 0 5px rgba(var(--dark-rgb), 0.25);
91
+ }
92
+ 100% {
93
+ box-shadow: 0 0 0 7.5px rgba(var(--dark-rgb), 0);
94
+ }
95
+ }
@@ -0,0 +1,64 @@
1
+ .ar-button.outlined.border-style-solid {
2
+ border-style: solid;
3
+ }
4
+ .ar-button.outlined.border-style-dashed {
5
+ border-style: dashed;
6
+ }
7
+ .ar-button.outlined.border-style-none {
8
+ border-style: none;
9
+ }
10
+
11
+ .ar-button.outlined.border-style-none:not(.disabled)::before {
12
+ position: absolute;
13
+ inset: 0;
14
+ content: "";
15
+ }
16
+
17
+ .ar-button.outlined.primary.border-style-none:not(.disabled):hover::before {
18
+ background-color: rgba(var(--primary-rgb), 0.1);
19
+ }
20
+ .ar-button.outlined.primary.border-style-none:not(.disabled):active::before {
21
+ background-color: rgba(var(--primary-rgb), 0.2);
22
+ }
23
+
24
+ .ar-button.outlined.secondary.border-style-none:not(.disabled):hover::before {
25
+ background-color: rgba(var(--secondary-rgb), 0.1);
26
+ }
27
+ .ar-button.outlined.secondary.border-style-none:not(.disabled):active::before {
28
+ background-color: rgba(var(--secondary-rgb), 0.2);
29
+ }
30
+
31
+ .ar-button.outlined.success.border-style-none:not(.disabled):hover::before {
32
+ background-color: rgba(var(--success-rgb), 0.1);
33
+ }
34
+ .ar-button.outlined.success.border-style-none:not(.disabled):active::before {
35
+ background-color: rgba(var(--success-rgb), 0.2);
36
+ }
37
+
38
+ .ar-button.outlined.warning.border-style-none:not(.disabled):hover::before {
39
+ background-color: rgba(var(--warning-rgb), 0.1);
40
+ }
41
+ .ar-button.outlined.warning.border-style-none:not(.disabled):active::before {
42
+ background-color: rgba(var(--warning-rgb), 0.2);
43
+ }
44
+
45
+ .ar-button.outlined.danger.border-style-none:not(.disabled):hover::before {
46
+ background-color: rgba(var(--danger-rgb), 0.1);
47
+ }
48
+ .ar-button.outlined.danger.border-style-none:not(.disabled):active::before {
49
+ background-color: rgba(var(--danger-rgb), 0.2);
50
+ }
51
+
52
+ .ar-button.outlined.information.border-style-none:not(.disabled):hover::before {
53
+ background-color: rgba(var(--information-rgb), 0.1);
54
+ }
55
+ .ar-button.outlined.information.border-style-none:not(.disabled):active::before {
56
+ background-color: rgba(var(--information-rgb), 0.2);
57
+ }
58
+
59
+ .ar-button.outlined.dark.border-style-none:not(.disabled):hover::before {
60
+ background-color: rgba(var(--dark-rgb), 0.1);
61
+ }
62
+ .ar-button.outlined.dark.border-style-none:not(.disabled):active::before {
63
+ background-color: rgba(var(--dark-rgb), 0.2);
64
+ }
@@ -0,0 +1,85 @@
1
+ @import url("./animation.css");
2
+ @import url("./border.css");
3
+
4
+ .ar-button.outlined {
5
+ background-color: transparent;
6
+ border-width: 1px;
7
+ border-color: transparent;
8
+ }
9
+
10
+ .ar-button.outlined.disabled {
11
+ border-color: var(--gray-500);
12
+ color: var(--gray-500);
13
+ }
14
+
15
+ .ar-button.outlined:not(.disabled).primary {
16
+ border-color: var(--primary);
17
+ color: var(--primary);
18
+ }
19
+ .ar-button.outlined:not(.disabled).primary.active {
20
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
21
+ animation: outlined-primary-active-animation ease-in-out 750ms 0s 1 normal both;
22
+ }
23
+
24
+ .ar-button.outlined:not(.disabled).secondary {
25
+ border-color: var(--secondary);
26
+ color: var(--secondary);
27
+ }
28
+ .ar-button.outlined:not(.disabled).secondary.active {
29
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
30
+ animation: outlined-secondary-active-animation ease-in-out 750ms 0s 1 normal both;
31
+ }
32
+
33
+ .ar-button.outlined:not(.disabled).success {
34
+ border-color: var(--success);
35
+ color: var(--success);
36
+ }
37
+ .ar-button.outlined:not(.disabled).success.active {
38
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
39
+ animation: outlined-success-active-animation ease-in-out 750ms 0s 1 normal both;
40
+ }
41
+
42
+ .ar-button.outlined:not(.disabled).warning {
43
+ border-color: var(--warning);
44
+ color: var(--warning);
45
+ }
46
+ .ar-button.outlined:not(.disabled).warning.active {
47
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
48
+ animation: outlined-warning-active-animation ease-in-out 750ms 0s 1 normal both;
49
+ }
50
+
51
+ .ar-button.outlined:not(.disabled).danger {
52
+ border-color: var(--danger);
53
+ color: var(--danger);
54
+ }
55
+ .ar-button.outlined:not(.disabled).danger.active {
56
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
57
+ animation: outlined-danger-active-animation ease-in-out 750ms 0s 1 normal both;
58
+ }
59
+
60
+ .ar-button.outlined:not(.disabled).information {
61
+ border-color: var(--information);
62
+ color: var(--information);
63
+ }
64
+ .ar-button.outlined:not(.disabled).information.active {
65
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
66
+ animation: outlined-information-active-animation ease-in-out 750ms 0s 1 normal both;
67
+ }
68
+
69
+ .ar-button.outlined:not(.disabled).light {
70
+ border-color: var(--light);
71
+ color: var(--gray-500);
72
+ }
73
+ .ar-button.outlined:not(.disabled).light.active {
74
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
75
+ animation: outlined-light-active-animation ease-in-out 750ms 0s 1 normal both;
76
+ }
77
+
78
+ .ar-button.outlined:not(.disabled).dark {
79
+ border-color: var(--dark);
80
+ color: var(--dark);
81
+ }
82
+ .ar-button.outlined:not(.disabled).dark.active {
83
+ /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
84
+ animation: outlined-dark-active-animation ease-in-out 750ms 0s 1 normal both;
85
+ }