ode-csslib 4.0.5 → 4.0.7-dev.202301270853

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/dist/version.txt CHANGED
@@ -1 +1 @@
1
- entcore-css-lib=4.0.2 13/01/2023 16:11:43
1
+ entcore-css-lib=4.0-SNAPSHOT 27/01/2023 08:53:39
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ode-csslib",
3
- "version": "4.0.5",
3
+ "version": "4.0.7-dev.202301270853",
4
4
  "description": "Open Digital Education Legacy CSS framework",
5
5
  "scripts": {
6
6
  "copy-fonts": "cpr node_modules/entcore-generic-icons/fonts/ assets/fonts/generic-icons/ -o",
@@ -1,3 +1,14 @@
1
+ @font-face {
2
+ font-family: 'minibadge-icons';
3
+ src: url('/minibadge/public/font/material-design/fonts/materialdesignicons-webfont.eot');
4
+ src: url('/minibadge/public/font/material-design/fonts/materialdesignicons-webfont.eot') format('embedded-opentype'),
5
+ url('/minibadge/public/font/material-design/fonts/materialdesignicons-webfont.woff2') format('woff2'),
6
+ url('/minibadge/public/font/material-design/fonts/materialdesignicons-webfont.woff2') format('woff'),
7
+ url('/minibadge/public/font/material-design/fonts/materialdesignicons-webfont.ttf') format('truetype');
8
+ font-weight: normal;
9
+ font-style: normal;
10
+ }
11
+
1
12
  body.minibadge, .sniplet.minibadge {
2
13
  @import "mixins";
3
14
 
@@ -11,6 +22,12 @@ body.minibadge, .sniplet.minibadge {
11
22
  }
12
23
  }
13
24
 
25
+ .desktop-disabled {
26
+ @include desktop {
27
+ display: none;
28
+ }
29
+ }
30
+
14
31
  portal > div.main > section.main {
15
32
  @include mobile {
16
33
  padding: 0;
@@ -18,12 +35,24 @@ body.minibadge, .sniplet.minibadge {
18
35
  }
19
36
  }
20
37
 
21
- .minibadge-main-title {
22
- font-family: $minibadge-font-secondary;
23
- color: $minibadge-red;
38
+ .minibadge-button-title-settings {
39
+ margin-left: auto;
40
+ background: $minibadge-blue-dark;
41
+ right: 0;
42
+ @include mobile {
43
+ margin-right: 10px;
44
+ }
45
+ }
46
+
47
+ .minibadge-main {
48
+ &-title {
49
+ margin: 0;
50
+ font-family: $minibadge-font-secondary;
51
+ color: $minibadge-red;
24
52
 
25
- img {
26
- width: 34px;
53
+ img {
54
+ width: 34px;
55
+ }
27
56
  }
28
57
  }
29
58
 
@@ -30,7 +30,7 @@ $minibadge-font-secondary: 'Comfortaa', cursive;
30
30
  }
31
31
 
32
32
  @mixin tablet {
33
- @media (min-width: 769px) and (max-width:992px) {
33
+ @media (min-width: 769px) and (max-width: 992px) {
34
34
  @content;
35
35
  }
36
36
  }
@@ -81,4 +81,8 @@ $minibadge-font-secondary: 'Comfortaa', cursive;
81
81
 
82
82
  .minibadge-delete-button {
83
83
  background-color: $minibadge-grey-light;
84
+ }
85
+
86
+ .cursor-default {
87
+ cursor: default;
84
88
  }
@@ -5,6 +5,15 @@
5
5
  & * {
6
6
  cursor: default;
7
7
  }
8
+
9
+ .minibadge-card-footer {
10
+ background: $minibadge-blue-light;
11
+
12
+ &:hover {
13
+ background: initial;
14
+ }
15
+ }
16
+
8
17
  }
9
18
 
10
19
  &-list {
@@ -76,9 +85,11 @@
76
85
 
77
86
  minibadge-card-type-statistic {
78
87
  width: 100%;
88
+ height: 90px;
79
89
 
80
90
  .minibadge-card {
81
91
  flex: 1;
92
+ align-self: stretch;
82
93
 
83
94
  &-title {
84
95
  flex: none;
@@ -0,0 +1,9 @@
1
+ .minibadge-container-header {
2
+ button {
3
+ margin-right: 10px;
4
+
5
+ i {
6
+ line-height: 19px;
7
+ }
8
+ }
9
+ }
@@ -3,7 +3,7 @@
3
3
  flex: 1;
4
4
  row-gap: 8px;
5
5
  background: $minibadge-white;
6
- @include paddingXY(8px, 16px);
6
+ padding: 30px;
7
7
 
8
8
  &.disabled {
9
9
  opacity: 0.5;
@@ -2,6 +2,7 @@
2
2
  background-color: $minibadge-white;
3
3
  padding: 1em;
4
4
  border-radius: 10px;
5
+ margin-top: 30px;
5
6
 
6
7
  & i {
7
8
  margin: 0 1%;
@@ -1,114 +1,110 @@
1
1
  i {
2
2
  &.calendar-month::before{
3
- font-family: 'material-icons';
4
- content: "\FDFA";
3
+ font-family: 'minibadge-icons';
4
+ content: "\F0E17";
5
5
  }
6
6
  &.calendar-range::before {
7
- font-family: 'material-icons';
8
- content: "\F678";
7
+ font-family: 'minibadge-icons';
8
+ content: "\F0679";
9
9
  }
10
10
  &.trash::before{
11
- font-family: "material-icons";
12
- content: "\FA79";
11
+ font-family: "minibadge-icons";
12
+ content: "\F0A79";
13
13
  }
14
14
  &.sort-arrow-up::before{
15
- font-family: 'material-icons';
16
- content: "\F4BC";
15
+ font-family: 'minibadge-icons';
16
+ content: "\F04BD";
17
17
 
18
18
  }
19
19
  &.sort-arrow-down::before{
20
- font-family: 'material-icons';
21
- content: "\F4BD";
22
- }
23
- &.sort-arrow-up::before{
24
- font-family: 'material-icons';
25
- content: "\F4BC";
26
-
27
- }
28
- &.sort-arrow-down::before{
29
- font-family: 'material-icons';
30
- content: "\F4BD";
20
+ font-family: 'minibadge-icons';
21
+ content: "\F04BC";
31
22
  }
32
23
 
33
24
  &.user-circle::before {
34
- font-family: 'material-icons';
35
- content: "\F009";
25
+ font-family: 'minibadge-icons';
26
+ content: "\F0009";
36
27
  }
37
28
 
38
29
  &.close::before {
39
- font-family: 'material-icons';
40
- content: "\F156";
30
+ font-family: 'minibadge-icons';
31
+ content: "\F0156";
41
32
  }
42
33
 
43
34
  &.chevron-left::before {
44
- font-family: 'material-icons';
45
- content: "\F141";
35
+ font-family: 'minibadge-icons';
36
+ content: "\F0141";
46
37
  }
47
38
  &.target::before{
48
- font-family: "material-icons";
49
- content: "\F8C8";
39
+ font-family: "minibadge-icons";
40
+ content: "\F08C9";
50
41
  }
51
42
  &.human-arrow::before{
52
- font-family: "material-icons";
53
- content: "\FB2F";
43
+ font-family: "minibadge-icons";
44
+ content: "\F0B53";
54
45
  }
55
46
  &.star::before {
56
- font-family: 'material-icons';
57
- content: "\F4CE";
47
+ font-family: 'minibadge-icons';
48
+ content: "\F04CE";
58
49
  }
59
50
 
60
51
  &.icon-info::before {
61
- font-family: 'material-icons';
62
- content: "\F2FC";
52
+ font-family: 'minibadge-icons';
53
+ content: "\F02FC";
63
54
  }
64
55
 
65
56
  &.icon-info-circle::before {
66
- font-family: 'material-icons';
67
- content: "\F2FD";
57
+ font-family: 'minibadge-icons';
58
+ content: "\F02FD";
68
59
  }
69
60
 
70
61
  &.earth::before {
71
- font-family: 'material-icons';
72
- content: "\F1E7";
62
+ font-family: 'minibadge-icons';
63
+ content: "\F01E7";
73
64
  }
74
65
 
75
66
  &.dots-vertical::before {
76
- font-family: 'material-icons';
77
- content: "\F1D9";
67
+ font-family: 'minibadge-icons';
68
+ content: "\F01D9";
78
69
  }
79
70
 
80
71
  &.refused::before {
81
- font-family: 'material-icons';
82
- content: "\F697";
72
+ font-family: 'minibadge-icons';
73
+ content: "\F0376";
83
74
  }
84
75
 
85
76
  &.settings::before {
86
- font-family: 'material-icons';
87
- content: "\F493";
77
+ font-family: 'minibadge-icons';
78
+ content: "\F0493";
88
79
  }
89
80
 
90
81
  &.close-circle::before {
91
- font-family: 'material-icons';
92
- content: "\F159";
82
+ font-family: 'minibadge-icons';
83
+ content: "\F0159";
93
84
  }
94
85
 
95
86
  &.check-circle::before {
96
- font-family: 'material-icons';
97
- content: "\F5E0";
87
+ font-family: 'minibadge-icons';
88
+ content: "\F05E0";
98
89
  }
99
90
 
100
91
  &.check-decagram::before {
101
- font-family: 'material-icons';
102
- content: "\F790";
92
+ font-family: 'minibadge-icons';
93
+ content: "\F0791";
103
94
  }
104
95
 
105
96
  &.chevron::before {
106
- font-family: 'material-icons';
107
- content: "\F142";
97
+ font-family: 'minibadge-icons';
98
+ content: "\F0142";
108
99
  }
109
100
 
110
101
  &.trophy::before {
111
- font-family: 'material-icons';
112
- content: "\F538";
102
+ font-family: 'minibadge-icons';
103
+ content: "\F0538";
104
+ }
105
+
106
+ &.icon-badge::before {
107
+ font-family: 'minibadge-icons';
108
+ content: "\F0987";
113
109
  }
114
110
  }
@@ -13,4 +13,5 @@
13
13
  @import "list";
14
14
  @import "user-list";
15
15
  @import "paging";
16
- @import "container";
16
+ @import "container";
17
+ @import "container-header";
@@ -10,8 +10,26 @@
10
10
  align-items: center;
11
11
  overflow: hidden;
12
12
 
13
+ &-number {
14
+ align-self: baseline;
15
+ }
16
+
17
+ &-img {
18
+ margin-top: 0;
19
+ padding: 5px 0;
20
+ border-radius: 50%;
21
+ border: 1px solid transparent;
22
+ width: 30px;
23
+ height: 30px;
24
+ vertical-align: middle;
25
+ }
26
+
13
27
  &-distinction {
14
28
  color: $minibadge-grey;
29
+ flex-shrink: 0;
30
+ &-italic {
31
+ font-style: italic;
32
+ }
15
33
  }
16
34
 
17
35
  }
@@ -3,6 +3,7 @@
3
3
  background: $minibadge-white;
4
4
 
5
5
  @include desktop {
6
+ margin-top: 20px;
6
7
  text-transform: uppercase;
7
8
  }
8
9
 
@@ -1,7 +1,6 @@
1
1
  .periode-picker {
2
2
  &-container {
3
3
  position: relative;
4
- float: left;
5
4
  display: flex;
6
5
  align-items: center;
7
6
  column-gap: 10px;
@@ -15,7 +14,7 @@
15
14
  font-size: 16px;
16
15
  font-family: Roboto;
17
16
  color: $minibadge-grey-dark;
18
- border: none;
17
+ border: solid #ebebeb 2px;
19
18
  border-radius: 3px;
20
19
  @include mobile {
21
20
  width: 128px;
@@ -2,8 +2,7 @@
2
2
  margin-top: 20px;
3
3
  background: $minibadge-white;
4
4
  height: 100%;
5
- @include paddingY(15px);
6
- @include paddingX(15px);
5
+ padding: 15px;
7
6
 
8
7
  @include desktop {
9
8
  flex-direction: column;
@@ -13,6 +12,7 @@
13
12
 
14
13
  @include mobile {
15
14
  font-size: 16px;
15
+ margin-top: 10px;
16
16
  }
17
17
 
18
18
  > h2, h3 {
@@ -32,6 +32,8 @@
32
32
  }
33
33
 
34
34
  &-id {
35
+ margin-top: 10px;
36
+
35
37
  @include desktop {
36
38
  height: auto;
37
39
  width: auto;
@@ -49,6 +51,8 @@
49
51
  }
50
52
 
51
53
  &-description {
54
+ margin-top: 10px;
55
+
52
56
  @include desktop {
53
57
  flex: 1;
54
58
  }
@@ -18,16 +18,6 @@
18
18
  align-items: center;
19
19
  overflow: hidden;
20
20
 
21
- &-avatar {
22
- margin-top: 0;
23
- padding: 5px 0;
24
- border-radius: 50%;
25
- border: 1px solid transparent;
26
- width: 30px;
27
- height: 30px;
28
- vertical-align: middle;
29
- }
30
-
31
21
  &-precision {
32
22
  font-style: italic;
33
23
  }
@@ -1,14 +1,18 @@
1
1
  .badge-given{
2
2
  &-filter{
3
3
  display: flex;
4
- column-gap: 1%;
5
- align-items: center;
6
- margin: 1em 0;
4
+ align-items: end;
5
+ margin-top: 10px;
6
+
7
7
  @include mobile{
8
8
  margin-left: 8px;
9
9
  }
10
+
11
+ .periode-picker-container {
12
+ margin-right: 10px;
13
+ }
10
14
  }
11
15
  &-search{
12
- margin: 0;
16
+ margin-top: revert;
13
17
  }
14
18
  }
@@ -19,9 +19,5 @@
19
19
  @include marginX(10px);
20
20
  }
21
21
  }
22
-
23
- i.settings:hover {
24
- color: $minibadge-orange;
25
- }
26
22
  }
27
23
 
@@ -1,10 +1,12 @@
1
1
  .minibadge-statistics {
2
+ line-height: 30px;
3
+
2
4
  .minibadge-container-component {
3
5
  h3 > .minibadge-title {
4
6
  font-weight: bold;
5
7
  }
6
8
 
7
- &-body > container-body {
9
+ &-body > container-body, .minibadge-statistics-cards, .minibadge-statistics-badges {
8
10
  gap: 50px
9
11
  }
10
12
  }
@@ -25,6 +27,7 @@
25
27
  .minibadge-container-card {
26
28
  flex: 1;
27
29
  justify-content: center;
30
+ padding: 30px;
28
31
 
29
32
  .minibadge-title {
30
33
  font-size: 30px;
@@ -43,13 +46,15 @@
43
46
 
44
47
  &-top-structures {
45
48
  flex: 5;
49
+ }
46
50
 
47
- .minibadge-container-card-title {
48
- display: none;
49
- }
51
+ &-top-assigning, &-top-receiving {
52
+ flex: 1;
53
+ }
50
54
 
55
+
56
+ &-top-structures, &-top-assigning, &-top-receiving {
51
57
  .minibadge-card {
52
- flex: 1;
53
58
  background: $minibadge-white;
54
59
  border: none;
55
60
  color: $minibadge-orange;
@@ -67,11 +72,11 @@
67
72
  }
68
73
 
69
74
  &-list {
70
- flex: 3;
75
+ flex: 1;
71
76
  }
72
77
  }
73
78
 
74
- &-most-allowed {
79
+ &-top-most-allowed {
75
80
  flex: 5;
76
81
 
77
82
  .check-circle {
@@ -79,7 +84,7 @@
79
84
  }
80
85
  }
81
86
 
82
- &-most-refused {
87
+ &-top-most-refused {
83
88
  flex: 4;
84
89
 
85
90
  .close-circle {
@@ -97,33 +102,69 @@
97
102
 
98
103
  .minibadge-most-assigned {
99
104
  padding: 10px;
100
- align-items: stretch;
105
+ align-items: center;
106
+
107
+ &-detail {
108
+ flex: 3;
109
+ }
110
+
111
+ &-others {
112
+ flex: 3;
113
+ }
114
+
115
+ minibadge-card-type {
116
+ flex: 2;
117
+ }
118
+
119
+ .minibadge-list-item-display, .minibadge-list-item-distinction {
120
+ flex: 1;
121
+ overflow: auto;
122
+ }
101
123
  }
102
124
  }
103
125
 
104
- .minibadge-most-assigned-detail, .minibadge-most-assigned-others {
105
- flex: 1;
106
- line-height: 30px;
126
+ .minibadge-most-assigned-detail {
127
+ flex: 2;
128
+ }
129
+
130
+ .minibadge-most-assigned-others {
131
+ flex: 3;
107
132
  }
108
133
 
109
134
  minibadge-card-type {
110
135
  .minibadge-card {
111
- height: 146px;
112
- width: 176px;
136
+ height: 176px;
137
+ width: 100%;
113
138
  }
114
139
  }
115
140
 
116
141
  }
142
+
143
+ .minibadge-statistics-most-allowed {
144
+ i.trophy {
145
+ color: $minibadge-orange;
146
+ }
147
+ }
148
+
117
149
  }
118
150
 
119
151
  minibadge-card-type-statistic {
152
+ padding: 10px;
153
+
120
154
  .minibadge-card {
121
155
  height: auto;
156
+
122
157
  .minibadge-card-body {
123
- flex: revert;
158
+ align-self: stretch;
159
+
160
+ container-body {
161
+ align-self: stretch;
162
+ }
163
+
124
164
  .minibadge-card-picture {
125
165
  flex: revert;
126
166
  @include marginX(10px);
167
+ height: 100%;
127
168
  }
128
169
  }
129
170
  }
@@ -6,8 +6,9 @@ $rbs-dimgrey: #696969;
6
6
  $rbs-green: #09ac00;
7
7
  $rbs-red: #dd0000;
8
8
 
9
- body.rbs {
10
- @import "./components/index";
9
+
10
+ body.rbs, .sniplet.rbs {
11
+ @import "components/index";
11
12
 
12
13
  .input-size {
13
14
  width: 40px;
@@ -1,4 +1,5 @@
1
1
  @import "icons";
2
2
  @import "check-boxes";
3
3
  @import "resource-table";
4
- @import "calendar";
4
+ @import "calendar";
5
+ @import "sniplets";
@@ -0,0 +1,17 @@
1
+ .sniplet.calendarBooking {
2
+
3
+ &-bookingFormBody {
4
+ float: unset !important;
5
+ }
6
+
7
+ &-bookingInfoBox {
8
+ border: 1px solid;
9
+ border-color: rgba($darkest-grey, 0.2);
10
+ border-radius: 2px;
11
+
12
+ &-bookingInfo {
13
+ color: unset;
14
+ }
15
+ }
16
+
17
+ }