ixbrl-viewer 1.4.21__py3-none-any.whl → 1.4.49__py3-none-any.whl

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.

Potentially problematic release.


This version of ixbrl-viewer might be problematic. Click here for more details.

Files changed (114) hide show
  1. iXBRLViewerPlugin/__init__.py +77 -49
  2. iXBRLViewerPlugin/_version.py +2 -2
  3. iXBRLViewerPlugin/constants.py +86 -1
  4. iXBRLViewerPlugin/featureConfig.py +4 -1
  5. iXBRLViewerPlugin/iXBRLViewer.py +202 -131
  6. iXBRLViewerPlugin/plugin.py +7 -0
  7. iXBRLViewerPlugin/viewer/dist/ixbrlviewer.js +1 -1
  8. iXBRLViewerPlugin/viewer/dist/ixbrlviewer.js.LICENSE.txt +9 -2
  9. iXBRLViewerPlugin/viewer/i18next-parser.config.js +1 -1
  10. iXBRLViewerPlugin/viewer/src/data/utr.json +1 -0
  11. iXBRLViewerPlugin/viewer/src/html/fact-details.html +69 -38
  12. iXBRLViewerPlugin/viewer/src/html/footer-logo.html +4 -0
  13. iXBRLViewerPlugin/viewer/src/html/footnote-details.html +1 -1
  14. iXBRLViewerPlugin/viewer/src/html/inspector.html +324 -211
  15. iXBRLViewerPlugin/viewer/src/i18n/cy/balancetypes.json +1 -0
  16. iXBRLViewerPlugin/viewer/src/i18n/cy/currencies.json +13 -0
  17. iXBRLViewerPlugin/viewer/src/i18n/cy/datatypes.json +9 -0
  18. iXBRLViewerPlugin/viewer/src/i18n/cy/labelroles.json +24 -0
  19. iXBRLViewerPlugin/viewer/src/i18n/cy/referenceparts.json +10 -0
  20. iXBRLViewerPlugin/viewer/src/i18n/cy/scale.json +16 -0
  21. iXBRLViewerPlugin/viewer/src/i18n/cy/tooltips.json +17 -0
  22. iXBRLViewerPlugin/viewer/src/i18n/cy/translation.json +179 -0
  23. iXBRLViewerPlugin/viewer/src/i18n/en/balancetypes.json +4 -0
  24. iXBRLViewerPlugin/viewer/src/i18n/en/datatypes.json +10 -0
  25. iXBRLViewerPlugin/viewer/src/i18n/en/labelroles.json +4 -0
  26. iXBRLViewerPlugin/viewer/src/i18n/en/scale.json +16 -0
  27. iXBRLViewerPlugin/viewer/src/i18n/en/tooltips.json +17 -0
  28. iXBRLViewerPlugin/viewer/src/i18n/en/translation.json +56 -24
  29. iXBRLViewerPlugin/viewer/src/i18n/es/balancetypes.json +4 -0
  30. iXBRLViewerPlugin/viewer/src/i18n/es/datatypes.json +10 -0
  31. iXBRLViewerPlugin/viewer/src/i18n/es/labelroles.json +24 -0
  32. iXBRLViewerPlugin/viewer/src/i18n/es/scale.json +16 -0
  33. iXBRLViewerPlugin/viewer/src/i18n/es/tooltips.json +17 -0
  34. iXBRLViewerPlugin/viewer/src/i18n/es/translation.json +70 -37
  35. iXBRLViewerPlugin/viewer/src/icons/dark-mode.svg +4 -0
  36. iXBRLViewerPlugin/viewer/src/img/arelle-dark.svg +179 -0
  37. iXBRLViewerPlugin/viewer/src/img/inline-viewer-dark.svg +59 -0
  38. iXBRLViewerPlugin/viewer/src/js/accordian.js +3 -2
  39. iXBRLViewerPlugin/viewer/src/js/aspect.js +18 -10
  40. iXBRLViewerPlugin/viewer/src/js/aspect.test.js +2 -2
  41. iXBRLViewerPlugin/viewer/src/js/balance.js +14 -0
  42. iXBRLViewerPlugin/viewer/src/js/calculation.js +45 -34
  43. iXBRLViewerPlugin/viewer/src/js/calculationInspector.js +4 -7
  44. iXBRLViewerPlugin/viewer/src/js/chart.js +23 -21
  45. iXBRLViewerPlugin/viewer/src/js/concept.js +27 -2
  46. iXBRLViewerPlugin/viewer/src/js/concept.test.js +23 -2
  47. iXBRLViewerPlugin/viewer/src/js/datatype.js +20 -0
  48. iXBRLViewerPlugin/viewer/src/js/datatype.test.js +62 -0
  49. iXBRLViewerPlugin/viewer/src/js/dialog.js +6 -4
  50. iXBRLViewerPlugin/viewer/src/js/fact.js +40 -7
  51. iXBRLViewerPlugin/viewer/src/js/fact.test.js +3 -0
  52. iXBRLViewerPlugin/viewer/src/js/index.js +11 -3
  53. iXBRLViewerPlugin/viewer/src/js/inspector.js +560 -160
  54. iXBRLViewerPlugin/viewer/src/js/inspector.test.js +1 -2
  55. iXBRLViewerPlugin/viewer/src/js/ixbrlviewer.js +129 -31
  56. iXBRLViewerPlugin/viewer/src/js/ixbrlviewer.test.js +133 -20
  57. iXBRLViewerPlugin/viewer/src/js/ixnode.js +1 -1
  58. iXBRLViewerPlugin/viewer/src/js/menu.js +25 -7
  59. iXBRLViewerPlugin/viewer/src/js/number-matcher.js +2 -2
  60. iXBRLViewerPlugin/viewer/src/js/outline.js +2 -4
  61. iXBRLViewerPlugin/viewer/src/js/period.js +0 -1
  62. iXBRLViewerPlugin/viewer/src/js/report.js +68 -13
  63. iXBRLViewerPlugin/viewer/src/js/report.test.js +77 -6
  64. iXBRLViewerPlugin/viewer/src/js/reportset.js +33 -3
  65. iXBRLViewerPlugin/viewer/src/js/reportset.test.js +32 -6
  66. iXBRLViewerPlugin/viewer/src/js/search.js +61 -35
  67. iXBRLViewerPlugin/viewer/src/js/search.test.js +8 -5
  68. iXBRLViewerPlugin/viewer/src/js/summary.js +22 -0
  69. iXBRLViewerPlugin/viewer/src/js/summary.test.js +50 -13
  70. iXBRLViewerPlugin/viewer/src/js/tableExport.js +3 -3
  71. iXBRLViewerPlugin/viewer/src/js/taxonomynamer.js +34 -0
  72. iXBRLViewerPlugin/viewer/src/js/taxonomynamer.test.js +32 -0
  73. iXBRLViewerPlugin/viewer/src/js/theme.js +49 -0
  74. iXBRLViewerPlugin/viewer/src/js/unit.js +73 -2
  75. iXBRLViewerPlugin/viewer/src/js/unit.test.js +14 -3
  76. iXBRLViewerPlugin/viewer/src/js/util.js +21 -18
  77. iXBRLViewerPlugin/viewer/src/js/util.test.js +1 -0
  78. iXBRLViewerPlugin/viewer/src/js/utr.js +27 -0
  79. iXBRLViewerPlugin/viewer/src/js/viewer.js +40 -29
  80. iXBRLViewerPlugin/viewer/src/js/viewerOptions.js +0 -2
  81. iXBRLViewerPlugin/viewer/src/less/accordian.less +8 -4
  82. iXBRLViewerPlugin/viewer/src/less/block-list.less +12 -6
  83. iXBRLViewerPlugin/viewer/src/less/calculation-inspector.less +2 -2
  84. iXBRLViewerPlugin/viewer/src/less/chart.less +8 -5
  85. iXBRLViewerPlugin/viewer/src/less/colours-dark-mode.less +40 -0
  86. iXBRLViewerPlugin/viewer/src/less/colours.less +28 -21
  87. iXBRLViewerPlugin/viewer/src/less/common.less +1 -1
  88. iXBRLViewerPlugin/viewer/src/less/components.less +3 -3
  89. iXBRLViewerPlugin/viewer/src/less/core.less +2 -0
  90. iXBRLViewerPlugin/viewer/src/less/dialog.less +13 -10
  91. iXBRLViewerPlugin/viewer/src/less/form-controls.less +33 -11
  92. iXBRLViewerPlugin/viewer/src/less/inspector.less +556 -300
  93. iXBRLViewerPlugin/viewer/src/less/loader.less +2 -2
  94. iXBRLViewerPlugin/viewer/src/less/menu.less +33 -15
  95. iXBRLViewerPlugin/viewer/src/less/summary.less +16 -6
  96. iXBRLViewerPlugin/viewer/src/less/tabs.less +5 -5
  97. iXBRLViewerPlugin/viewer/src/less/text-mixins.less +2 -1
  98. iXBRLViewerPlugin/viewer/src/less/validation-report.less +1 -1
  99. iXBRLViewerPlugin/viewer/src/less/viewer.less +30 -18
  100. iXBRLViewerPlugin/viewer/webpack.common.js +19 -9
  101. {ixbrl_viewer-1.4.21.dist-info → ixbrl_viewer-1.4.49.dist-info}/METADATA +41 -14
  102. ixbrl_viewer-1.4.49.dist-info/RECORD +197 -0
  103. {ixbrl_viewer-1.4.21.dist-info → ixbrl_viewer-1.4.49.dist-info}/WHEEL +1 -1
  104. tests/puppeteer/framework/page_objects/doc_frame.js +3 -3
  105. tests/puppeteer/framework/page_objects/fact_details_panel.js +28 -0
  106. tests/puppeteer/puppeteer_test_run_via_intellij.jpg +0 -0
  107. tests/puppeteer/tests/fact_properties.test.js +10 -4
  108. tests/unit_tests/iXBRLViewerPlugin/test_iXBRLViewer.py +117 -51
  109. iXBRLViewerPlugin/viewer/src/js/interact.min.js +0 -6
  110. ixbrl_viewer-1.4.21.dist-info/RECORD +0 -166
  111. {ixbrl_viewer-1.4.21.dist-info → ixbrl_viewer-1.4.49.dist-info}/LICENSE +0 -0
  112. {ixbrl_viewer-1.4.21.dist-info → ixbrl_viewer-1.4.49.dist-info}/NOTICE +0 -0
  113. {ixbrl_viewer-1.4.21.dist-info → ixbrl_viewer-1.4.49.dist-info}/entry_points.txt +0 -0
  114. {ixbrl_viewer-1.4.21.dist-info → ixbrl_viewer-1.4.49.dist-info}/top_level.txt +0 -0
@@ -1,7 +1,5 @@
1
1
  // See COPYRIGHT.md for copyright information
2
2
 
3
- import $ from 'jquery';
4
-
5
3
  export function ViewerOptions() {
6
4
  this.showPrefixes = true;
7
5
  this.language = null;
@@ -2,7 +2,7 @@
2
2
 
3
3
  .accordian .card {
4
4
  margin-top: 0.4rem;
5
- background-color: @button-background;
5
+ background-color: var(--colour-button-bg);
6
6
 
7
7
  .card-body {
8
8
  display: none;
@@ -16,17 +16,21 @@
16
16
  }
17
17
 
18
18
  .title {
19
+ .text-md();
20
+
19
21
  padding: 1.2rem 1.6rem;
22
+ border: none;
23
+ width: 100%;
24
+ text-align: left;
20
25
  cursor: pointer;
21
- line-height: 1.8rem;
22
26
 
23
27
  &:hover {
24
- background-color: #f3f3f3;
28
+ background-color: var(--colour-bg-selected);
25
29
  }
26
30
  }
27
31
 
28
32
  &.active {
29
- background-color: #f3f3f3;
33
+ background-color: var(--colour-bg-selected);
30
34
 
31
35
  .title {
32
36
  font-weight: bold;
@@ -3,27 +3,33 @@
3
3
  .block-list-item {
4
4
  margin: 0.5rem 0;
5
5
  padding: 0.3rem 0.9rem;
6
- background-color: @button-background;
6
+ background-color: var(--colour-button-bg);
7
7
  cursor: pointer;
8
8
  position: relative;
9
- border-left: solid 0.4rem @button-background;
9
+ border-left: solid 0.4rem var(--colour-button-bg);
10
+ border-right: none;
11
+ border-top: none;
12
+ border-bottom: none;
13
+ border-radius: 0;
14
+ text-align: left;
15
+ width: 100%;
10
16
 
11
17
  & > * {
12
18
  margin: 0.8rem 0;
13
19
  }
14
20
 
15
21
  // Contents of .tags provide 0.2rem of non-collapsing margin
16
- & > .tags {
22
+ & > .block-list-item-tags {
17
23
  margin: 0.6rem 0;
18
24
  }
19
25
 
20
26
  &:hover {
21
- background-color: @background-selected;
27
+ background-color: var(--colour-bg-selected);
22
28
  }
23
29
 
24
30
  &.selected {
25
- border-left: solid 0.4rem #0085e6;
26
- background-color: @background-selected;
31
+ border-left: solid 0.4rem var(--colour-primary);
32
+ background-color: var(--colour-bg-selected);
27
33
  }
28
34
 
29
35
  &.linked-highlight {
@@ -58,13 +58,13 @@
58
58
  &.consistent .icon::before {
59
59
  .icon-circle-tick();
60
60
 
61
- color: @workiva-green;
61
+ color: var(--colour-primary);
62
62
  }
63
63
 
64
64
  &.inconsistent .icon::before {
65
65
  .icon-circle-cross();
66
66
 
67
- color: @warning-orange;
67
+ color: var(--colour-warning);
68
68
  }
69
69
  }
70
70
 
@@ -12,6 +12,9 @@
12
12
  width: 100%;
13
13
  position: absolute;
14
14
  bottom: 0;
15
+ left: 0;
16
+ padding: 1rem;
17
+ box-sizing: border-box;
15
18
 
16
19
  .other-aspect {
17
20
  display: inline-block;
@@ -24,21 +27,21 @@
24
27
  }
25
28
 
26
29
  &.addable {
27
- color: @primary;
30
+ color: var(--colour-primary);
28
31
 
29
32
  &:hover {
30
- color: @primary-focus;
33
+ color: var(--colour-primary)-focus;
31
34
  text-decoration: underline;
32
35
  }
33
36
  }
34
37
 
35
38
  &.selected {
36
- background-color: @button-primary-bg;
39
+ background-color: var(--colour-button-primary-bg);
37
40
  border-radius: 0.4rem;
38
- border: 0.1rem solid @button-primary-border;
41
+ border: 0.1rem solid var(--colour-button-primary-border);
39
42
 
40
43
  /* border: solid 1px #399; */
41
- color: #fff;
44
+ color: var(--colour-bg);
42
45
  }
43
46
  }
44
47
  }
@@ -0,0 +1,40 @@
1
+ // See COPYRIGHT.md for copyright information
2
+
3
+ @colour-bg-d: #000000;
4
+ @colour-foreground-d: #ffffff;
5
+
6
+ @colour-primary-d: #72bafd;
7
+ @colour-secondary-d: #66cc00;
8
+ @colour-tertiary-d: #aa108e;
9
+ @colour-warning-d: #d8ae15;
10
+
11
+ @colour-bg-fade-d: fadeout(@colour-foreground-d, 50%);
12
+ @colour-primary-focus-d: darken(spin(@colour-primary-d, -3.4), 7.0);
13
+
14
+ @colour-loader-d: @colour-foreground-d;
15
+ @colour-linked-fact-d: @colour-primary-d;
16
+ @colour-related-fact-d: lighten(desaturate(spin(@colour-secondary-d, 30.0), 14.5), 6.5);
17
+
18
+ @colour-text-title-d: darken(@colour-foreground-d, 26.2);
19
+ @colour-text-d: darken(@colour-foreground-d, 26.2);
20
+ @colour-text-light-d: darken(@colour-foreground-d, 52.4);
21
+ @colour-text-form-value-d: darken(@colour-foreground-d, 36.8);
22
+
23
+ @colour-border-grey-d: darken(@colour-foreground-d, 59.7);
24
+
25
+ @colour-highlight-default-d: lighten(desaturate(spin(@colour-secondary-d, -0.5660), 31.1688), 34); // #beea8f
26
+ @colour-highlight-1-d: lighten(saturate(spin(@colour-tertiary-d, -25.3918), 17.2043), 36); // #dd73ff
27
+ @colour-highlight-2-d: lighten(saturate(spin(@colour-warning-d, 1.0810), 17.7215), 33); // #ffac29
28
+
29
+ @colour-icon-grey-d: @colour-text-d;
30
+
31
+ @colour-button-primary-bg-d: @colour-primary-focus-d;
32
+ @colour-button-primary-border-d: darken(spin(@colour-primary-d, -3.2), 3.2);
33
+
34
+ @colour-button-bg-d: lighten(@colour-bg-d, 8.2);
35
+ @colour-bg-selected-d: lighten(@colour-bg-d, 14.1);
36
+
37
+ @colour-bg-tag-d: lighten(@colour-bg-d, 137.0);
38
+
39
+ @colour-row-hover-d: lighten(@colour-bg-d, 29.4);
40
+ @colour-row-odd-d: @colour-button-bg-d;
@@ -1,33 +1,40 @@
1
1
  // See COPYRIGHT.md for copyright information
2
2
 
3
- @primary: #026dce;
4
- @primary-focus: #0094ff;
3
+ @colour-bg: #ffffff;
4
+ @colour-foreground: #000000;
5
5
 
6
- @linked-fact: @primary;
7
- @related-fact: #0eb30e;
6
+ @colour-primary: #026dce;
7
+ @colour-secondary: #66cc00;
8
+ @colour-tertiary: #aa108e;
9
+ @colour-warning: #7a4b06;
8
10
 
9
- @text-title: #444444;
10
- @text: #595959;
11
- @text-light: #b2b2b2;
12
- @text-form-value: #7d7d7d;
11
+ @colour-bg-fade: fadeout(@colour-foreground, 50%);
12
+ @colour-primary-focus: lighten(saturate(spin(@colour-primary, -3.3529), 1.9231), 9.2157); // #0094ff
13
13
 
14
- @border-grey: #cbcbcb;
15
- @simple-border: solid 0.1rem @border-grey;
14
+ @colour-loader: @colour-bg;
15
+ @colour-linked-fact: @colour-primary;
16
+ @colour-related-fact: darken(desaturate(spin(@colour-secondary, 30.0000), 14.5078), 2.1569); // #0eb30e;
16
17
 
17
- @highlight-default: hsl(90 69% 85% / 1);
18
- @highlight-1: #eaa8ff;
19
- @highlight-2: hsl(48 100% 85% / 1);
18
+ @colour-text-title: lighten(@colour-foreground, 26.6667); // #444444;
19
+ @colour-text: lighten(@colour-foreground, 34.9020); // #595959;
20
+ @colour-text-light: lighten(@colour-foreground, 45); // #737373;
21
+ @colour-text-form-value: lighten(@colour-foreground, 45); // #737373
20
22
 
21
- @icon-grey: @text;
23
+ @colour-border-grey: lighten(@colour-foreground, 79.6078);
22
24
 
23
- @button-primary-bg: @primary-focus;
24
- @button-primary-border: #0085e6;
25
+ @colour-highlight-default: lighten(desaturate(spin(@colour-secondary, -0.5660), 31.1688), 34); // #beea8f
26
+ @colour-highlight-1: lighten(saturate(spin(@colour-tertiary, -25.3918), 17.2043), 36); // #dd73ff
27
+ @colour-highlight-2: lighten(saturate(spin(@colour-warning, 1.0810), 17.7215), 33); // #ffac29
25
28
 
26
- @button-background: #f8f8f8;
27
- @background-selected: #f3f3f3;
29
+ @colour-icon-grey: @colour-text;
28
30
 
29
- @background-tag: #8a8a8a;
31
+ @colour-button-primary-bg: darken(@colour-primary-focus, 20);
32
+ @colour-button-primary-border: darken(@colour-button-primary-bg, 10);
30
33
 
31
- @workiva-green: #66ca00;
34
+ @colour-button-bg: darken(@colour-bg, 2.7451); // #f8f8f8;
35
+ @colour-bg-selected: darken(@colour-bg, 4.7059); // #f3f3f3;
32
36
 
33
- @warning-orange: #d8ae15;
37
+ @colour-bg-tag: darken(@colour-bg, 65); // #595959;
38
+
39
+ @colour-row-hover: darken(@colour-bg, 9.8039); // #e6e6e6
40
+ @colour-row-odd: @colour-button-bg;
@@ -2,7 +2,7 @@
2
2
 
3
3
  /* Styles common to both inspector and highlighting used within iframe */
4
4
  .linked-highlight-text {
5
- outline: dashed 0.125em @linked-fact;
5
+ outline: dashed 0.125em var(--colour-linked-fact);
6
6
  outline-offset: 0.0625em;
7
7
  }
8
8
 
@@ -4,9 +4,9 @@
4
4
  display: inline-block;
5
5
  text-transform: uppercase;
6
6
  font-weight: bold;
7
- background-color: @background-tag;
7
+ background-color: var(--colour-bg-tag);
8
8
  padding: 0.15em 0.5em;
9
- color: #fff;
9
+ color: var(--colour-bg);
10
10
  border-radius: 0.3em;
11
11
  margin: 0.2rem 0.3rem 0.2rem 0;
12
12
  white-space: nowrap;
@@ -14,7 +14,7 @@
14
14
 
15
15
  .clickable {
16
16
  cursor: pointer;
17
- color: @primary;
17
+ color: var(--colour-primary);
18
18
  }
19
19
 
20
20
  .panel-indent {
@@ -5,5 +5,7 @@ html {
5
5
  }
6
6
 
7
7
  body {
8
+ background-color: var(--colour-bg);
9
+ color: var(--colour-foreground);
8
10
  margin: 0;
9
11
  }
@@ -7,8 +7,10 @@
7
7
  left: 50%;
8
8
  transform: translate(-50%, -50%);
9
9
  border: solid 1px #000;
10
- background-color: #fff;
10
+ background-color: var(--colour-bg);
11
11
  display: none;
12
+ padding: 0;
13
+ margin: 0;
12
14
 
13
15
  &.full-screen {
14
16
  width: calc(100vw - 5em);
@@ -37,15 +39,16 @@
37
39
  }
38
40
 
39
41
  .close {
42
+ border: none;
40
43
  position: absolute;
41
- top: 0;
42
- right: 0;
43
- padding: 1.8rem 2rem 0;
44
+ top: 1rem;
45
+ right: 1.4rem;
46
+ padding: 0.3rem;
44
47
  font-size: 2.6rem;
45
48
  z-index: 20;
46
49
  cursor: pointer;
47
50
  line-height: 2.2rem;
48
- opacity: 0.2;
51
+ color: var(--colour-border-grey);
49
52
 
50
53
  &::before {
51
54
  content: "\00d7";
@@ -61,14 +64,14 @@
61
64
  border-radius: 0;
62
65
  min-width: 10rem;
63
66
  margin-right: 1.5rem;
64
- border: solid 0.1rem @border-grey;
65
- color: @text;
66
- background-color: @button-background;
67
+ border: solid 0.1rem var(--colour-border-grey);
68
+ color: var(--colour-text);
69
+ background-color: var(--colour-button-bg);
67
70
  cursor: pointer;
68
71
 
69
72
  &.dialog-button-primary {
70
- color: #fff;
71
- background-color: @workiva-green;
73
+ color: var(--colour-bg);
74
+ background-color: var(--colour-primary);
72
75
  border: none;
73
76
  }
74
77
  }
@@ -4,10 +4,10 @@ input[type="text"],
4
4
  select,
5
5
  button {
6
6
  padding: 7px 5px;
7
- border: solid 1px @border-grey;
7
+ border: solid 1px var(--colour-border-grey);
8
8
  border-radius: 5px;
9
- color: @text;
10
- background-color: #fff;
9
+ color: var(--colour-text);
10
+ background-color: unset;
11
11
  box-sizing: border-box;
12
12
  }
13
13
 
@@ -15,13 +15,14 @@ button {
15
15
  width: 3.2rem;
16
16
  height: 3.2rem;
17
17
  text-align: center;
18
- color: @icon-grey;
18
+ color: var(--colour-icon-grey);
19
19
  box-sizing: border-box;
20
20
  cursor: pointer;
21
21
  padding: 0;
22
22
  font-size: 2.2rem;
23
23
  line-height: 3.2rem;
24
24
  user-select: none;
25
+ border: none;
25
26
  }
26
27
 
27
28
  .square-button {
@@ -29,8 +30,8 @@ button {
29
30
 
30
31
  padding: 0;
31
32
  border-radius: 3px;
32
- border: solid 0.1rem @border-grey;
33
- background-color: @button-background;
33
+ border: solid 0.1rem var(--colour-border-grey);
34
+ background-color: var(--colour-button-bg);
34
35
  line-height: 3rem;
35
36
  margin: 0 0.5rem;
36
37
 
@@ -44,9 +45,9 @@ button {
44
45
  }
45
46
 
46
47
  .square-button.primary {
47
- color: #fff;
48
- border-color: @button-primary-border;
49
- background-color: @button-primary-bg;
48
+ color: var(--colour-bg);
49
+ border-color: var(--colour-button-primary-border);
50
+ background-color: var(--colour-button-primary-bg);
50
51
  }
51
52
 
52
53
  .wk-checkbox,
@@ -57,6 +58,11 @@ label.checkbox {
57
58
  user-select: none;
58
59
  line-height: 1.6rem;
59
60
 
61
+ &:focus-within {
62
+ outline: solid 0.2rem #000;
63
+ outline-offset: 0.3rem;
64
+ }
65
+
60
66
  input {
61
67
  position: absolute;
62
68
  opacity: 0;
@@ -73,7 +79,7 @@ label.checkbox {
73
79
  width: 1.6rem;
74
80
  height: 1.6rem;
75
81
  border-radius: 0.4rem;
76
- border: solid 0.1rem @border-grey;
82
+ border: solid 0.1rem var(--colour-border-grey);
77
83
  }
78
84
 
79
85
  input:checked ~ .checkmark::before {
@@ -83,7 +89,7 @@ label.checkbox {
83
89
  left: 0.4rem;
84
90
  width: 0.4rem;
85
91
  height: 1.1rem;
86
- border: solid @primary;
92
+ border: solid var(--colour-primary);
87
93
  border-width: 0 0.2rem 0.2rem 0;
88
94
  transform: rotate(45deg);
89
95
  }
@@ -92,3 +98,19 @@ label.checkbox {
92
98
  input:disabled {
93
99
  background-color: #eee;
94
100
  }
101
+
102
+ .inline-button {
103
+ display: inline;
104
+ cursor: pointer;
105
+ color: var(--colour-primary);
106
+ padding: 0.3rem;
107
+ border: none;
108
+ }
109
+
110
+ .bare-button {
111
+ display: inline;
112
+ cursor: pointer;
113
+ color: var(--colour-primary);
114
+ padding: 0.3rem;
115
+ border: none;
116
+ }