Skip to content

Commit 343147f

Browse files
author
unknown
committed
1.0.0-alpha3
1 parent 940a5c5 commit 343147f

34 files changed

+1502
-12
lines changed

‎CHANGELOG.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
## 1.0.0-alpha3 (22.02.2021)
2+
3+
### New components:
4+
5+
- [Dropdown](https://mdbootstrap.com/docs/b5/angular/components/dropdowns/)
6+
- [Modal](https://mdbootstrap.com/docs/b5/angular/components/modal/)
7+
- [Select](https://mdbootstrap.com/docs/b5/angular/forms/select/)
8+
- [Scrollbar](https://mdbootstrap.com/docs/b5/angular/methods/scrollbar/)
9+
110
## 1.0.0-alpha2 (25.01.2021)
211

312
### New components:

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mdb-angular-ui-kit-free",
3-
"version": "1.0.0-alpha2",
3+
"version": "1.0.0-alpha3",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",

‎projects/mdb-angular-ui-kit/CHANGELOG.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
## 1.0.0-alpha3 (22.02.2021)
2+
3+
### New components:
4+
5+
- [Dropdown](https://mdbootstrap.com/docs/b5/angular/components/dropdowns/)
6+
- [Modal](https://mdbootstrap.com/docs/b5/angular/components/modal/)
7+
- [Select](https://mdbootstrap.com/docs/b5/angular/forms/select/)
8+
- [Scrollbar](https://mdbootstrap.com/docs/b5/angular/methods/scrollbar/)
9+
110
## 1.0.0-alpha2 (25.01.2021)
211

312
### New components:

‎projects/mdb-angular-ui-kit/assets/scss/free/_dropdown.scss

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
.dropdown-menu {
2+
color: $dropdown-color;
3+
margin: $dropdown-margin-top 0 0;
4+
padding-top: 0;
5+
padding-bottom: 0;
6+
border: 0;
7+
box-shadow: $dropdown-box-shadow;
8+
font-size: $dropdown-font-size;
9+
display: block;
10+
position: inherit;
11+
> li {
12+
border-radius: 0;
13+
&:first-child {
14+
border-top-left-radius: $dropdown-item-border-radius;
15+
border-top-right-radius: $dropdown-item-border-radius;
16+
border-bottom-left-radius: 0;
17+
border-bottom-right-radius: 0;
18+
.dropdown-item {
19+
border-top-left-radius: $dropdown-item-border-radius;
20+
border-top-right-radius: $dropdown-item-border-radius;
21+
border-bottom-left-radius: 0;
22+
border-bottom-right-radius: 0;
23+
}
24+
}
25+
26+
&:not(:first-child):not(:last-child) {
27+
.dropdown-item {
28+
border-radius: 0;
29+
}
30+
}
31+
32+
&:last-child {
33+
border-top-left-radius: 0;
34+
border-top-right-radius: 0;
35+
border-bottom-left-radius: $dropdown-item-border-radius;
36+
border-bottom-right-radius: $dropdown-item-border-radius;
37+
.dropdown-item {
38+
border-top-left-radius: 0;
39+
border-top-right-radius: 0;
40+
border-bottom-left-radius: $dropdown-item-border-radius;
41+
border-bottom-right-radius: $dropdown-item-border-radius;
42+
}
43+
}
44+
}
45+
}
46+
47+
.dropdown-item {
48+
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
49+
color: $dropdown-color;
50+
border-radius: 0;
51+
52+
&:hover,
53+
&:focus {
54+
color: $dropdown-state-color;
55+
background-color: $dropdown-state-background-color;
56+
}
57+
58+
&.active,
59+
&:active {
60+
color: $dropdown-state-color;
61+
background-color: $dropdown-state-background-color;
62+
}
63+
}
64+
65+
.hidden-arrow {
66+
&.dropdown-toggle:after {
67+
display: none;
68+
}
69+
}

‎projects/mdb-angular-ui-kit/assets/scss/free/_modal.scss

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Modal
2+
.modal-content {
3+
border: 0;
4+
box-shadow: $modal-box-shadow;
5+
}
6+
7+
.mdb-backdrop {
8+
background-color: rgba(0, 0, 0, 0.5);
9+
transition: opacity 0.15s linear;
10+
}
11+
12+
.modal-dynamic > :first-child {
13+
display: flex;
14+
flex-direction: column;
15+
height: 100%;
16+
}
17+
18+
.modal-dialog-scrollable {
19+
height: subtract(100%, $modal-dialog-margin * 2);
20+
21+
.modal-content,
22+
.modal-content > :first-child {
23+
max-height: 100%;
24+
overflow: hidden;
25+
display: flex;
26+
flex-direction: column;
27+
}
28+
29+
.modal-body {
30+
overflow-y: auto;
31+
}
32+
}

‎projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-control.scss

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,145 @@ mdb-form-control {
2727
}
2828
}
2929

30+
.select {
31+
~ .form-label {
32+
position: absolute;
33+
top: 0;
34+
left: $form-label-left;
35+
padding-top: $form-label-padding-top;
36+
pointer-events: none;
37+
transform-origin: 0 0;
38+
transition: $form-label-transition;
39+
color: $form-label-color;
40+
margin-bottom: 0;
41+
}
42+
~ .form-notch {
43+
display: flex;
44+
position: absolute;
45+
left: 0;
46+
top: 0;
47+
width: 100%;
48+
max-width: 100%;
49+
height: 100%;
50+
text-align: left;
51+
pointer-events: none;
52+
div {
53+
pointer-events: none;
54+
border: $border-width solid;
55+
border-color: $form-notch-div-border-color;
56+
box-sizing: border-box;
57+
background: transparent;
58+
}
59+
.form-notch-leading {
60+
left: 0;
61+
top: 0;
62+
height: 100%;
63+
width: $form-notch-leading-width;
64+
border-right: none;
65+
border-radius: $form-notch-leading-border-radius 0 0 $form-notch-leading-border-radius;
66+
}
67+
.form-notch-middle {
68+
flex: 0 0 auto;
69+
width: auto;
70+
max-width: calc(100% - #{$form-notch-middle-max-width});
71+
height: 100%;
72+
border-right: none;
73+
border-left: none;
74+
}
75+
.form-notch-trailing {
76+
flex-grow: 1;
77+
height: 100%;
78+
border-left: none;
79+
border-radius: 0 $form-notch-trailing-border-radius $form-notch-trailing-border-radius 0;
80+
}
81+
}
82+
&.form-control:not(.placeholder-active)::placeholder {
83+
opacity: 0;
84+
}
85+
& .form-control:focus,
86+
&.active {
87+
&::placeholder {
88+
opacity: 1;
89+
}
90+
}
91+
& .form-control:focus {
92+
box-shadow: none !important;
93+
}
94+
// &:focus ~ .form-label,
95+
&.active ~ .form-label {
96+
transform: $input-focus-active-label-transform;
97+
}
98+
& .form-control:focus ~ .form-label {
99+
color: $input-focus-label-color;
100+
}
101+
& .form-control:focus ~ .form-notch .form-notch-middle,
102+
& .form-control.active ~ .form-notch .form-notch-middle {
103+
border-top: none;
104+
border-right: none;
105+
border-left: none;
106+
transition: $input-transition;
107+
}
108+
&:focus ~ .form-notch .form-notch-middle {
109+
border-bottom: $input-focus-border-width solid;
110+
border-color: $input-focus-border-color;
111+
}
112+
&:focus ~ .form-notch .form-notch-leading,
113+
&.active ~ .form-notch .form-notch-leading {
114+
border-right: none;
115+
transition: $input-transition;
116+
}
117+
&:focus ~ .form-notch .form-notch-leading {
118+
border-top: $input-focus-border-width solid $input-focus-border-color;
119+
border-bottom: $input-focus-border-width solid $input-focus-border-color;
120+
border-left: $input-focus-border-width solid $input-focus-border-color;
121+
}
122+
&:focus ~ .form-notch .form-notch-trailing,
123+
&.active ~ .form-notch .form-notch-trailing {
124+
border-left: none;
125+
transition: $input-transition;
126+
}
127+
&:focus ~ .form-notch .form-notch-trailing {
128+
border-top: $input-focus-border-width solid;
129+
border-bottom: $input-focus-border-width solid;
130+
border-right: $input-focus-border-width solid;
131+
border-color: $input-focus-border-color;
132+
}
133+
&:disabled,
134+
&.disabled,
135+
&[readonly] {
136+
background-color: $input-disabled-background-color;
137+
}
138+
&.form-control-lg {
139+
font-size: $input-font-size-lg;
140+
line-height: $input-line-height-lg;
141+
padding-left: $input-padding-left-lg;
142+
padding-right: $input-padding-right-lg;
143+
~ .form-label {
144+
padding-top: $form-label-padding-top-lg;
145+
}
146+
&:focus ~ .form-label,
147+
&.active ~ .form-label {
148+
transform: $input-focus-active-label-transform-lg;
149+
}
150+
}
151+
&.form-control-sm {
152+
padding-left: $input-padding-left-sm;
153+
padding-right: $input-padding-right-sm;
154+
padding-top: $input-padding-top-sm;
155+
padding-bottom: $input-padding-bottom-sm;
156+
font-size: $input-font-size-sm;
157+
line-height: $input-line-height-sm;
158+
~ .form-label {
159+
padding-top: $form-label-padding-top-sm;
160+
font-size: $form-label-font-size-sm;
161+
}
162+
&:focus ~ .form-label,
163+
&.active ~ .form-label {
164+
transform: $input-focus-active-label-transform-sm;
165+
}
166+
}
167+
}
168+
30169
.form-outline {
31170
position: relative;
32171
.form-control {

‎projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-select.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Select
2+
3+
.select-input {
4+
&.form-control {
5+
&[readonly]:not([disabled]) {
6+
background-color: transparent;
7+
}
8+
}
9+
}

‎projects/mdb-angular-ui-kit/assets/scss/free/forms/_input-group.scss

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
//
2+
// Base styles
3+
//
4+
5+
.input-group {
6+
> .form-control {
7+
min-height: $input-group-min-height;
8+
height: $input-group-height;
9+
padding-top: $input-group-padding-y;
10+
padding-bottom: $input-group-padding-y;
11+
transition: $input-group-transition;
12+
13+
&:focus {
14+
transition: $input-group-focus-transition;
15+
border-color: $input-group-focus-border-color;
16+
outline: 0;
17+
box-shadow: $input-group-focus-box-shadow;
18+
}
19+
}
20+
}
21+
22+
.input-group-text {
23+
background-color: transparent;
24+
padding-top: $input-group-text-padding-y;
25+
padding-bottom: $input-group-text-padding-y;
26+
}
27+
28+
.input-group-lg {
29+
> .form-control {
30+
height: $input-group-lg-height;
31+
font-size: $input-group-lg-font-size;
32+
padding-top: $input-group-lg-padding-y;
33+
padding-bottom: $input-group-lg-padding-y;
34+
}
35+
36+
.input-group-text {
37+
font-size: $input-group-lg-text-font-size;
38+
}
39+
}
40+
41+
.input-group-sm {
42+
> .form-control {
43+
min-height: $input-group-sm-min-height;
44+
height: $input-group-sm-height;
45+
font-size: $input-group-sm-font-size;
46+
padding-top: $input-group-sm-padding-y;
47+
padding-bottom: $input-group-sm-padding-y;
48+
}
49+
50+
.input-group-text {
51+
font-size: $input-group-sm-text-font-size;
52+
line-height: $input-group-sm-text-line-height;
53+
}
54+
}
55+
56+
.input-group {
57+
&.form-outline {
58+
.input-group-text {
59+
border-left: 0;
60+
}
61+
input + .input-group-text {
62+
border: 0;
63+
border-left: $input-group-form-outline-border-left-width solid
64+
$input-group-form-outline-border-left-color;
65+
}
66+
}
67+
.form-outline:not(:first-child),
68+
.form-outline:not(:first-child) .form-notch-leading {
69+
border-top-left-radius: 0 !important;
70+
border-bottom-left-radius: 0 !important;
71+
}
72+
.form-outline:not(:last-child),
73+
.form-outline:not(:last-child) .form-notch-trailing {
74+
border-top-right-radius: 0 !important;
75+
border-bottom-right-radius: 0 !important;
76+
}
77+
}
78+
79+
.input-group > [class*='btn-outline-'] + [class*='btn-outline-'] {
80+
border-left: 0;
81+
}

‎projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@
7878
@import './free/close';
7979
@import './free/tooltip';
8080
@import './free/popover';
81+
@import './free/dropdown';
8182

8283
// MDB FORMS
8384
@import './free/forms/form-check';

‎projects/mdb-angular-ui-kit/assets/scss/mdb.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,13 @@
7777
@import './free/close';
7878
@import './free/tooltip';
7979
@import './free/popover';
80+
@import './free/modal';
81+
@import './free/dropdown';
8082

8183
// MDB FORMS
8284
@import './free/forms/form-check';
8385
@import './free/forms/form-control';
86+
@import './free/forms/form-select';
87+
@import './free/forms/input-group';
8488

8589
@import '~@angular/cdk/overlay-prebuilt.css';

0 commit comments

Comments
 (0)