fwtoolkit 0.1.0-alpha.2 → 0.1.0-alpha.5

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/css/common.css ADDED
@@ -0,0 +1,183 @@
1
+ body {
2
+ width: 100%;
3
+ height: 100%;
4
+ background-color: var(--main-background-color);
5
+ color: var(--main-text-color);
6
+ min-width: calc(380px - 100vw + 100%); /* to substract scrollbar width. */
7
+ overflow-y: hidden;
8
+ }
9
+
10
+ body.scrollable {
11
+ overflow-y: auto;
12
+ }
13
+
14
+ .fw-header {
15
+ width: 100%;
16
+ height: auto;
17
+ background-color: var(--cs-5-background);
18
+ z-index: 2;
19
+ }
20
+
21
+ .fw-container {
22
+ position: relative;
23
+ height: auto;
24
+ margin: 0 auto;
25
+ padding: 0 34px;
26
+ overflow: hidden;
27
+ }
28
+
29
+ .fw-contents {
30
+ position: relative;
31
+ width: auto;
32
+ height: auto;
33
+ min-width: 985px;
34
+ margin: 0 213px;
35
+ padding: 40px 8px 20px;
36
+ }
37
+
38
+ @media (width <= 1429px) {
39
+ .fw-contents {
40
+ min-width: unset;
41
+ margin: 0 auto;
42
+ max-width: 1004px;
43
+ }
44
+ }
45
+
46
+ .fw-contents h1 {
47
+ font-size: 2em;
48
+ font-weight: bold;
49
+ margin-bottom: 0.2em;
50
+ }
51
+
52
+ .fw-contents .errorlist {
53
+ border: 2px solid var(--error-border-color);
54
+ background-color: var(--error-background-color);
55
+ color: var(--error-text-color);
56
+ margin: 10px 0;
57
+ display: inline-block;
58
+ font-size: 1.4em;
59
+ }
60
+
61
+ .fw-contents .errorlist:empty {
62
+ display: none;
63
+ }
64
+
65
+ .fw-contents label[for="id-password1"],
66
+ .fw-contents label[for="id-password2"] {
67
+ display: none;
68
+ }
69
+
70
+ .fw-contents input#id-password1,
71
+ .fw-contents input#id-password2 {
72
+ margin: 10px 0;
73
+ }
74
+
75
+ table {
76
+ width: 100%;
77
+ text-align: left;
78
+ }
79
+
80
+ table .fw-inline {
81
+ position: relative;
82
+ display: inline-block;
83
+ vertical-align: top;
84
+ padding: 5px 0;
85
+ }
86
+
87
+ .fw-avatar {
88
+ border: solid 1px var(--cs-light-border);
89
+ }
90
+
91
+ .fw-string-avatar {
92
+ display: inline-block;
93
+ line-height: 1;
94
+ text-align: center;
95
+ text-transform: uppercase;
96
+ border-radius: 50%;
97
+ background-color: grey;
98
+ color: white;
99
+ }
100
+
101
+ .fw-string-avatar > span {
102
+ display: inline-block;
103
+ vertical-align: middle;
104
+ }
105
+
106
+ .fw-string-avatar::before,
107
+ .fw-string-avatar::after {
108
+ display: inline-block;
109
+ width: 0;
110
+ padding-top: 100%;
111
+ vertical-align: middle;
112
+ content: "";
113
+ }
114
+
115
+ .fw-avatar-card {
116
+ display: block;
117
+ }
118
+
119
+ .fw-avatar-card .fw-avatar-card-avatar .fw-avatar,
120
+ .fw-avatar-card .fw-avatar-card-avatar .fw-string-avatar {
121
+ width: 56px;
122
+ height: 56px;
123
+ font-size: 23px;
124
+ }
125
+
126
+ .fw-avatar-card-avatar {
127
+ display: inline-block;
128
+ vertical-align: middle;
129
+ }
130
+
131
+ .fw-avatar-card-name {
132
+ display: inline-block;
133
+ vertical-align: middle;
134
+ padding-left: 8px;
135
+ font-size: 17px;
136
+ }
137
+
138
+ .fw-avatar-card-email {
139
+ font-size: 13px;
140
+ display: block;
141
+ padding-top: 6px;
142
+ color: var(--cs-white-text-secondary);
143
+ }
144
+
145
+ .ProseMirror span.placeholder::before {
146
+ color: var(--cs-white-placeholder-text);
147
+ content: attr(data-placeholder);
148
+ cursor: text;
149
+ }
150
+
151
+ .ProseMirror-focused span.placeholder.selected {
152
+ display: none;
153
+ }
154
+
155
+ .ProseMirror-focused
156
+ .ProseMirror:not(.ProseMirror-focused)
157
+ span.placeholder.selected {
158
+ display: inline;
159
+ }
160
+
161
+ .clearfix::after {
162
+ content: "";
163
+ clear: both;
164
+ display: block;
165
+ }
166
+
167
+ div.input {
168
+ box-sizing: border-box;
169
+ font-size: 14px;
170
+ line-height: 1.33em;
171
+ box-shadow: none;
172
+ border-radius: 0;
173
+ padding: 11px 10px 0;
174
+ min-height: 38px;
175
+ color: var(--cs-light-text);
176
+ background-color: var(--cs-light-background);
177
+ }
178
+
179
+ .access-key {
180
+ text-decoration: underline;
181
+ text-underline-offset: 2px; /* Adjust for better visibility */
182
+ pointer-events: none;
183
+ }
@@ -0,0 +1,105 @@
1
+ .ui-content-menu {
2
+ position: absolute;
3
+ color: var(--cs-white-text);
4
+ background-color: var(--cs-white-background);
5
+ box-shadow: 0 0 20px rgb(var(--dropup-box-shadow-color));
6
+ font-size: 14px;
7
+ z-index: 101;
8
+ padding: 0;
9
+ border: 0 none;
10
+ border-image: initial;
11
+ overflow: hidden;
12
+ border-radius: 6px;
13
+ outline: 0;
14
+ }
15
+
16
+ .ui-content-menu-content.ui-scrollable {
17
+ overflow-y: scroll;
18
+ }
19
+
20
+ .ui-content-menu-content {
21
+ position: relative;
22
+ margin-top: 8px;
23
+ overflow: hidden;
24
+ }
25
+
26
+ .ui-widget-overlay {
27
+ position: fixed;
28
+ left: 0;
29
+ top: 0;
30
+ width: 100%;
31
+ height: 100%;
32
+ background-color: rgb(var(--overlay-color));
33
+ z-index: 100;
34
+ backdrop-filter: blur(2px);
35
+ }
36
+
37
+ .ui-widget-overlay.no-blur {
38
+ backdrop-filter: none;
39
+ }
40
+
41
+ .content-menu-list {
42
+ list-style: none;
43
+ padding: 0 0 5px;
44
+ cursor: pointer;
45
+ }
46
+
47
+ .content-menu-item {
48
+ padding: 18px 31px 15px;
49
+ color: var(--cs-white-text);
50
+ font-family: Lato, sans-serif;
51
+ font-size: 14px;
52
+ font-weight: 400;
53
+ line-height: 1em;
54
+ }
55
+
56
+ .content-menu-item.disabled {
57
+ pointer-events: none;
58
+ opacity: 0.6;
59
+ }
60
+
61
+ .content-menu-item.selected {
62
+ color: var(--cs-white-selected);
63
+ background-color: var(--cs-white-background-selected);
64
+ }
65
+
66
+ .content-menu-item:hover {
67
+ color: var(--cs-white-hover);
68
+ background-color: var(--cs-white-background-hover);
69
+ }
70
+
71
+ .content-menu-item:focus {
72
+ color: var(--cs-white-focus);
73
+ background-color: var(--cs-white-background-focus);
74
+ outline: none;
75
+ }
76
+
77
+ .content-menu-item-divider {
78
+ border: 0 none;
79
+ border-top: 1px solid var(--pulldown-separator-color) !important;
80
+ }
81
+
82
+ .content-menu-item-header {
83
+ line-height: 18px;
84
+ background-color: var(--pulldown-header-background-color);
85
+ color: var(--pulldown-header-text-color);
86
+ display: block;
87
+ text-align: center;
88
+ }
89
+
90
+ .content-menu-item-icon {
91
+ position: absolute;
92
+ right: 40px;
93
+ color: var(--cs-white-text);
94
+ }
95
+
96
+ .content-menu-columns {
97
+ display: flex;
98
+ flex-direction: row;
99
+ }
100
+
101
+ .content-menu-columns .content-menu-list {
102
+ flex: 1 0 200px;
103
+ min-width: 200px;
104
+ padding: 0 0 5px;
105
+ }
@@ -0,0 +1,191 @@
1
+ table.fw-data-table {
2
+ font-size: 13px;
3
+ line-height: 1.25;
4
+ }
5
+
6
+ table.fw-data-table:focus {
7
+ outline: none;
8
+ }
9
+
10
+ table.fw-data-table thead,
11
+ table.datatable-table thead {
12
+ font-weight: 900;
13
+ font-size: 11px;
14
+ }
15
+
16
+ table.datatable-table thead th a {
17
+ color: var(--cs-1-hover);
18
+ }
19
+
20
+ table.fw-data-table td,
21
+ table.datatable-table td {
22
+ padding: 15px 0;
23
+ vertical-align: top;
24
+ border-bottom: solid 1px var(--cs-white-border);
25
+ }
26
+
27
+ /* Align text with top of images */
28
+ table.fw-data-table tbody td {
29
+ vertical-align: top;
30
+ }
31
+
32
+ table.fw-data-table th,
33
+ table.datatable-table th {
34
+ padding: 15px 0;
35
+ vertical-align: top;
36
+ border-bottom: solid 1px var(--cs-white-header-border);
37
+ }
38
+
39
+ table.fw-data-table th:last-child,
40
+ table.fw-data-table td:last-child,
41
+ table.datatable-table th:last-child,
42
+ table.datatable-table td:last-child {
43
+ padding-right: 0;
44
+ }
45
+
46
+ table.fw-data-table:focus tbody td {
47
+ border-bottom-color: var(--menu-cursor-border-color);
48
+ }
49
+
50
+ table.fw-data-table .date,
51
+ table.datatable-table .date {
52
+ white-space: nowrap;
53
+ }
54
+
55
+ table.fw-data-table.fw-large tbody {
56
+ width: 985px;
57
+ max-height: calc(100vh - 320px);
58
+ }
59
+
60
+ table.fw-data-table.fw-middle tbody {
61
+ width: 600px;
62
+ max-height: calc(100vh - 320px);
63
+ }
64
+
65
+ table.fw-data-table.fw-small tbody {
66
+ width: 342px;
67
+ height: 270px;
68
+ }
69
+
70
+ table.fw-data-table.fw-min tbody {
71
+ width: 342px;
72
+ height: 225px;
73
+ }
74
+
75
+ table.fw-data-table td.td-icon {
76
+ text-align: center;
77
+ }
78
+
79
+ table.fw-data-table-title {
80
+ color: var(--cs-1-text);
81
+ }
82
+
83
+ table.fw-data-table-title i.fa,
84
+ table.fw-data-table-title i.far,
85
+ table.fw-data-table-title i.fas {
86
+ margin-right: 10px;
87
+ }
88
+
89
+ table.fw-data-table .icon-trash {
90
+ font-size: 15px;
91
+ }
92
+
93
+ .owned-by-user .icon-access-right,
94
+ table.fw-data-table .fa-clock,
95
+ table.fw-data-table .fa-trash,
96
+ table.fw-data-table .fa-download,
97
+ table.fw-data-table .fa-history {
98
+ color: var(--cs-1-icon);
99
+ cursor: pointer;
100
+ }
101
+
102
+ .owned-by-user .icon-access-right:hover,
103
+ table.fw-data-table .fa-clock:hover,
104
+ table.fw-data-table .fa-trash:hover,
105
+ table.fw-data-table .fa-download:hover,
106
+ table.fw-data-table .fa-history:hover {
107
+ color: var(--cs-1-hover);
108
+ }
109
+
110
+ /* A deleted access rights row */
111
+ .collaborator-tr[data-right="delete"] {
112
+ display: none;
113
+ }
114
+
115
+ table.fw-data-table .fw-avatar,
116
+ table.fw-data-table .fw-string-avatar {
117
+ display: inline-block;
118
+ width: 25px;
119
+ height: 25px;
120
+ vertical-align: top;
121
+ margin: -4px 10px -5px 0;
122
+ }
123
+
124
+ table.fw-data-table > tbody > tr > td:first-child {
125
+ padding-left: 2px;
126
+ }
127
+
128
+ table.fw-data-table:focus > tbody > tr.datatable-cursor {
129
+ background-color: var(--cs-white-background-selected);
130
+ }
131
+
132
+ /* the usermedia table */
133
+ .fw-usermedia-title {
134
+ display: inline-block;
135
+ height: auto;
136
+ }
137
+
138
+ .fw-usermedia-type {
139
+ display: block;
140
+ margin-top: 3px;
141
+ }
142
+
143
+ .fw-usermedia-image {
144
+ display: inline-block;
145
+ max-width: 60px;
146
+ max-height: 60px;
147
+ overflow: hidden;
148
+ vertical-align: top;
149
+ margin: 0 14px 2px 0;
150
+ }
151
+
152
+ .fw-usermedia-image > img {
153
+ min-width: 100%;
154
+ min-height: 100%;
155
+ }
156
+
157
+ table.fw-data-table tbody td.checkable {
158
+ position: relative;
159
+ }
160
+
161
+ table.fw-data-table tbody tr.checked td.checkable::after {
162
+ width: 1em;
163
+ height: 1em;
164
+ position: absolute;
165
+ right: 12px;
166
+ top: 12px;
167
+ }
168
+
169
+ /* Word counter dialog table */
170
+ .fw-word-counter-tbody {
171
+ line-height: 38px;
172
+ }
173
+
174
+ /* Bulk action */
175
+ .dt-bulk {
176
+ display: block;
177
+ position: relative;
178
+ min-width: 30px;
179
+ }
180
+
181
+ .dt-bulk .fw-check + label {
182
+ display: inline-block;
183
+ vertical-align: middle;
184
+ }
185
+
186
+ .dt-bulk-dropdown {
187
+ display: inline-block;
188
+ vertical-align: middle;
189
+ padding-left: 3px;
190
+ cursor: pointer;
191
+ }
package/css/dialog.css ADDED
@@ -0,0 +1,151 @@
1
+ .ui-dialog {
2
+ position: absolute;
3
+ background-color: var(--cs-light-background);
4
+ font-size: 14px;
5
+ overflow: hidden;
6
+ outline: 0;
7
+ padding: 0 19px 19px;
8
+ box-shadow: none;
9
+ border: 0 none;
10
+ border-image: initial;
11
+ border-radius: 0;
12
+ z-index: 1000; /* Ensure dialog stays on top */
13
+ user-select: none; /* Prevent interaction with background content */
14
+ }
15
+
16
+ .ui-dialog-fullpage {
17
+ position: initial !important;
18
+ }
19
+
20
+ .ui-dialog-content.ui-scrollable {
21
+ overflow-y: auto;
22
+ }
23
+
24
+ .ui-dialog-titlebar {
25
+ position: relative;
26
+ margin: 0 -19px;
27
+ padding: 19px 40px 19px 19px;
28
+ background: var(--cs-dark-background);
29
+ color: var(--cs-dark-text);
30
+ cursor: move; /* fallback if grab cursor is unsupported */
31
+ cursor: grab;
32
+ user-select: none;
33
+ }
34
+
35
+ .ui-dialog-title {
36
+ font-size: 15px;
37
+ font-weight: 400;
38
+ text-transform: none;
39
+ }
40
+
41
+ .ui-dialog-titlebar-close {
42
+ right: 19px;
43
+ }
44
+
45
+ .ui-dialog-titlebar-help {
46
+ right: 39px;
47
+ }
48
+
49
+ .ui-button-icon-only {
50
+ width: 2em;
51
+ box-sizing: border-box;
52
+ text-indent: -9999px;
53
+ white-space: nowrap;
54
+ }
55
+
56
+ .ui-dialog-titlebar .ui-button-icon-only {
57
+ color: var(--cs-dark-text);
58
+ }
59
+
60
+ .ui-dialog-titlebar .ui-button-icon-only:hover {
61
+ color: var(--cs-dark-hover);
62
+ }
63
+
64
+ .ui-button-icon-only .ui-icon {
65
+ position: absolute;
66
+ top: 0;
67
+ left: 0;
68
+ margin-top: -2px;
69
+ margin-left: 0;
70
+ }
71
+
72
+ .ui-dialog-content {
73
+ position: relative;
74
+ margin-top: 24px;
75
+ overflow: hidden auto;
76
+ padding: 6px;
77
+ max-height: calc(100vh - 133px);
78
+ min-height: 20px;
79
+ max-width: calc(100vw - 4px);
80
+ }
81
+
82
+ .input-list-wrapper > tbody > tr:last-child > td {
83
+ padding-bottom: 0;
84
+ }
85
+
86
+ .input-list-wrapper td.input-field-list-ctrl {
87
+ padding-right: 20px;
88
+ text-align: right;
89
+ vertical-align: middle;
90
+ }
91
+
92
+ .input-list-wrapper td.input-field-list-ctrl .fa {
93
+ display: inline;
94
+ }
95
+
96
+ .entry-field input[type="text"],
97
+ .entry-field input[type="number"] {
98
+ margin: 0;
99
+ }
100
+
101
+ .ui-dialog-buttonpane {
102
+ padding-top: 20px;
103
+ }
104
+
105
+ .ui-dialog-buttonset {
106
+ position: relative;
107
+ text-align: right;
108
+ }
109
+
110
+ .ui-dialog-buttonset .fw-button {
111
+ margin-left: 6px;
112
+ }
113
+
114
+ .ui-widget-overlay {
115
+ position: fixed;
116
+ left: 0;
117
+ top: 0;
118
+ width: 100%;
119
+ height: 100%;
120
+ background-color: rgb(var(--overlay-color));
121
+ z-index: 100;
122
+ backdrop-filter: blur(2px);
123
+ }
124
+
125
+ .ui-widget-overlay.no-blur {
126
+ backdrop-filter: none;
127
+ }
128
+
129
+ .ui-dialog-content textarea {
130
+ min-height: 112px;
131
+ min-width: 350px;
132
+ height: auto;
133
+ }
134
+
135
+ .fw-media-file-input {
136
+ display: none;
137
+ }
138
+
139
+ .ui-dialog-content .noteEl {
140
+ margin-bottom: 10px;
141
+ font-size: smaller;
142
+ color: var(--error-background-color);
143
+ }
144
+
145
+ .ui-dialog-content .noteEl.hide {
146
+ display: none;
147
+ }
148
+
149
+ .ui-dialog form {
150
+ padding: 8px;
151
+ }