Skip to content

Commit

Permalink
feat(toast): Adding outlined toasts
Browse files Browse the repository at this point in the history
  • Loading branch information
Joshua Godi committed May 18, 2017
1 parent 36c1a34 commit a7c82e1
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 69 deletions.
21 changes: 11 additions & 10 deletions demo/pages/elements/toast/ToastDemo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,40 +41,40 @@ const template = `
template: template
})
export class ToastDemoComponent {
private ToastDemoTpl:string = ToastDemoTpl;
private ToastServiceDemoTpl:string = ToastServiceDemoTpl;
private positions:Array<string> = [
private ToastDemoTpl: string = ToastDemoTpl;
private ToastServiceDemoTpl: string = ToastServiceDemoTpl;
private positions: Array<string> = [
'fixedTop',
'fixedBottom',
'growlTopLeft',
'growlTopRight',
'growlBottomLeft',
'growlBottomRight'
];
private themes:Array<string> = [
private themes: Array<string> = [
'default',
'success',
'info',
'warning',
'danger'
];
private icons:Array<string> = [
private icons: Array<string> = [
'add',
'check',
'clock',
'lock',
'caution'
];
private options:any = {
private options: any = {
'title': 'Title',
'message': 'Some Message...'
};
private toast:any = {
private toast: any = {
theme: 'danger',
icon: 'caution'
};

constructor(private toaster:NovoToastService) {
constructor(private toaster: NovoToastService) {
}

changeToast() {
Expand All @@ -98,8 +98,9 @@ export class ToastDemoComponent {
title: 'Bottom',
message: 'This positioning is fixedBottom',
icon: 'check',
theme: 'ocean',
position: 'fixedBottom'
theme: 'warning-outline',
position: 'fixedBottom',
hideDelay: 1000000
};
} else if (arg === 'growlTopRight') {
this.options = {
Expand Down
6 changes: 6 additions & 0 deletions src/elements/form/controls/picker/PickerControl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,9 @@ export class TablePickerControl extends PickerControl {
super(Object.assign(config, { appendToBody: true, parentScrollSelector: '.table-container' }));
}
}

export class AppendToBodyPickerControl extends PickerControl {
constructor(config: NovoControlConfig) {
super(Object.assign(config, { appendToBody: true, parentScrollSelector: '.table-container' }));
}
}
129 changes: 70 additions & 59 deletions src/elements/toast/Toast.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ novo-toast {
color: $white;
padding: 15px 15px 15px 25px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);

&.show {
display: block;
}
Expand All @@ -24,7 +23,7 @@ novo-toast.toast-container {
align-items: center;
}

novo-toast.toast-container > .toast-icon {
novo-toast.toast-container>.toast-icon {
display: flex;
justify-content: center;
align-content: center;
Expand All @@ -35,7 +34,6 @@ novo-toast.toast-container > .toast-icon {
background: rgba(0, 0, 0, 0.15);
border-radius: 3px;
margin-right: 15px;

i {
display: flex;
position: relative;
Expand All @@ -45,7 +43,7 @@ novo-toast.toast-container > .toast-icon {
}
}

novo-toast.toast-container > .close-icon {
novo-toast.toast-container>.close-icon {
display: flex;
justify-content: center;
align-content: center;
Expand All @@ -66,59 +64,55 @@ novo-toast.toast-container .toast-content {
width: calc(100% - 47px);
flex-direction: column;
display: flex;

h5 + p {
h5+p {
top: 0;
}

p {
position: relative;
top: -1px;
}

.link-generated {
width: 100%;
position: relative;
input {
font-size: 1em;
background: transparent !important;
border: none;
border-bottom: 1px solid #EAEAEA;
border-radius: 0;
outline: none;
height: 2rem;
width: 95%;
margin: 0;
padding: 0;
box-shadow: none;
box-sizing: content-box;
transition: all 300ms;
color: $white;
text-overflow: ellipsis;
&:focus {
background-color: $positive;
}
}
}
}

novo-toast .toast-content > h5 {
width: 100%;
position: relative;
input {
font-size: 1em;
background: transparent !important;
border: none;
border-bottom: 1px solid #EAEAEA;
border-radius: 0;
outline: none;
height: 2rem;
width: 95%;
margin: 0;
padding: 0;
box-shadow: none;
box-sizing: content-box;
transition: all 300ms;
color: $white;
text-overflow: ellipsis;
&:focus {
background-color: $positive;
}
}
}
}

novo-toast .toast-content>h5 {
display: block;
color: $white;
margin: 0 0 5px;
font-size: 14px;
}

novo-toast:not(.default) .toast-content > h5 {
novo-toast:not(.default) .toast-content>h5 {
color: $white;
}

novo-toast .toast-content > p {
novo-toast .toast-content>p {
font-size: 14px;
line-height: 20px;
margin: 0;
max-width: inherit;

&.message-only {
top: 0;
font-size: 16px;
Expand All @@ -127,6 +121,20 @@ novo-toast .toast-content > p {
}
}

novo-toast.warning-outline,
novo-toast.success-outline,
novo-toast.info-outline,
novo-toast.danger-outline,
{
color: $base-font-color;
.toast-content>h5 {
color: $base-font-color;
}
.toast-container .toast-content .link-generated input {
color: $base-font-color;
}
}

novo-toast.danger,
novo-toast.info,
novo-toast.success,
Expand All @@ -141,45 +149,62 @@ novo-toast.success {
background: $grass;
}

novo-toast.success-outline {
border: 1px solid $grass;
background: white;
}

novo-toast.info {
background: $ocean;
}

novo-toast.info-outline {
border: 1px solid $ocean;
background: white;
}

novo-toast.warning {
background: $sunflower;
}

novo-toast.warning-outline {
border: 1px solid $sunflower;
background: white;
}

novo-toast.danger {
background: $grapefruit;
}

novo-toast.danger-outline {
border: 1px solid $grapefruit;
background: white;
}

novo-toast {
@each $analytics, $color in $analytics-colors {
@each $analytics,
$color in $analytics-colors {
&.#{$analytics} {
background: $color;
}
}
@each $entity, $color in $entity-colors {
@each $entity,
$color in $entity-colors {
&.#{$entity} {
background: $color;
}
}

&.text {
background: $dark;
}

&.neutral {
background: $neutral;
}

&.background {
background: $off-white;

.toast-content > h5 {
.toast-content>h5 {
color: $dark !important;
}

i,
p {
color: $dark;
Expand All @@ -197,7 +222,6 @@ novo-toast.fixedTop {
top: -100%;
padding-top: 20px;
@include ease('all', 'swift-ease-in-out');

&.animate {
padding-top: 20px;
top: -6px;
Expand All @@ -208,7 +232,6 @@ novo-toast.fixedBottom {
bottom: -100%;
padding-bottom: 20px;
@include ease('all', 'swift-ease-in-out');

&.animate {
padding-bottom: 20px;
bottom: -6px;
Expand All @@ -218,14 +241,12 @@ novo-toast.fixedBottom {
novo-toast[class*="growl"] {
border-radius: 3px;
max-width: 350px;

.toast-content h5 {
display: block;
color: #fff;
margin: 0 0 5px;
font-size: 14px;
}

.toast-content p {
font-size: 14px;
width: 100%;
Expand All @@ -238,7 +259,6 @@ novo-toast.growlTopLeft {
right: auto;
width: calc(100% - 30px);
@include ease('all', 'swift-ease-in-out');

&.animate {
left: 15px;
}
Expand All @@ -260,7 +280,6 @@ novo-toast.growlTopRight {
left: auto;
width: calc(100% - 30px);
@include ease('all', 'swift-ease-in-out');

&.animate {
right: 15px;
}
Expand Down Expand Up @@ -306,7 +325,6 @@ novo-toast.embedded.fixedTop {
right: auto;
width: inherit;
margin: -1em -3em;

&.animate {
top: auto;
}
Expand All @@ -322,11 +340,9 @@ novo-toast.dialogue {
flex-direction: row !important;
align-items: center;
}

p.message-only {
flex: 3 0 0;
}

.dialogue {
display: inherit;
}
Expand All @@ -337,7 +353,6 @@ novo-toast.dialogue {
transform: translateY(-100%);
opacity: 0;
}

to {
transform: translateY(0);
opacity: 1;
Expand All @@ -351,24 +366,20 @@ novo-toast.dialogue {
novo-toast[class*="growl-"] {
min-width: 350px;
}

novo-toast.growlBottomLeft,
novo-toast.growlTopLeft {
left: -100%;
right: auto;
@include ease('all', 'swift-ease-in-out');

&.animate {
left: 15px;
}
}

novo-toast.growlBottomRight,
novo-toast.growlTopRight {
right: -100%;
left: auto;
@include ease('all', 'swift-ease-in-out');

&.animate {
right: 15px;
}
Expand Down

0 comments on commit a7c82e1

Please sign in to comment.