Custom theme.css and notifications.js

[John-Henrique]

Are simple changes but I believe this is util. I don't made this changes because I don't know how to use gulp or the method used to make CSS styles on SRC directory, unfortunately no have time to learn now. :sweat:

Need add

I use this to show over screen a loading progress, so why no add a extra class to allow devs use this too? This should be in phonon.css

.circle-progress-overlay {
    z-index:999;
    top:50%;
    left:50%;
    position:absolute;
    margin-top:-10px;
    margin-left:-10px;
    background-color: transparent !important;
}

The spinner is other item witch can be custom, well isn't a very lol look but this is my custom right? This case, I think theme.css should become this commented and defined only border color to default.

.circle-progress.active .spinner {
/* I know is very :poop: hehe
    border-top: 1px solid #FF3366;
    border-right: 2px solid #FF3366;
    border-bottom: 3px solid #FF3366;
    border-left: 2px solid #fff;
    border-left-color: transparent !important;
*/
    border-color:#ff3366;
    border-left-color: transparent !important;
}

In theme.css we have custom to tabs, panels and buttons, but not to 'determine' progress, so... :+1:

.progress .determinate {
    background-color: #FF3366;
}

Other thing, what you think about create alert, error and success classes to create a notification with progress bar stylized?

phonon.notif( "my string", 5000, true, "My Button Label", "error" );

But this was bad to write and can be various params no necessary, so...

phonon.notif( "my string", {timeout: 5000, showButton: true, textButton: "My Button Label", determine: "success" });

Reading the code of 'notifications.js' I note witch changes of #75 are losted in V1.3.3, but I don't know why. Yet about this changes, we need make some changes, when use (incorrect but...)

phonon.notif( "my string", 5000, false, "My Button Label" );

Notification freeze and not show bar progress.

theme.css have a problem with color (background is equal text) and position of button of alert

.primary.btn-flat {
    color: #0084e7 !important;
}

@Qathom what you think?

[qathom]

Hi @John-Henrique,

Nice idea! It is now possible to change the color of notifications and preloaders. The docs for notifications and preloaders have been updated.

Also, theme.css now contains notifications and preloaders. Tell me if it works with the latest release (1.3.4) coming asap :)

[John-Henrique]

Very happy, thanks, thanks, thanks, a few months I'm thinking about this changes...

[John-Henrique]

I try new version

Button Yet have a problem with button (same color to background and text).

Notification The red (negative) version, background can be light (little bit)

Green (positive) version, tone is very bad to read white text. Maybe, a little bit dark

Tabs I don't know if this happend in this version, but look tabs, active tab is attach with next tab, I forgot device name but, I see the last tab truncated (here isn't truncated) so I need add

/* line 39 on theme.css */
.tabs .tab-items .tab-item {
  color: #fff;
  /*font-size:12px;*/
}

[qathom]

Hi @John-Henrique,

Thank your for testing this release. I'll check your issue with colors tomorrow ;)