Skip to content

Commit 2f743d0

Browse files
cristijoracristijora
committed
#6 Wrap themes in .vue-notifyjs class to avoid some css conflicts
1 parent 28e047a commit 2f743d0

File tree

3 files changed

+262
-255
lines changed

3 files changed

+262
-255
lines changed

‎themes/default.scss‎

Lines changed: 82 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,92 @@
11
@import "./default/variables";
22
@import "./transitions/transitions";
3-
button.close {
4-
-webkit-appearance: none;
5-
padding: 0;
6-
cursor: pointer;
7-
background: transparent;
8-
border: 0;
9-
}
10-
.close {
11-
float: right;
12-
font-size: 21px;
13-
font-weight: bold;
14-
line-height: 1;
15-
color: #000;
16-
text-shadow: 0 1px 0 #fff;
17-
filter: alpha(opacity=20);
18-
opacity: .2;
19-
}
20-
21-
.alert {
22-
border: 0;
23-
border-radius: 0;
24-
color: #FFFFFF;
25-
padding: 10px 15px;
26-
font-size: 14px;
27-
z-index: 100;
28-
display: inline-block;
29-
position: fixed !important;
30-
transition: all 0.5s ease-in-out;
31-
cursor: pointer;
32-
&.center {
33-
left: 0px;
34-
right: 0px;
35-
margin: 0 auto;
36-
}
37-
&.left {
38-
left: 20px;
39-
}
40-
&.right {
41-
right: 20px;
3+
.vue-notifyjs{
4+
button.close {
5+
-webkit-appearance: none;
6+
padding: 0;
7+
cursor: pointer;
8+
background: transparent;
9+
border: 0;
4210
}
43-
.container & {
44-
border-radius: 4px;
11+
.close {
12+
float: right;
13+
font-size: 21px;
14+
font-weight: bold;
15+
line-height: 1;
16+
color: #000;
17+
text-shadow: 0 1px 0 #fff;
18+
filter: alpha(opacity=20);
19+
opacity: .2;
4520
}
46-
.navbar & {
21+
22+
.alert {
23+
border: 0;
4724
border-radius: 0;
48-
left: 0;
49-
position: absolute;
50-
right: 0;
51-
top: 85px;
52-
width: 100%;
53-
z-index: 3;
54-
}
55-
.navbar:not(.navbar-transparent) & {
56-
top: 70px;
25+
color: #FFFFFF;
26+
padding: 10px 15px;
27+
font-size: 14px;
28+
z-index: 100;
29+
display: inline-block;
30+
position: fixed !important;
31+
transition: all 0.5s ease-in-out;
32+
cursor: pointer;
33+
&.center {
34+
left: 0px;
35+
right: 0px;
36+
margin: 0 auto;
37+
}
38+
&.left {
39+
left: 20px;
40+
}
41+
&.right {
42+
right: 20px;
43+
}
44+
.container & {
45+
border-radius: 4px;
46+
}
47+
.navbar & {
48+
border-radius: 0;
49+
left: 0;
50+
position: absolute;
51+
right: 0;
52+
top: 85px;
53+
width: 100%;
54+
z-index: 3;
55+
}
56+
.navbar:not(.navbar-transparent) & {
57+
top: 70px;
58+
}
59+
.alert-icon {
60+
font-size: 30px;
61+
margin-right: 5px;
62+
}
63+
.close~span {
64+
display: block;
65+
max-width: 89%;
66+
}
67+
&[data-notify="container"] {
68+
width: 350px;
69+
padding: 10px 10px 10px 20px;
70+
border-radius: $border-radius-base;
71+
}
72+
&.alert-with-icon {
73+
padding-left: 65px;
74+
}
5775
}
58-
.alert-icon {
59-
font-size: 30px;
60-
margin-right: 5px;
76+
.alert-info {
77+
background-color: $bg-info;
78+
color: $info-states-color;
6179
}
62-
.close~span {
63-
display: block;
64-
max-width: 89%;
80+
.alert-success {
81+
background-color: $bg-success;
82+
color: $success-states-color;
6583
}
66-
&[data-notify="container"] {
67-
width: 350px;
68-
padding: 10px 10px 10px 20px;
69-
border-radius: $border-radius-base;
84+
.alert-warning {
85+
background-color: $bg-warning;
86+
color: $warning-states-color;
7087
}
71-
&.alert-with-icon {
72-
padding-left: 65px;
88+
.alert-danger {
89+
background-color: $bg-danger;
90+
color: $danger-states-color;
7391
}
74-
}
75-
.alert-info {
76-
background-color: $bg-info;
77-
color: $info-states-color;
78-
}
79-
.alert-success {
80-
background-color: $bg-success;
81-
color: $success-states-color;
82-
}
83-
.alert-warning {
84-
background-color: $bg-warning;
85-
color: $warning-states-color;
86-
}
87-
.alert-danger {
88-
background-color: $bg-danger;
89-
color: $danger-states-color;
90-
}
92+
}

‎themes/material.scss‎

Lines changed: 84 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,96 @@
11
@import "./material/mixins";
22
@import "./transitions/transitions";
3-
button.close {
4-
-webkit-appearance: none;
5-
padding: 0;
6-
cursor: pointer;
7-
background: 0 0;
8-
border: 0;
9-
}
10-
.close {
11-
font-size: inherit;
12-
color: #FFFFFF;
13-
opacity: .9;
14-
text-shadow: none;
15-
float: right;
16-
font-weight: bold;
17-
line-height: 1;
18-
filter: alpha(opacity=20);
19-
}
20-
.alert {
21-
border: 0;
22-
border-radius: 0;
23-
padding: 20px 15px;
24-
line-height: 20px;
25-
color: #FFFFFF;
26-
font-size: 14px;
27-
z-index: 100;
28-
display: inline-block;
29-
position: fixed !important;
30-
transition: all 0.5s ease-in-out;
31-
min-width:100px;
32-
cursor: pointer;
33-
&.center {
34-
left: 0px;
35-
right: 0px;
36-
margin: 0 auto;
3+
.vue-notifyjs{
4+
button.close {
5+
-webkit-appearance: none;
6+
padding: 0;
7+
cursor: pointer;
8+
background: 0 0;
9+
border: 0;
3710
}
38-
&.left {
39-
left: 20px;
11+
.close {
12+
font-size: inherit;
13+
color: #FFFFFF;
14+
opacity: .9;
15+
text-shadow: none;
16+
float: right;
17+
font-weight: bold;
18+
line-height: 1;
19+
filter: alpha(opacity=20);
4020
}
41-
&.right {
42-
right: 20px;
43-
}
44-
b{
45-
font-weight: $font-weight-bold;
46-
text-transform: uppercase;
47-
font-size: $font-size-small;
48-
}
49-
// SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
50-
@include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light);
21+
.alert {
22+
border: 0;
23+
border-radius: 0;
24+
padding: 20px 15px;
25+
line-height: 20px;
26+
color: #FFFFFF;
27+
font-size: 14px;
28+
z-index: 100;
29+
display: inline-block;
30+
position: fixed !important;
31+
transition: all 0.5s ease-in-out;
32+
min-width:100px;
33+
cursor: pointer;
34+
&.center {
35+
left: 0px;
36+
right: 0px;
37+
margin: 0 auto;
38+
}
39+
&.left {
40+
left: 20px;
41+
}
42+
&.right {
43+
right: 20px;
44+
}
45+
b{
46+
font-weight: $font-weight-bold;
47+
text-transform: uppercase;
48+
font-size: $font-size-small;
49+
}
50+
// SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
51+
@include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light);
5152

52-
&-info, &-danger, &-warning, &-success {
53-
color: $mdb-text-color-light;
54-
}
53+
&-info, &-danger, &-warning, &-success {
54+
color: $mdb-text-color-light;
55+
}
5556

56-
&-default {
57-
a, .alert-link {
58-
color: $mdb-text-color-primary;
57+
&-default {
58+
a, .alert-link {
59+
color: $mdb-text-color-primary;
60+
}
61+
}
62+
&[data-notify="container"] {
63+
width: 350px;
64+
padding: 10px 10px 10px 20px;
65+
border-radius: $border-radius-base;
66+
}
67+
i[data-notify="icon"] {
68+
font-size: 30px;
69+
display: block;
70+
left: 15px;
71+
position: absolute;
72+
top: 50%;
73+
margin-top: -15px;
74+
}
75+
span{
76+
display: block;
77+
max-width: 89%;
5978
}
60-
}
61-
&[data-notify="container"] {
62-
width: 350px;
63-
padding: 10px 10px 10px 20px;
64-
border-radius: $border-radius-base;
65-
}
66-
i[data-notify="icon"] {
67-
font-size: 30px;
68-
display: block;
69-
left: 15px;
70-
position: absolute;
71-
top: 50%;
72-
margin-top: -15px;
73-
}
74-
span{
75-
display: block;
76-
max-width: 89%;
77-
}
7879

79-
.alert-icon{
80-
display: block;
81-
float: left;
82-
margin-right: $margin-base;
80+
.alert-icon{
81+
display: block;
82+
float: left;
83+
margin-right: $margin-base;
8384

84-
i{
85-
margin-top: -7px;
86-
top: 5px;
87-
position: relative;
85+
i{
86+
margin-top: -7px;
87+
top: 5px;
88+
position: relative;
89+
}
8890
}
8991
}
90-
}
9192

92-
.alert.alert-with-icon {
93-
padding-left: 65px;
94-
}
93+
.alert.alert-with-icon {
94+
padding-left: 65px;
95+
}
96+
}

0 commit comments

Comments
 (0)