diff --git a/cms/static/sass/elements/_alerts.scss b/cms/static/sass/elements/_alerts.scss index 49aa015313..1e8b79b3fe 100644 --- a/cms/static/sass/elements/_alerts.scss +++ b/cms/static/sass/elements/_alerts.scss @@ -6,7 +6,7 @@ @include box-sizing(border-box); .copy { - @include font-size(13); + @extend .t-copy-sub2; } } @@ -184,12 +184,12 @@ } .action-primary { - @include font-size(13); + @extend .t-action3; font-weight: 600; } .action-secondary { - @include font-size(13); + @extend .t-action3; } } } @@ -367,12 +367,12 @@ } .copy { - @include font-size(13); + @extend .t-copy-sub2; width: flex-grid(10, 12); color: $gray-l2; .title { - @include font-size(14); + @extend .t-title-4; margin-bottom: 0; color: $white; } @@ -409,13 +409,13 @@ .action-primary { @include blue-button(); - @include font-size(13); + @extend .t-action3; border-color: $blue-d2; font-weight: 600; } .action-secondary { - @include font-size(13); + @extend .t-action3; } } @@ -504,7 +504,7 @@ // adopted alerts .alert { - @include font-size(14); + @extend .t-copy-sub2; @include box-sizing(border-box); @include clearfix(); margin: 0 auto; @@ -530,7 +530,7 @@ } .copy { - @include font-size(13); + @extend .t-copy-sub2; width: flex-grid(10, 12); color: $gray-l2; @@ -568,12 +568,12 @@ } .action-primary { - @include font-size(13); + @extend .t-action3; font-weight: 600; } .action-secondary { - @include font-size(13); + @extend .t-action3; } } } @@ -730,7 +730,7 @@ body.uxdesign.alerts { border-radius: 3px; background: #fbf6e1; // background: #edbd3c; - font-size: 14px; + @extend .t-copy-sub1; @include clearfix; .alert-message { diff --git a/cms/static/sass/elements/_typography.scss b/cms/static/sass/elements/_typography.scss index 32c4b3928b..a58fe27eb8 100644 --- a/cms/static/sass/elements/_typography.scss +++ b/cms/static/sass/elements/_typography.scss @@ -2,7 +2,7 @@ // ==================== // headings/titles -.t-title-1, .t-title-2, .t-title-3, .t-title-4, .t-title-5, .t-title-5 { +.t-title-1, .t-title-2, .t-title-3, .t-title-4, .t-title-5 { color: $gray-d3; } @@ -21,7 +21,7 @@ } .t-title-4 { - + @include font-size(14); } .t-title-5 { @@ -82,4 +82,4 @@ // misc .t-icon { line-height: 0; -} \ No newline at end of file +} diff --git a/cms/templates/ux-alerts.html b/cms/templates/ux-alerts.html index de062e471e..b9c5fd6053 100644 --- a/cms/templates/ux-alerts.html +++ b/cms/templates/ux-alerts.html @@ -114,6 +114,7 @@
  • Show Announcement
  • Show Announcement with Actions
  • Show Activiation
  • +
  • Alert with three actions
  • @@ -128,6 +129,10 @@

    Different Static Examples of Notifications

    @@ -182,6 +191,33 @@ <%block name="view_alerts"> + +
    +
    + + +
    +

    You are editing a draft

    +

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

    +
    + + +
    +
    +
    @@ -196,10 +232,10 @@

    Alert Actions

    @@ -220,10 +256,10 @@

    Alert Actions

    @@ -297,7 +333,7 @@

    Alert Actions

    @@ -367,13 +403,13 @@ <%block name="view_notifications"> -
    + + + + + + +