blue-react 6.9.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 (74) hide show
  1. package/README.md +36 -0
  2. package/dist/ActionMenu.js +122 -0
  3. package/dist/ActionMenuItem.js +110 -0
  4. package/dist/ActionMenuSwitch.js +98 -0
  5. package/dist/Actions.js +178 -0
  6. package/dist/Body.js +89 -0
  7. package/dist/Caret.js +71 -0
  8. package/dist/DocumentView.js +138 -0
  9. package/dist/FluentBtn.js +100 -0
  10. package/dist/FormSwitch.js +75 -0
  11. package/dist/Grid.js +341 -0
  12. package/dist/Header.js +66 -0
  13. package/dist/HeaderActions.js +75 -0
  14. package/dist/HeaderTitle.js +137 -0
  15. package/dist/Intro.js +108 -0
  16. package/dist/MenuItem.js +204 -0
  17. package/dist/Page.js +64 -0
  18. package/dist/Search.js +203 -0
  19. package/dist/SidebarMenu.js +153 -0
  20. package/dist/Switch.js +89 -0
  21. package/dist/SwitchMenuItem.js +65 -0
  22. package/dist/Utilities.js +173 -0
  23. package/dist/style/_actions.scss +109 -0
  24. package/dist/style/_actions_deprecated.scss +58 -0
  25. package/dist/style/_bootstrap-mixins_overwritten.scss +54 -0
  26. package/dist/style/_bootstrap-optimizations.scss +28 -0
  27. package/dist/style/_bootstrap.scss +45 -0
  28. package/dist/style/_caret.scss +50 -0
  29. package/dist/style/_document-view.scss +5 -0
  30. package/dist/style/_fluent.scss +38 -0
  31. package/dist/style/_form-switch.scss +74 -0
  32. package/dist/style/_general.scss +154 -0
  33. package/dist/style/_grid.scss +316 -0
  34. package/dist/style/_keyframes.scss +68 -0
  35. package/dist/style/_mixins.scss +7 -0
  36. package/dist/style/_ripple.scss +26 -0
  37. package/dist/style/_router.scss +18 -0
  38. package/dist/style/_search.scss +48 -0
  39. package/dist/style/_status.scss +138 -0
  40. package/dist/style/_switch.scss +22 -0
  41. package/dist/style/_variables.scss +91 -0
  42. package/dist/style/mixins/_actions.scss +59 -0
  43. package/dist/style/mixins/_actions_deprecated.scss +54 -0
  44. package/dist/style/mixins/_custom-property.scss +10 -0
  45. package/dist/style/mixins/_misc.scss +28 -0
  46. package/dist/style/mixins/_scroll-shadow.scss +10 -0
  47. package/dist/style/mixins/_sidebar.scss +114 -0
  48. package/dist/style/mixins/_switch.scss +77 -0
  49. package/dist/style.css +8518 -0
  50. package/dist/style.scss +36 -0
  51. package/dist/types/ActionMenu.d.ts +15 -0
  52. package/dist/types/ActionMenuItem.d.ts +33 -0
  53. package/dist/types/ActionMenuSwitch.d.ts +19 -0
  54. package/dist/types/Actions.d.ts +35 -0
  55. package/dist/types/Body.d.ts +24 -0
  56. package/dist/types/Caret.d.ts +21 -0
  57. package/dist/types/DocumentView.d.ts +30 -0
  58. package/dist/types/FluentBtn.d.ts +29 -0
  59. package/dist/types/Grid.d.ts +49 -0
  60. package/dist/types/Header.d.ts +6 -0
  61. package/dist/types/HeaderActions.d.ts +16 -0
  62. package/dist/types/HeaderTitle.d.ts +25 -0
  63. package/dist/types/Intro.d.ts +29 -0
  64. package/dist/types/MenuItem.d.ts +54 -0
  65. package/dist/types/Page.d.ts +8 -0
  66. package/dist/types/Search.d.ts +30 -0
  67. package/dist/types/SidebarMenu.d.ts +39 -0
  68. package/dist/types/Switch.d.ts +26 -0
  69. package/dist/types/SwitchMenuItem.d.ts +15 -0
  70. package/dist/types/Utilities.d.ts +55 -0
  71. package/dist/types/shared.d.ts +1 -0
  72. package/index.d.ts +62 -0
  73. package/index.js +20 -0
  74. package/package.json +56 -0
@@ -0,0 +1,54 @@
1
+ /**
2
+ * This will overwrite button-variant mixin from Bootstrap: On hover buttons will get lighter instead of darker
3
+ */
4
+
5
+ @mixin button-variant($background, $border, $hover-background: lighten($background, 7.5%), $hover-border: lighten($border, 10%), $active-background: lighten($background, 10%), $active-border: lighten($border, 12.5%)) {
6
+ color: color-yiq($background);
7
+ @include gradient-bg($background);
8
+ border-color: $border;
9
+ @include box-shadow($btn-box-shadow);
10
+
11
+ @include hover {
12
+ color: color-yiq($background);
13
+ @include gradient-bg($hover-background);
14
+ border-color: $hover-border;
15
+ }
16
+
17
+ &:focus,
18
+ &.focus {
19
+ // Avoid using mixin so we can pass custom focus shadow properly
20
+ @if $enable-shadows {
21
+ box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
22
+ } @else {
23
+ box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
24
+ }
25
+ }
26
+
27
+ // Disabled comes first so active can properly restyle
28
+ &.disabled,
29
+ &:disabled {
30
+ color: color-yiq($background);
31
+ background-color: $background;
32
+ border-color: $border;
33
+ }
34
+
35
+ &:not(:disabled):not(.disabled):active,
36
+ &:not(:disabled):not(.disabled).active,
37
+ .show > &.dropdown-toggle {
38
+ color: color-yiq($background);
39
+ background-color: $active-background;
40
+ @if $enable-gradients {
41
+ background-image: none; // Remove the gradient for the pressed/active state
42
+ }
43
+ border-color: $active-border;
44
+
45
+ &:focus {
46
+ // Avoid using mixin so we can pass custom focus shadow properly
47
+ @if $enable-shadows {
48
+ box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
49
+ } @else {
50
+ box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
51
+ }
52
+ }
53
+ }
54
+ }
@@ -0,0 +1,28 @@
1
+ .container,
2
+ .container-fluid {
3
+ &:before {
4
+ content: "";
5
+ display: table;
6
+ }
7
+ }
8
+
9
+ @include media-breakpoint-up(sm) {
10
+ .form-horizontal .col-form-label {
11
+ text-align: right;
12
+ }
13
+ }
14
+
15
+ .form-control:not(.default) {
16
+ border-top-color: transparent;
17
+ border-left: none;
18
+ border-right: none;
19
+ border-radius: 0;
20
+
21
+ &:not(:disabled):not([readonly]) {
22
+ background-color: transparent;
23
+ }
24
+
25
+ &:focus {
26
+ box-shadow: 0 1px 0 0 $input-focus-border-color;
27
+ }
28
+ }
@@ -0,0 +1,45 @@
1
+ /*!
2
+ * Bootstrap v4.3.1 (https://getbootstrap.com/)
3
+ * Copyright 2011-2019 The Bootstrap Authors
4
+ * Copyright 2011-2019 Twitter, Inc.
5
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
6
+ */
7
+
8
+ @import "node_modules/bootstrap/scss/functions";
9
+ @import "node_modules/bootstrap/scss/variables";
10
+ @import "node_modules/bootstrap/scss/mixins";
11
+ @import "./_bootstrap-mixins_overwritten.scss";
12
+ @import "node_modules/bootstrap/scss/root";
13
+ @import "node_modules/bootstrap/scss/reboot";
14
+ @import "node_modules/bootstrap/scss/type";
15
+ @import "node_modules/bootstrap/scss/images";
16
+ @import "node_modules/bootstrap/scss/code";
17
+ @import "node_modules/bootstrap/scss/grid";
18
+ @import "node_modules/bootstrap/scss/tables";
19
+ @import "node_modules/bootstrap/scss/forms";
20
+ @import "node_modules/bootstrap/scss/buttons";
21
+ @import "node_modules/bootstrap/scss/transitions";
22
+ @import "node_modules/bootstrap/scss/dropdown";
23
+ @import "node_modules/bootstrap/scss/button-group";
24
+ @import "node_modules/bootstrap/scss/input-group";
25
+ @import "node_modules/bootstrap/scss/custom-forms";
26
+ @import "node_modules/bootstrap/scss/nav";
27
+ @import "node_modules/bootstrap/scss/navbar";
28
+ @import "node_modules/bootstrap/scss/card";
29
+ @import "node_modules/bootstrap/scss/breadcrumb";
30
+ @import "node_modules/bootstrap/scss/pagination";
31
+ @import "node_modules/bootstrap/scss/badge";
32
+ @import "node_modules/bootstrap/scss/jumbotron";
33
+ @import "node_modules/bootstrap/scss/alert";
34
+ @import "node_modules/bootstrap/scss/progress";
35
+ @import "node_modules/bootstrap/scss/media";
36
+ @import "node_modules/bootstrap/scss/list-group";
37
+ @import "node_modules/bootstrap/scss/close";
38
+ @import "node_modules/bootstrap/scss/modal";
39
+ @import "node_modules/bootstrap/scss/tooltip";
40
+ @import "node_modules/bootstrap/scss/popover";
41
+ @import "node_modules/bootstrap/scss/carousel";
42
+ @import "node_modules/bootstrap/scss/spinners";
43
+ @import "node_modules/bootstrap/scss/utilities";
44
+ @import "node_modules/bootstrap/scss/print";
45
+
@@ -0,0 +1,50 @@
1
+ .caret {
2
+ /* treat like a font icon */
3
+ font-family: 'blueicon' !important;
4
+ speak: none;
5
+ font-style: normal;
6
+ font-weight: normal;
7
+ font-variant: normal;
8
+ text-transform: none;
9
+ line-height: 1;
10
+ -webkit-font-smoothing: antialiased;
11
+ -moz-osx-font-smoothing: grayscale;
12
+
13
+ font-size: 1.15em;
14
+ position: relative;
15
+ top: 1px;
16
+ display: inline-block;
17
+ /* END treat like a font icon */
18
+
19
+ --caret-size: .5em;
20
+ --caret-strength: .09em;
21
+
22
+ width: 1em;
23
+
24
+ &::before {
25
+ content: "";
26
+ display: block;
27
+ position: absolute;
28
+ top: 50%;
29
+ left: 50%;
30
+ width: var(--caret-size);
31
+ height: var(--caret-size);
32
+ background: transparent;
33
+ box-shadow: var(--caret-strength) var(--caret-strength) 0 currentColor;
34
+ transform: rotate(-45deg) translate(-50%, -50%);
35
+ margin-top: calc((var(--caret-size) + var(--caret-strength)) * -1);
36
+ transition: all .2s;
37
+ }
38
+
39
+ &.caret-mirrored {
40
+ &::before {
41
+ transform: rotate(135deg) translate(-50%, -50%);
42
+ }
43
+ }
44
+
45
+ &.caret-open {
46
+ &::before {
47
+ transform: rotate(45deg) translate(-50%, -50%);
48
+ }
49
+ }
50
+ }
@@ -0,0 +1,5 @@
1
+ .document-view-iframe {
2
+ border: none;
3
+ width: 100%;
4
+ height: calc(100vh - 110px);
5
+ }
@@ -0,0 +1,38 @@
1
+ $btn-ball-size: $normal-size * 6;
2
+
3
+ @mixin fluent-btn($fluent-halo-color) {
4
+ position: relative;
5
+ overflow: hidden;
6
+
7
+ &:not(.active) {
8
+ &:hover .fluent-btn-ball {
9
+ opacity: $fluent-halo-opacity;
10
+ }
11
+
12
+ &:active .fluent-btn-ball {
13
+ // background-image: radial-gradient(rgba($fluent-halo-color, .5), rgba($fluent-halo-color, 1), rgba($fluent-halo-color, 0), rgba($fluent-halo-color, 0));
14
+ width: $normal-size * 3;
15
+ height: $normal-size * 3;
16
+ }
17
+ }
18
+
19
+ .fluent-btn-ball {
20
+ position: absolute;
21
+ opacity: 0;
22
+ width: $btn-ball-size;
23
+ height: $btn-ball-size;
24
+ border-radius: 50%;
25
+ transform: translate(-50%, -50%);
26
+ top: 50%; left: 50%;
27
+ background-image: radial-gradient(rgba($fluent-halo-color, 1), rgba($fluent-halo-color, 0), rgba($fluent-halo-color, 0));
28
+ transition: opacity .5s, backgrund-image .5s;
29
+ }
30
+ }
31
+
32
+ .fluent-btn {
33
+ @include fluent-btn($fluent-halo-color);
34
+
35
+ &.light {
36
+ @include fluent-btn($gray-500);
37
+ }
38
+ }
@@ -0,0 +1,74 @@
1
+ .form-switch {
2
+ --form-switch-bg: #{$gray-200};
3
+ --form-switch-checked-bg: #{$success};
4
+
5
+ position: relative;
6
+ display: inline-block;
7
+ cursor: pointer;
8
+ -webkit-tap-highlight-color: transparent;
9
+ i {
10
+ position: relative;
11
+ display: inline-block;
12
+ top: 3px;
13
+ width: 46px;
14
+ height: 26px;
15
+ background-color: var(--form-switch-bg);
16
+ border-radius: 23px;
17
+ vertical-align: text-bottom;
18
+ transition: all 0.3s linear;
19
+ &::before {
20
+ content: "";
21
+ position: absolute;
22
+ left: 0;
23
+ width: 42px;
24
+ height: 22px;
25
+ background-color: transparent;
26
+ border-radius: 11px;
27
+ transform: translate3d(2px,2px,0) scale3d(1,1,1);
28
+ transition: all 0.25s linear;
29
+ }
30
+ &::after {
31
+ content: "";
32
+ position: absolute;
33
+ left: 0;
34
+ width: 22px;
35
+ height: 22px;
36
+ background-color: #fff;
37
+ border-radius: 11px;
38
+ box-shadow: 0 2px 2px rgba(0,0,0,0.24);
39
+ transform: translate3d(2px,2px,0);
40
+ transition: all 0.2s ease-in-out;
41
+ }
42
+ }
43
+ &:active {
44
+ i::after {
45
+ width: 28px;
46
+ transform: translate3d(2px,2px,0);
47
+ }
48
+ input {
49
+ &:checked + i::after {
50
+ transform: translate3d(16px,2px,0);
51
+ }
52
+ }
53
+ }
54
+ input {
55
+ position: absolute;
56
+ opacity: 0;
57
+ pointer-events: none;
58
+ &:checked + i {
59
+ background-color: var(--form-switch-checked-bg);
60
+ &::before {
61
+ transform: translate3d(18px,2px,0) scale3d(0,0,0);
62
+ }
63
+ &::after {
64
+ transform: translate3d(22px,2px,0);
65
+ }
66
+ }
67
+ }
68
+ }
69
+
70
+ .blue-app-actions {
71
+ .form-switch {
72
+ --form-switch-bg: rgba(255, 255, 255, 0.2);
73
+ }
74
+ }
@@ -0,0 +1,154 @@
1
+ :root {
2
+ --sidebar-bg: #{$sidebar-bg};
3
+ --action-link-bg-color: var(--theme);
4
+ }
5
+
6
+ @include custom-scrollbar($scrollbar-thumb-color, $theme);
7
+
8
+ /* Versteckt Clear-Button für input[type="search"], da Blue bereits selbst Clear-Buttons liefert */
9
+ input[type="search"]::-webkit-search-decoration,
10
+ input[type="search"]::-webkit-search-cancel-button,
11
+ input[type="search"]::-webkit-search-results-button,
12
+ input[type="search"]::-webkit-search-results-decoration {
13
+ -webkit-appearance:none;
14
+ }
15
+
16
+ @media screen and (min-width: 768px) {
17
+ ::-webkit-scrollbar {
18
+ height: 1rem;
19
+ overflow: visible;
20
+ width: 1rem
21
+ }
22
+ ::-webkit-scrollbar-thumb {
23
+ background-clip: padding-box;
24
+ border: solid transparent;
25
+ border-width: 1px;
26
+ min-height: 28px;
27
+ padding: 100px 0 0;
28
+ border-radius: .3rem;
29
+ }
30
+ ::-webkit-scrollbar-button {
31
+ height: 0;
32
+ width: 0
33
+ }
34
+ ::-webkit-scrollbar-track {
35
+ border: solid transparent;
36
+ border-width: 0 0 0 4px
37
+ }
38
+ ::-webkit-scrollbar-corner {
39
+ background: 0 0
40
+ }
41
+ }
42
+
43
+ html, body {
44
+ height: 100%;
45
+ }
46
+
47
+ body {
48
+ background: $theme;
49
+
50
+ .blue-app-wrapper {
51
+ position: fixed;
52
+ width: 100%; width: 100%;
53
+ left: 0; right: 0; top: 0; bottom: 0;
54
+ z-index: 1;
55
+ display: none;
56
+ }
57
+
58
+ &.open {
59
+ .blue-app-wrapper {
60
+ display: block;
61
+ }
62
+ }
63
+ }
64
+
65
+ h1, h2 {
66
+ font-weight: 300;
67
+ }
68
+
69
+ label {
70
+ font-weight: 600;
71
+ }
72
+
73
+ // Idee für Effekt von http://www.w3schools.com/howto/howto_css_animate_buttons.asp
74
+ .btn,
75
+ .nav-pills>li>a,
76
+ .pager li>a,
77
+ .pagination>li>a,
78
+ .list-group a.list-group-item {
79
+ &:not(.disabled):not(.readonly):not(.dropdown-toggle) {
80
+ -webkit-transition: background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;
81
+ transition: background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;
82
+ position: relative;
83
+
84
+ &:hover,
85
+ &:active,
86
+ &:focus {
87
+ z-index: 1;
88
+ }
89
+ }
90
+ }
91
+
92
+ .page-link {
93
+ &:hover,
94
+ &:focus {
95
+ text-decoration: none;
96
+ }
97
+ }
98
+
99
+ .page-header {
100
+ padding-bottom: 9px;
101
+ margin: 40px 0 20px;
102
+ border-bottom: 1px solid $table-border-color;
103
+ }
104
+
105
+ .dark-area {
106
+ background-color: $gray-900;
107
+ color: #fff;
108
+
109
+ a:not(.btn) {
110
+ color: lighten($link-color, 15%);
111
+
112
+ &:hover,
113
+ &:focus {
114
+ color: lighten($link-color, 30%);
115
+ }
116
+ }
117
+ }
118
+
119
+ .alert-dismissible .close {
120
+ top: -6px;
121
+ }
122
+
123
+ .blue-app-wrapper {
124
+ z-index: 3 !important;
125
+
126
+ &.active {
127
+ display: block;
128
+ }
129
+ }
130
+
131
+ @media screen and (max-width: 768px) {
132
+ .blue-app-header-extension .blue-app-header-logo-title-labels:not(.keep) {
133
+ display: none;
134
+ }
135
+ }
136
+
137
+ .sign-in-screen {
138
+ padding-top: $normal-size;
139
+
140
+ .sign-in-container {
141
+ animation: enabledBlueAppPage .5s;
142
+ }
143
+
144
+ .jumbotron {
145
+ background-color: $body-bg;
146
+ }
147
+
148
+ @media screen and (min-width: 768px) {
149
+ .sign-in-container {
150
+ padding: 0 calc(50% - 18rem);
151
+ width: auto;
152
+ }
153
+ }
154
+ }