ply-css 1.3.0

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 (75) hide show
  1. package/CLAUDE.md +176 -0
  2. package/LICENSE +22 -0
  3. package/PLY.md +646 -0
  4. package/README.md +170 -0
  5. package/dist/css/ply-core.css +6175 -0
  6. package/dist/css/ply-core.min.css +1 -0
  7. package/dist/css/ply-essentials.min.css +1 -0
  8. package/dist/css/ply-helpers.min.css +1 -0
  9. package/dist/css/ply.css +7429 -0
  10. package/dist/css/ply.min.css +1 -0
  11. package/dist/css/styles.css +7432 -0
  12. package/dist/css/styles.min.css +1 -0
  13. package/llms-full.txt +834 -0
  14. package/llms.txt +34 -0
  15. package/package.json +70 -0
  16. package/ply-classes.json +2625 -0
  17. package/snippets/accessible-drag-and-drop.html +122 -0
  18. package/snippets/card.html +58 -0
  19. package/snippets/contact-form.html +49 -0
  20. package/snippets/custom-theme.html +280 -0
  21. package/snippets/dashboard.html +77 -0
  22. package/snippets/data-table.html +64 -0
  23. package/snippets/login-page.html +45 -0
  24. package/snippets/navbar-page.html +39 -0
  25. package/snippets/notifications.html +63 -0
  26. package/snippets/pricing-cards.html +95 -0
  27. package/snippets/responsive-header.html +98 -0
  28. package/snippets/starter-page.html +782 -0
  29. package/snippets/two-column-layout.html +40 -0
  30. package/src/scss/_ply-core-components.scss +32 -0
  31. package/src/scss/_ply.scss +47 -0
  32. package/src/scss/components/_accordion.scss +73 -0
  33. package/src/scss/components/_alignments.scss +64 -0
  34. package/src/scss/components/_autocomplete.scss +28 -0
  35. package/src/scss/components/_blocks-responsive.scss +30 -0
  36. package/src/scss/components/_blocks.scss +39 -0
  37. package/src/scss/components/_buttons.scss +452 -0
  38. package/src/scss/components/_colors.scss +447 -0
  39. package/src/scss/components/_container-queries.scss +35 -0
  40. package/src/scss/components/_cursors.scss +24 -0
  41. package/src/scss/components/_dialog-patterns.scss +176 -0
  42. package/src/scss/components/_dropdown.scss +68 -0
  43. package/src/scss/components/_filterbox.scss +57 -0
  44. package/src/scss/components/_flexible-embed.scss +19 -0
  45. package/src/scss/components/_forms.scss +450 -0
  46. package/src/scss/components/_grid.scss +210 -0
  47. package/src/scss/components/_helpers-core.scss +357 -0
  48. package/src/scss/components/_helpers.scss +466 -0
  49. package/src/scss/components/_labels.scss +105 -0
  50. package/src/scss/components/_livesearch.scss +233 -0
  51. package/src/scss/components/_loader.scss +24 -0
  52. package/src/scss/components/_media-queries.scss +9 -0
  53. package/src/scss/components/_mixins.scss +387 -0
  54. package/src/scss/components/_modal.scss +73 -0
  55. package/src/scss/components/_multi-step-form.scss +190 -0
  56. package/src/scss/components/_navigation-responsive.scss +63 -0
  57. package/src/scss/components/_navigation.scss +592 -0
  58. package/src/scss/components/_notifications.scss +185 -0
  59. package/src/scss/components/_prettyprint.scss +86 -0
  60. package/src/scss/components/_print.scss +74 -0
  61. package/src/scss/components/_progress.scss +32 -0
  62. package/src/scss/components/_reset.scss +365 -0
  63. package/src/scss/components/_rtl.scss +213 -0
  64. package/src/scss/components/_table-interactive.scss +110 -0
  65. package/src/scss/components/_tables.scss +52 -0
  66. package/src/scss/components/_themes.scss +6 -0
  67. package/src/scss/components/_tooltip.scss +35 -0
  68. package/src/scss/components/_typography.scss +565 -0
  69. package/src/scss/components/_upload.scss +19 -0
  70. package/src/scss/components/_variables.scss +129 -0
  71. package/src/scss/ply-core.scss +1 -0
  72. package/src/scss/ply-essentials.scss +15 -0
  73. package/src/scss/ply-helpers.scss +11 -0
  74. package/src/scss/ply-iso.scss +1 -0
  75. package/src/scss/styles.scss +9 -0
package/src/scss/components/_rtl.scss ADDED
@@ -0,0 +1,213 @@
1
+ @use "variables";
2
+
3
+ /* =RTL Support — Layout mirroring for right-to-left languages
4
+ -----------------------------------------------------------------------------*/
5
+
6
+ /* RTL base — apply dir="rtl" on <html> or any container */
7
+ [dir="rtl"] {
8
+ direction: rtl;
9
+ text-align: right;
10
+
11
+ // Grid gutter mirroring (units use padding-left/right)
12
+ [class*="unit-"] {
13
+ float: right;
14
+ }
15
+
16
+ // Text alignment overrides
17
+ .text-left {
18
+ text-align: right;
19
+ }
20
+
21
+ .text-right {
22
+ text-align: left;
23
+ }
24
+
25
+ // Margin directional utilities
26
+ .margin-left,
27
+ .margin-left-extra {
28
+ margin-left: 0;
29
+ margin-right: variables.$margin;
30
+ }
31
+
32
+ .margin-left-extra {
33
+ margin-right: variables.$margin * 2;
34
+ }
35
+
36
+ .margin-right,
37
+ .margin-right-extra {
38
+ margin-right: 0;
39
+ margin-left: variables.$margin;
40
+ }
41
+
42
+ .margin-right-extra {
43
+ margin-left: variables.$margin * 2;
44
+ }
45
+
46
+ .margin-left-auto {
47
+ margin-left: unset;
48
+ margin-right: auto;
49
+ }
50
+
51
+ .margin-right-auto {
52
+ margin-right: unset;
53
+ margin-left: auto;
54
+ }
55
+
56
+ // Padding directional utilities
57
+ .padding-left {
58
+ padding-left: 0;
59
+ padding-right: variables.$padding;
60
+ }
61
+
62
+ .padding-right {
63
+ padding-right: 0;
64
+ padding-left: variables.$padding;
65
+ }
66
+
67
+ // Navigation
68
+ .navbar ul {
69
+ padding-right: 0;
70
+ }
71
+
72
+ .nav-stacked ul {
73
+ padding-right: 0;
74
+ }
75
+
76
+ // Dropdown positioning
77
+ .dropdown-menu {
78
+ left: auto;
79
+ right: 0;
80
+ }
81
+
82
+ .dropdown-menu-right {
83
+ right: auto;
84
+ left: 0;
85
+ }
86
+
87
+ // Forms — search icon positioning, select arrow
88
+ .form select {
89
+ background-position: left 0.75em center;
90
+ padding-left: variables.$padding * 3.33;
91
+ padding-right: variables.$padding;
92
+ }
93
+
94
+ select.select-outlined {
95
+ background-position: left 0.75em center;
96
+ padding-left: variables.$padding * 3.33;
97
+ padding-right: variables.$padding;
98
+ }
99
+
100
+ // Input groups
101
+ .input-groups {
102
+ input:not(:last-child),
103
+ textarea:not(:last-child),
104
+ select:not(:last-child) {
105
+ border-right: initial;
106
+ border-left: none;
107
+ border-radius: 0 variables.$border-radius variables.$border-radius 0;
108
+ }
109
+
110
+ input:not(:first-child),
111
+ textarea:not(:first-child),
112
+ select:not(:first-child) {
113
+ border-radius: variables.$border-radius 0 0 variables.$border-radius;
114
+ }
115
+
116
+ .input-prepend {
117
+ border-right: initial;
118
+ border-left: none;
119
+ border-radius: 0 variables.$border-radius variables.$border-radius 0;
120
+ }
121
+
122
+ .input-append {
123
+ border-left: initial;
124
+ border-right: none;
125
+ border-radius: variables.$border-radius 0 0 variables.$border-radius;
126
+ }
127
+ }
128
+
129
+ // Table sort indicators
130
+ th.sortable {
131
+ padding-right: inherit;
132
+ padding-left: variables.$base-line;
133
+
134
+ &::after,
135
+ &::before {
136
+ right: auto;
137
+ left: variables.$grid-gutter-width;
138
+ }
139
+ }
140
+
141
+ // Steps connector mirroring
142
+ .steps .step:not(:last-child)::after {
143
+ right: calc(50% + 1.25rem);
144
+ left: calc(-50% + 1.25rem);
145
+ }
146
+
147
+ // Modal close button
148
+ .modal-close {
149
+ right: auto;
150
+ left: variables.$padding;
151
+ }
152
+
153
+ .dialog-close {
154
+ // Already uses flexbox, just ensure placement
155
+ }
156
+
157
+ // Skip link
158
+ .skip-link {
159
+ left: auto;
160
+ right: 0;
161
+ }
162
+
163
+ // Reverse direction for flex utilities
164
+ .reverse-direction {
165
+ flex-direction: row;
166
+ }
167
+
168
+ // Breadcrumb separators and list markers
169
+ ol,
170
+ ul {
171
+ padding-inline-start: 2rem;
172
+ }
173
+
174
+ // Float mirroring
175
+ .float-left {
176
+ float: right;
177
+ }
178
+
179
+ .float-right {
180
+ float: left;
181
+ }
182
+ }
183
+
184
+ /* Bidirectional utility — opt out of mirroring for specific elements */
185
+ [dir="rtl"] .no-rtl {
186
+ direction: ltr;
187
+ text-align: left;
188
+ }
189
+
190
+ /* Logical property helpers — work in both LTR and RTL automatically */
191
+ .margin-inline-start {
192
+ margin-inline-start: variables.$margin;
193
+ }
194
+
195
+ .margin-inline-end {
196
+ margin-inline-end: variables.$margin;
197
+ }
198
+
199
+ .padding-inline-start {
200
+ padding-inline-start: variables.$padding;
201
+ }
202
+
203
+ .padding-inline-end {
204
+ padding-inline-end: variables.$padding;
205
+ }
206
+
207
+ .border-inline-start {
208
+ border-inline-start: 1px solid var(--ply-border-color);
209
+ }
210
+
211
+ .border-inline-end {
212
+ border-inline-end: 1px solid var(--ply-border-color);
213
+ }
package/src/scss/components/_table-interactive.scss ADDED
@@ -0,0 +1,110 @@
1
+ @use "colors";
2
+ @use "variables";
3
+
4
+ /* =Table Interactive — Sort indicators, pagination, filter wrappers
5
+ -----------------------------------------------------------------------------*/
6
+
7
+ /* Sort Indicators */
8
+ th.sortable {
9
+ cursor: pointer;
10
+ user-select: none;
11
+ position: relative;
12
+ padding-right: variables.$base-line;
13
+ transition: background-color 0.15s ease;
14
+
15
+ &:hover {
16
+ background-color: var(--ply-bg-surface-alt, colors.$color-table-hovered);
17
+ }
18
+
19
+ &:focus-visible {
20
+ outline: 2px solid var(--ply-color-focus, colors.$color-blue);
21
+ outline-offset: -2px;
22
+ }
23
+
24
+ // Default unsorted indicator
25
+ &::after {
26
+ content: "";
27
+ position: absolute;
28
+ right: variables.$grid-gutter-width;
29
+ top: 50%;
30
+ transform: translateY(-50%);
31
+ border-left: 4px solid transparent;
32
+ border-right: 4px solid transparent;
33
+ border-bottom: 4px solid var(--ply-color-muted);
34
+ margin-top: -4px;
35
+ }
36
+
37
+ &::before {
38
+ content: "";
39
+ position: absolute;
40
+ right: variables.$grid-gutter-width;
41
+ top: 50%;
42
+ transform: translateY(-50%);
43
+ border-left: 4px solid transparent;
44
+ border-right: 4px solid transparent;
45
+ border-top: 4px solid var(--ply-color-muted);
46
+ margin-top: 4px;
47
+ }
48
+
49
+ // Ascending
50
+ &.sort-asc::after {
51
+ border-bottom-color: var(--ply-color-body);
52
+ }
53
+
54
+ &.sort-asc::before {
55
+ border-top-color: var(--ply-color-muted);
56
+ }
57
+
58
+ // Descending
59
+ &.sort-desc::before {
60
+ border-top-color: var(--ply-color-body);
61
+ }
62
+
63
+ &.sort-desc::after {
64
+ border-bottom-color: var(--ply-color-muted);
65
+ }
66
+ }
67
+
68
+ /* Table Filter — input-group style connected filter bar */
69
+ .table-filter.input-groups {
70
+ select {
71
+ flex: 0 0 auto;
72
+ width: auto;
73
+ }
74
+ }
75
+
76
+ /* Table Actions — right-aligned icon button bar */
77
+ .table-actions {
78
+ display: flex;
79
+ align-items: center;
80
+ justify-content: flex-end;
81
+ gap: variables.$grid-gutter-width * 0.5;
82
+ margin-bottom: variables.$base-line;
83
+ }
84
+
85
+ /* Pagination sizes */
86
+ .pagination.pagination-sm {
87
+ a,
88
+ span {
89
+ min-width: variables.$base-line * 1.17;
90
+ height: variables.$base-line * 1.17;
91
+ padding: variables.$grid-gutter-width * 0.25 variables.$grid-gutter-width * 0.75;
92
+ font-size: variables.$font-size-xs;
93
+ }
94
+ }
95
+
96
+ .pagination.pagination-lg {
97
+ a,
98
+ span {
99
+ min-width: variables.$base-line * 1.83;
100
+ height: variables.$base-line * 1.83;
101
+ padding: variables.$grid-gutter-width * 0.75 variables.$padding * 1.17;
102
+ font-size: variables.$font-size-base;
103
+ }
104
+ }
105
+
106
+ /* Pagination info text — sits beside .pagination */
107
+ .pagination-info {
108
+ font-size: variables.$font-size-sm;
109
+ color: var(--ply-color-secondary);
110
+ }
package/src/scss/components/_tables.scss ADDED
@@ -0,0 +1,52 @@
1
+ @use "colors";
2
+ @use "variables";
3
+
4
+ // =Tables
5
+ // -----------------------------------------------------------------------------*/
6
+ table.table-bordered td,
7
+ table.table-bordered th {
8
+ border: 1px solid var(--ply-color-table-border, colors.$color-table-border);
9
+ }
10
+ table.table-simple td,
11
+ table.table-simple th,
12
+ table.table-simple caption {
13
+ border: none;
14
+ padding-left: 0;
15
+ }
16
+ table.table-flat td,
17
+ table.table-flat th,
18
+ table.table-flat caption {
19
+ border: none;
20
+ padding: 0;
21
+ }
22
+ table.table-stroked td,
23
+ table.table-stroked th {
24
+ border-bottom: 1px solid var(--ply-color-table-border, colors.$color-table-border);
25
+ }
26
+ table.table-stripped tbody tr:nth-child(odd) td {
27
+ background: var(--ply-color-table-stripped, colors.$color-table-stripped);
28
+ }
29
+ table.table-hovered tbody tr:hover td {
30
+ background-color: var(--ply-color-table-hovered, colors.$color-table-hovered);
31
+ }
32
+
33
+ /* Responsive Tables */
34
+ .table-container {
35
+ width: 100%;
36
+ overflow: auto;
37
+ margin-bottom: variables.$base-line;
38
+ & table {
39
+ margin-bottom: 0;
40
+ }
41
+ &::-webkit-scrollbar {
42
+ appearance: none;
43
+ width: 14px;
44
+ height: 14px;
45
+ }
46
+ &::-webkit-scrollbar-thumb {
47
+ border-radius: 8px;
48
+ border: 3px solid var(--ply-bg-body);
49
+ background-color: var(--ply-color-muted);
50
+ }
51
+ }
52
+
package/src/scss/components/_themes.scss ADDED
@@ -0,0 +1,6 @@
1
+ // * -- ply theming system
2
+ // ply uses CSS custom properties (--ply-*) for all colors, borders, shadows,
3
+ // and layers. To create a custom theme, override these properties on a
4
+ // [data-theme="your-name"] selector, then set that attribute on <html>.
5
+ // See /snippets/custom-theme.html for a complete example.
6
+ // The full list of tokens is defined in _colors.scss under :root.
package/src/scss/components/_tooltip.scss ADDED
@@ -0,0 +1,35 @@
1
+ /* =Tooltip
2
+ -----------------------------------------------------------------------------*/
3
+ .tooltip {
4
+ position: absolute;
5
+ z-index: 10000;
6
+ display: inline-block;
7
+ color: #fff;
8
+ padding: 2px 10px;
9
+ font-size: $font-size-small;
10
+ line-height: 1.5em;
11
+ max-width: 250px;
12
+ background: $color-black;
13
+ }
14
+ .tooltip-theme-red {
15
+ background: $color-red;
16
+ }
17
+ .tooltip-theme-blue {
18
+ background: $color-blue;
19
+ }
20
+ .tooltip-theme-green {
21
+ background: $color-green;
22
+ }
23
+ .tooltip-theme-yellow {
24
+ background: $color-yellow;
25
+ }
26
+ .tooltip-theme-white {
27
+ background: $color-white;
28
+ }
29
+ .tooltip-theme-yellow,
30
+ .tooltip-theme-white {
31
+ color: #000;
32
+ }
33
+
34
+
35
+