diff --git a/font-glyphs/src/icons/delete.svg b/font-glyphs/src/icons/delete.svg new file mode 100644 index 0000000..5c0a20e --- /dev/null +++ b/font-glyphs/src/icons/delete.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/font-glyphs/src/icons/graph.svg b/font-glyphs/src/icons/graph.svg new file mode 100644 index 0000000..2e52917 --- /dev/null +++ b/font-glyphs/src/icons/graph.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + diff --git a/web/src/design/shared/VipaMetricsLoginMed.png b/web/src/design/shared/VipaMetricsLoginMed.png new file mode 100644 index 0000000..694a4fe Binary files /dev/null and b/web/src/design/shared/VipaMetricsLoginMed.png differ diff --git a/web/src/stylesheets/config/_default-vars.scss b/web/src/stylesheets/config/_default-vars.scss index b9c159a..df4f458 100644 --- a/web/src/stylesheets/config/_default-vars.scss +++ b/web/src/stylesheets/config/_default-vars.scss @@ -2,9 +2,10 @@ $font--web-root-path: "/_fonts" !default; //reused theme variables $color--theme-accent: #4b93ad !default; +$color--theme-accent-alternate: #1f4557 !default; //landing template -$landing--bg-image: url(/_resources/dyn/files/21273z6d51a6f4/_fn/VipaMetricsLoginDrk.png) !default; +$landing--bg-image: url(/_resources/dyn/files/2828332z4d6c28e4/_fn/VipaMetricsLoginMed.png) !default; $landing--bg-color: $color--theme-accent !default; //app variables @@ -17,9 +18,9 @@ $app--base-font-family: $font-open-sans !default; $app--body-bg-color: $color-grey-e7 !default; $app--body-text-color: $color-grey-33 !default; -$app--header-bg-color: $color-grey-33 !default; +$app--header-bg-color: $color-white !default; $app--footer-bg-color: $color-grey-e7 !default; -$app--footer-text-color: $color-white !default; +$app--footer-text-color: $color-grey-33 !default; $app--footer-height: 50px !default; $app--nav-link-color: $color--theme-accent !default; diff --git a/web/src/stylesheets/config/themes/_standard.scss b/web/src/stylesheets/config/themes/_standard.scss index c648786..b9bc33b 100644 --- a/web/src/stylesheets/config/themes/_standard.scss +++ b/web/src/stylesheets/config/themes/_standard.scss @@ -2,8 +2,12 @@ //VipaMetric Dark $color--theme-accent: #4b93ad; +$color--theme-accent-alternate: #1f4557; -$landing--bg-color: $color-grey-33; -$app--table-headings-bg-color: $color-grey-33; +$landing--bg-color: $color-white; +$app--table-headings-bg-color: $color--theme-accent-alternate; +$app--nav-link-color: $color--theme-accent-alternate; +$app--nav-link-hover-color: $color--theme-accent; +$app--nav-link-underline-color: $color--theme-accent-alternate; @import "../_default-vars"; \ No newline at end of file diff --git a/web/src/stylesheets/pages/_definitions/_page--ba-search.scss b/web/src/stylesheets/pages/_definitions/_page--ba-search.scss index d7a9289..33fcc89 100644 --- a/web/src/stylesheets/pages/_definitions/_page--ba-search.scss +++ b/web/src/stylesheets/pages/_definitions/_page--ba-search.scss @@ -13,6 +13,7 @@ position: relative; padding-bottom: 20px; min-height: 25px; + min-width: 70px; img { width: 100%; diff --git a/web/src/stylesheets/pages/_definitions/_page--dashboard.scss b/web/src/stylesheets/pages/_definitions/_page--dashboard.scss index 1191266..56cd3f6 100644 --- a/web/src/stylesheets/pages/_definitions/_page--dashboard.scss +++ b/web/src/stylesheets/pages/_definitions/_page--dashboard.scss @@ -1,3 +1,5 @@ +@import "_page--dashboard/price-matrix"; + .vipametric, .dash-section, .dash_message { diff --git a/web/src/stylesheets/pages/_definitions/_page--dashboard/_price-matrix.scss b/web/src/stylesheets/pages/_definitions/_page--dashboard/_price-matrix.scss new file mode 100644 index 0000000..eef4316 --- /dev/null +++ b/web/src/stylesheets/pages/_definitions/_page--dashboard/_price-matrix.scss @@ -0,0 +1,11 @@ +.price-matrix { + .miwt-table { + tr { + th, td { + &:first-child { + width: 30%; + } + } + } + } +} \ No newline at end of file diff --git a/web/src/stylesheets/pages/_definitions/_page--engagement-edit.scss b/web/src/stylesheets/pages/_definitions/_page--engagement-edit.scss index 309e569..ea426e9 100644 --- a/web/src/stylesheets/pages/_definitions/_page--engagement-edit.scss +++ b/web/src/stylesheets/pages/_definitions/_page--engagement-edit.scss @@ -673,7 +673,9 @@ span.metric-bucket.value-component { // END STYLES FOR NEW HTML // STYLES FOR VM-440, MEDIA SUMMARY WIDGET -.primary-content.vipametric-wrapper { +.primary-content.vipametric-wrapper, +.survey-summary-container, +.leads-summary-container { @include breakpoint($bp-tablets-landscape) { margin-right: 240px; } @@ -687,7 +689,6 @@ span.metric-bucket.value-component { } // END STYLES FOR VM-440 - .default-group { .numeric-metric { display: block; @@ -829,8 +830,13 @@ span.metric-bucket.value-component { } } - - +// In-Market Survey only +.consumer-link-outer-con { + button.btn.trigger { + width: auto; + height: auto; + } +} // User Management .user-management { diff --git a/web/src/stylesheets/pages/_definitions/_page--engagement-edit/_leads.scss b/web/src/stylesheets/pages/_definitions/_page--engagement-edit/_leads.scss index 708cd6b..f96e44e 100644 --- a/web/src/stylesheets/pages/_definitions/_page--engagement-edit/_leads.scss +++ b/web/src/stylesheets/pages/_definitions/_page--engagement-edit/_leads.scss @@ -1,22 +1,59 @@ -.section.leads { - .section-content { +.section.leads, +.leads-summary-container { + @include style-contentbox; + padding: 0; + + .section-content, + .leads-summary-content { padding: 15px 25px; } + + .leads-summary-header { + @include style-h3; + color: $color-grey-33; + border-bottom: 1px solid $color-grey-e2; + padding: 10px 25px; + background-color: $color-grey-f2; + + a { + @include style-button-base; + display: block; + width: 100%; + color: $color-grey-33; + text-align: center; + } + } + + @include breakpoint($bp-mobile-landscape) { + padding:0; + } } -.lead { - display: inline-block; - width: 25%; - vertical-align: top; - border-right: 1px solid $color-grey-e7; - padding-left: 20px; - &:first-child { - padding-left: 0; +.lead, +.leads-summary { + + .leads-summary { + margin-top: 20px; } - &:nth-child(4n) { - border-right: 0 none; + @include breakpoint($bp-tablets-portrait) { + display: inline-block; + width: 25%; + vertical-align: top; + border-right: 1px solid $color-grey-e7; + padding-left: 20px; + + + .leads-summary { + margin-top: 0; + } + + &:first-child { + padding-left: 0; + } + + &:nth-child(4n) { + border-right: 0 none; + } } } @@ -60,6 +97,53 @@ } } +.leads-summary-heading { + font-size: 16px; + font-family: $font-open-sans-semi-bold; + color: $color--theme-accent; +} + +.leads-summary-heading:after { + @include glyphAdd($html-entity-link); + vertical-align: baseline; + padding-left: 5px; + text-decoration: none; +} + +.submissions-data-count { + font-size: 32px; + margin-right: 5px; + display: inline-block; + vertical-align: middle; +} + +.submissions-data-text { + display: inline-block; + vertical-align: middle; + margin-right: 10px; +} + +.leads-summary-actions { + .btn { + vertical-align: middle; + display: inline-block; + + &-download { + &:before { + margin-right: 0; + } + + font-size: 0; + padding: 5px; + } + + + .btn { + margin-left: 3px; + } + } +} + + .lead-count { font-size: 32px; display: inline-block; diff --git a/web/src/stylesheets/pages/_definitions/_page--engagement-edit/_surveys.scss b/web/src/stylesheets/pages/_definitions/_page--engagement-edit/_surveys.scss index bb28021..7a4e9f7 100644 --- a/web/src/stylesheets/pages/_definitions/_page--engagement-edit/_surveys.scss +++ b/web/src/stylesheets/pages/_definitions/_page--engagement-edit/_surveys.scss @@ -1,55 +1,113 @@ -.section.surveys { - .survey-item { - margin: 5px 0; - display: inline-block; - vertical-align: top; - width: 25%; - padding-left: 20px; - border-right: 1px solid $color-grey-e7; +.section.surveys, +.survey-summary-container { + @include style-contentbox; + margin-top: 0; + padding: 0; + + .section-content, + .survey-summary-content { + padding: 15px 25px; + } - &:first-child { - padding-left: 0; + .survey-summary-header { + @include style-h3; + color: $color-grey-33; + border-bottom: 1px solid $color-grey-e2; + padding: 10px 25px; + background-color: $color-grey-f2; + + a { + @include style-button-base; + display: block; + width: 100%; + color: $color-grey-33; + text-align: center; } + } - &:nth-child(4n) { - border-right: 0 none; + .survey-item, + .survey-summary { + + .survey-summary { + margin-top: 20px; } } - .survey-item-name { + .survey-item-name, + .survey-link { font-size: 16px; font-family: $font-open-sans-semi-bold; color: $color--theme-accent; } - a.survey-item-name:after { + a.survey-item-name:after, + .survey-link a:after { @include glyphAdd($html-entity-link); vertical-align: baseline; padding-left: 5px; text-decoration: none; } - .survey-item-data-count { + .survey-item-data-count, + .submissions-data-count { font-size: 32px; margin-right: 5px; display: inline-block; vertical-align: middle; } - .survey-item-data-text { + .survey-item-data-text, + .submissions-data-text { display: inline-block; vertical-align: middle; margin-right: 10px; } - .survey-item-actions { + .survey-item-actions, + .summary-actions { .btn { vertical-align: middle; display: inline-block; + &-download { + &:before { + margin-right: 0; + } + + font-size: 0; + padding: 5px; + } + + .btn { margin-left: 3px; } } } + + @include breakpoint($bp-mobile-landscape) { + padding: 0; + margin-top: 0; + } + + @include breakpoint($bp-tablets-portrait) { + .survey-summary { + margin: 5px 0; + display: inline-block; + vertical-align: top; + width: 25%; + padding-left: 20px; + border-right: 1px solid $color-grey-e7; + + + .survey-summary { + margin-top: 0; + } + + &:first-child { + padding-left: 0; + } + + &:nth-child(4n) { + border-right: 0 none; + } + } + } } \ No newline at end of file diff --git a/web/src/stylesheets/pages/_definitions/_page--intranet.scss b/web/src/stylesheets/pages/_definitions/_page--intranet.scss index 39997d6..f11a2c7 100644 --- a/web/src/stylesheets/pages/_definitions/_page--intranet.scss +++ b/web/src/stylesheets/pages/_definitions/_page--intranet.scss @@ -1,6 +1,14 @@ @import "_page--intranet/tile-flip"; @import "_page--intranet/brand-slider"; +.miwt-table { + th.last-column { + button.configure { + float: right; + } + } +} + .section { &.agency-brands-editor { background-color: transparent; @@ -30,6 +38,14 @@ } } + &.agency-engagements-review-editor, + &.agency-engagements-active-editor, + &.agency-engagements-upcoming-editor { + .search-bar { + display: none; + } + } + @include breakpoint($bp-tablets-portrait) { &.agency-brand-logo-editor, &.agency-links { @@ -118,6 +134,11 @@ width: 165px; height: 50%; + &:hover { + box-shadow: 0 0 4px #444; + cursor: pointer; + } + .brand-logo { width: 100%; @@ -204,3 +225,4 @@ + diff --git a/web/src/stylesheets/pages/pernod/page--intranet.scss b/web/src/stylesheets/pages/pernod/page--intranet.scss new file mode 100644 index 0000000..bdfd6ed --- /dev/null +++ b/web/src/stylesheets/pages/pernod/page--intranet.scss @@ -0,0 +1,5 @@ +@import "../../config/themes/_pernod"; +@import "../../config/_base-import"; + +@import "../_definitions/_page--intranet"; + diff --git a/web/src/stylesheets/pages/twg/page--intranet.scss b/web/src/stylesheets/pages/twg/page--intranet.scss new file mode 100644 index 0000000..6a24d88 --- /dev/null +++ b/web/src/stylesheets/pages/twg/page--intranet.scss @@ -0,0 +1,5 @@ +@import "../../config/themes/_twg"; +@import "../../config/_base-import"; + +@import "../_definitions/_page--intranet"; + diff --git a/web/src/stylesheets/templates/_definitions/_template--base.scss b/web/src/stylesheets/templates/_definitions/_template--base.scss index 3c1f28e..22c6f15 100644 --- a/web/src/stylesheets/templates/_definitions/_template--base.scss +++ b/web/src/stylesheets/templates/_definitions/_template--base.scss @@ -8,7 +8,6 @@ @import "../../libs/select2/_core"; @import "../../libs/select2/_multiple"; @import "../../libs/select2/_dropdown"; -@import "../../libs/stacktable"; @import "template--base/_structure"; @import "template--base/_navigation"; diff --git a/web/src/stylesheets/templates/_definitions/_template--manage.scss b/web/src/stylesheets/templates/_definitions/_template--manage.scss index 7a317f3..6516075 100644 --- a/web/src/stylesheets/templates/_definitions/_template--manage.scss +++ b/web/src/stylesheets/templates/_definitions/_template--manage.scss @@ -224,10 +224,12 @@ button.btn.trigger { } } - button.btn.trigger { - position: absolute; - top: 7px; - left: 0; + > .miwt-collapsable { + > button.btn.trigger { + position: absolute; + top: 7px; + left: 0; + } } + .sub-section { @@ -241,9 +243,9 @@ button.btn.trigger { } } + @include breakpoint($bp-mobile-landscape) { .section { - &-header { a { position: absolute; diff --git a/web/src/stylesheets/templates/_definitions/template--base/_navigation.scss b/web/src/stylesheets/templates/_definitions/template--base/_navigation.scss index 9c8286b..ef02d1c 100644 --- a/web/src/stylesheets/templates/_definitions/template--base/_navigation.scss +++ b/web/src/stylesheets/templates/_definitions/template--base/_navigation.scss @@ -62,6 +62,7 @@ } } + .logout { position: absolute; top: 0; diff --git a/web/src/stylesheets/templates/_definitions/template--base/_structure.scss b/web/src/stylesheets/templates/_definitions/template--base/_structure.scss index 9ef03e3..ed764df 100644 --- a/web/src/stylesheets/templates/_definitions/template--base/_structure.scss +++ b/web/src/stylesheets/templates/_definitions/template--base/_structure.scss @@ -34,7 +34,7 @@ body { // Header area styles .logo { - padding: 0 15px; + padding: 5px 15px; text-align: center; img { diff --git a/web/src/stylesheets/templates/standard/template--base.scss b/web/src/stylesheets/templates/standard/template--base.scss index e73a688..8efb7b7 100644 --- a/web/src/stylesheets/templates/standard/template--base.scss +++ b/web/src/stylesheets/templates/standard/template--base.scss @@ -28,8 +28,8 @@ } .account-logout-link { - background-color: $color-grey-55; - color: #ccc; + background-color: $color--theme-accent-alternate; + color: $color-white; font-size: 12px; padding: 1px 10px; background-position: 5px 3px; @@ -60,6 +60,7 @@ padding: 7px 0; img { + // Remove when dealing w/ AH logo /*height: 50px; width: 162px; margin-top: -6px;*/ @@ -76,8 +77,6 @@ .mi { &:hover { .menuitemlabel { - color: $color-white; - &:after { height: 10px; } @@ -100,7 +99,7 @@ &:after { content: ""; display: block; - background-color: $color--theme-accent; + background-color: $color--theme-accent-alternate; position: absolute; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); @@ -122,7 +121,6 @@ margin-right: 20px; .menuitemlabel { - color: $color-grey-bb; position: relative; padding: 15px 0; } @@ -135,6 +133,12 @@ vertical-align: middle; margin-left: 30px; } + + .account-logout { + .account-username { + color: $color--theme-accent-alternate; + } + } } } diff --git a/web/src/stylesheets/templates/standard/template--landing.scss b/web/src/stylesheets/templates/standard/template--landing.scss index 473de76..84a5a7a 100644 --- a/web/src/stylesheets/templates/standard/template--landing.scss +++ b/web/src/stylesheets/templates/standard/template--landing.scss @@ -5,5 +5,5 @@ .login-intro, .pernod-td-link-name-check { - color: $color-white; + color: $color--theme-accent; } \ No newline at end of file