Notification stylesheets

src/modules/Lungo.Notification.coffee

@@ -87,7 +87,7 @@ Lungo.Notification = do(lng = Lungo) ->
   ###
   html = (markup, button, style, seconds) ->
     if button
-      markup += "<a href=\"#\" class=\"button large anchor\" data-action=\"close\">" + button + "</a>"
+      markup += """<button class="anchor" data-action="close">#{button}</button>"""
     _show markup, "html #{style}"
     _hide seconds
 

src/stylesheets/lungo.layout.list.styl

@@ -87,6 +87,7 @@
     & .on-right.tag
       padding-left: SIZE = 0.4em
       padding-right: SIZE
+      text-shadow: none
 
   & .on-right, small
     & .icon

src/stylesheets/lungo.layout.styl

@@ -49,7 +49,7 @@ body
       & > .title
         z-index: -1
         float: left
-        font-size: 1.21em
+        font-size: FONT_SIZE_BIG
         box-flex(1)
         &.centered
           position: absolute

src/stylesheets/lungo.widget.notification.styl

@@ -80,20 +80,19 @@ WINDOW_WIDTH = 280px
       & > .icon
         font-size: 5em
         line-height: 1.0em
-      & > strong
-        font-size: 1.1em
       & > small
         font-size: FONT_SIZE_SMALL
-        padding-top: 0.25em
         padding-bottom: 1em
+      & > .icon, > strong
+        padding-bottom: 0.25em
       & > strong, > small
-        padding-left: 0.25em
-        padding-right: 0.25em
+        padding-left: 0.5em
+        padding-right: 0.5em
 
     &.html .title
       height: HEADER_HEIGHT
       line-height: HEADER_HEIGHT
-      font-size: FONT_SIZE_LARGE
+      font-size: FONT_SIZE_BIG
 
     &.push
       HEIGHT = (HEADER_HEIGHT / 1.5)
@@ -114,11 +113,11 @@ WINDOW_WIDTH = 280px
         margin-right: 0.5em
         font-size: FONT_SIZE_LARGE
 
-    & button, & .button
+    & button
       display: block
       margin-bottom: 1px
       width: inherit
-      line-height: 3em
+      line-height: 2.5em
       border: none
       font-size: FONT_SIZE_BIG
 

src/stylesheets/theme/theme.layout.list.styl

@@ -39,7 +39,9 @@
           border-color: #fff
       & small, & .on-right:not(.tag)
         color: lighten(TEXT, 50%)
-        font-weight: 300
+
+      & .on-right
+        font-weight: 400
 
     &:not(.big) img
       border-radius BORDER_radius

src/stylesheets/theme/theme.layout.styl

@@ -40,7 +40,7 @@ body > section
 body > aside
   background-color: darken(ASIDE, 10%)
   color: WHITE
-  box-shadow: 6px 0 darken(ASIDE, 10%)
+  box-shadow 0 0 0 6px darken(ASIDE, 10%)
   & > header, & > footer
     background-color: ASIDE
 

src/stylesheets/theme/theme.widget.notification.styl

@@ -8,40 +8,41 @@
  */
 
 /* -------------------------- NOTIFICATION -------------------------- */
+
 .notification
   color: #fff
   &:not(.push)
-    background-color: rgba(0,0,0,0.6)
+    background-color: rgba(0,0,0,0.5)
   & .window
-    &:not(.push):not(.growl)
-      border-radius FORM_border_radius FORM_border_radius 0 0
+    box-shadow 0 0 0 3px rgba(0,0,0,0.1)
     &.growl
-      border-radius BORDER_radius
       background-color: rgba(0,0,0,0.8)
       & strong
         color: darken(#fff, 25%)
         font-weight: 700
 
-    &:not(.growl)
-      box-shadow 0 0 1em lighten(COLOR, 10%)
-
     &.confirm, &.html
-      & button, .button
+      & button
         background-color: #fff
-        color: THEME
-
+        color: darken(COLOR, 75%)
         font-weight: 400
-    &.html
-      background-color: lighten(COLOR, 95%)
-      color: lighten(COLOR, 25%)
+        &[data-callback=cancel], &[data-action=close]
+          color: DANGER
+
+    &.html, &.confirm
+      background-color: COLOR
+      color: TEXT
 
     &.confirm
-      background-color: THEME
-      & > small
-        color: lighten(THEME, 75%)
+      & > small, > .icon
+        color: lighten(TEXT, 50%)
+
+      & > button
+        &:nth-child(1)
+          color: DANGER !important
 
     &.error, &.success
-      background-color: COLOR
+      background-color: ASIDE
       border-bottom: solid 0.4em
       color: #fff
       & small
@@ -60,12 +61,10 @@
       & .title
         background-color: THEME
         color: #fff
-        border-radius BORDER_radius BORDER_radius 0 0
 
     &.push
       background-color: COLOR
       box-shadow: inset 0 -0.1em #000
 
-    & button, & .button
-      &:last-child
-        border-radius00 FORM_border_radius FORM_border_radius
+    & small
+      font-weight: 300