studiokit-scaffolding-js 7.0.14-alpha.1.6 → 7.0.14-alpha.1.8

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 (7) hide show
  1. package/lib/components/UserRoles/RoleCell.js +1 -1
  2. package/lib/css/components/_buttons.css +5 -0
  3. package/lib/css/components/_forms.css +1 -0
  4. package/lib/css/components/_tables.css +5 -10
  5. package/lib/css/utils/_focus.css +7 -3
  6. package/lib/css/variables.css +3 -1
  7. package/package.json +1 -1
package/lib/components/UserRoles/RoleCell.js CHANGED
@@ -92,7 +92,7 @@ var RoleCell = function (_a) {
92
92
  removeUserRole(userRole);
93
93
  }, disabled: isUpdating || isRemoving },
94
94
  react_1.default.createElement(Delete_1.default, { color: "error" }))) : isUserRoleExternal ? (react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "auto", trigger: ['hover', 'focus'], overlay: isExternalPopover },
95
- react_1.default.createElement(IconExternalUser_1.IconExternalUser, { tabIndex: 0, style: { margin: '12px', opacity: 0.5 }, className: "external-icon", titleAccess: "External Role" }))) : (
95
+ react_1.default.createElement(IconExternalUser_1.IconExternalUser, { tabIndex: 0, style: { margin: '12px', fill: '#949494' }, className: "external-icon", titleAccess: "External Role" }))) : (
96
96
  // dummy spacer to keep items aligned
97
97
  react_1.default.createElement("span", { style: {
98
98
  margin: '12px',
package/lib/css/components/_buttons.css CHANGED
@@ -369,6 +369,7 @@ button.close > span {
369
369
 
370
370
  .MuiToggleButton-root {
371
371
  color: var(--color-primary);
372
+ border-color: var(--color-medium-dark-grey);
372
373
 
373
374
  &.Mui-selected {
374
375
  background-color: var(--color-primary);
@@ -383,3 +384,7 @@ button.close > span {
383
384
  }
384
385
  }
385
386
  }
387
+
388
+ .MuiSwitch-switchBase.Mui-focusVisible .MuiIconButton-label {
389
+ border-radius: 20px;
390
+ }
package/lib/css/components/_forms.css CHANGED
@@ -13,6 +13,7 @@
13
13
  .form-control :focus, .MuiInputBase-input:focus {
14
14
  border-color: var(--color-focus-border);
15
15
  box-shadow: var(--box-shadow-focus-shadow);
16
+ transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
16
17
  }
17
18
 
18
19
  select.form-control {
package/lib/css/components/_tables.css CHANGED
@@ -71,23 +71,19 @@ th,
71
71
  padding: 0 !important;
72
72
  text-align: left;
73
73
  background: white;
74
- border: 1px solid var(--color-medium-dark-grey);
75
- border-radius: 3px;
76
74
  width: 100%;
75
+ position: relative;
77
76
 
78
77
  & .MuiSvgIcon-root {
79
78
  margin-top: 0.55rem;
79
+ position: absolute;
80
+ left: 0;
80
81
  }
81
82
 
82
83
  & .table-search-input {
83
84
  text-align: left;
84
- outline: none !important;
85
- border: none !important;
86
85
  width: 100%;
87
-
88
- &:focus {
89
- border: 1px solid var(--color-focus-border) !important;
90
- }
86
+ padding-left: 1.5rem !important;
91
87
  }
92
88
 
93
89
  & input[type=search] {
@@ -117,8 +113,7 @@ th,
117
113
  }
118
114
 
119
115
  & .rt-thead.-filters .form-control {
120
- border-color: var(--color-light-grey);
121
- border-bottom-color: var(--color-medium-dark-grey);
116
+ border-color: var(--color-medium-dark-grey);
122
117
 
123
118
  &:focus {
124
119
  border-color: var(--color-focus-border);
package/lib/css/utils/_focus.css CHANGED
@@ -1,8 +1,12 @@
1
1
  /* global visible focus */
2
- body :focus-visible,
3
- body button:focus-visible,
2
+ :focus-visible,
3
+ /* tachyons overrides (use 'body' to increase specificity */
4
4
  body [type="button"]:focus-visible,
5
- body .btn-primary:focus-visible {
5
+ body [type="reset"]:focus-visible,
6
+ body [type="submit"]:focus-visible,
7
+ body button:focus-visible,
8
+ /* @material-ui switch override */
9
+ .MuiSwitch-switchBase.Mui-focusVisible .MuiIconButton-label {
6
10
  outline: 0.2rem solid var(--color-focus-border);
7
11
  outline-offset: 0;
8
12
  }
package/lib/css/variables.css CHANGED
@@ -28,7 +28,7 @@
28
28
  --color-dark-gold: #7d882d;
29
29
  --color-light-green: #e4f1d4;
30
30
  --color-orange: #ee701b;
31
- --color-light-orange: #f8f5e6;
31
+ --color-light-orange: #fef6f1;
32
32
  --color-dark-yellow: #b2a44a;
33
33
  --color-dark-grey: #30363d;
34
34
 
@@ -60,6 +60,8 @@
60
60
  --color-primary: var(--color-blue);
61
61
  --color-error: var(--color-red);
62
62
  --color-success: var(--color-green);
63
+
64
+ /** Focus Colors / Styles */
63
65
  --color-focus-border: #3590f8;
64
66
  --color-focus-shadow: rgb(0 123 255 / 25%); /** from Bootstrap form controls */
65
67
  --box-shadow-focus-border: 0 0 0 0.2rem var(--color-focus-border);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "studiokit-scaffolding-js",
3
- "version": "7.0.14-alpha.1.6",
3
+ "version": "7.0.14-alpha.1.8",
4
4
  "description": "Common scaffolding for Studio apps at Purdue",
5
5
  "repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
6
6
  "license": "MIT",