From 6ec5f3957a8cfcc4b29aaa360b27862225fb62c2 Mon Sep 17 00:00:00 2001 From: Louise Crow Date: Tue, 10 Mar 2015 12:20:29 +0000 Subject: Widget styles and image from @martinwright --- assets/images/widget-base.png | Bin 0 -> 4635 bytes assets/stylesheets/responsive/custom.scss | 48 ++++++++++++++++++++++++++++++ 2 files changed, 48 insertions(+) create mode 100644 assets/images/widget-base.png diff --git a/assets/images/widget-base.png b/assets/images/widget-base.png new file mode 100644 index 0000000..85a0eff Binary files /dev/null and b/assets/images/widget-base.png differ diff --git a/assets/stylesheets/responsive/custom.scss b/assets/stylesheets/responsive/custom.scss index ab2c6e4..036ff30 100644 --- a/assets/stylesheets/responsive/custom.scss +++ b/assets/stylesheets/responsive/custom.scss @@ -580,3 +580,51 @@ dt { padding: 3px; font-size: 1.1rem; } + +/* Widget */ +.alaveteli-widget { + background-color: $body-bg; + color: $heading-color; +} + +.alaveteli-widget__people-count { + top: 22px; + left: 197px; +} + +.alaveteli-widget__count { + font-weight: bold; + color: $button-bg; +} + +.alaveteli-widget__button { + top: 167px; +} + +.alaveteli-widget__status { + width: 200px; + text-transform: none; + + &.successful, + &.partially_successful { + color: $status-success; + } + + &.requires_admin, + &.waiting_response_very_overdue, + &.not_held, + &.rejected { + color: $status-failure; + } + + &.waiting_response, + &.waiting_response_overdue, + &.user_withdrawn, + &.waiting_clarification, + &.gone_postal, + &.internal_review, + &.attention_requested { + color: $status-pending; + } + +} -- cgit v1.2.3 From 4803f50dfccd6eb409c670b19c539f46f5bf2d6c Mon Sep 17 00:00:00 2001 From: Louise Crow Date: Fri, 10 Apr 2015 17:18:41 +0100 Subject: Move css for widget to widget.css. Imports seem to be too complicated for what needs to be a simple and small bit of css to sit on someone else's site. --- assets/stylesheets/responsive/custom.scss | 46 ------- assets/stylesheets/widget.scss | 196 ++++++++++++++++++++++++++++++ 2 files changed, 196 insertions(+), 46 deletions(-) create mode 100644 assets/stylesheets/widget.scss diff --git a/assets/stylesheets/responsive/custom.scss b/assets/stylesheets/responsive/custom.scss index 036ff30..9debf2f 100644 --- a/assets/stylesheets/responsive/custom.scss +++ b/assets/stylesheets/responsive/custom.scss @@ -581,50 +581,4 @@ dt { font-size: 1.1rem; } -/* Widget */ -.alaveteli-widget { - background-color: $body-bg; - color: $heading-color; -} - -.alaveteli-widget__people-count { - top: 22px; - left: 197px; -} - -.alaveteli-widget__count { - font-weight: bold; - color: $button-bg; -} - -.alaveteli-widget__button { - top: 167px; -} - -.alaveteli-widget__status { - width: 200px; - text-transform: none; - &.successful, - &.partially_successful { - color: $status-success; - } - - &.requires_admin, - &.waiting_response_very_overdue, - &.not_held, - &.rejected { - color: $status-failure; - } - - &.waiting_response, - &.waiting_response_overdue, - &.user_withdrawn, - &.waiting_clarification, - &.gone_postal, - &.internal_review, - &.attention_requested { - color: $status-pending; - } - -} diff --git a/assets/stylesheets/widget.scss b/assets/stylesheets/widget.scss new file mode 100644 index 0000000..80a08b6 --- /dev/null +++ b/assets/stylesheets/widget.scss @@ -0,0 +1,196 @@ + +$body-bg: #f7eee1; +$button-bg: #8b9352; +$heading-color: #3d3b38; +$status-success: #aab26e; +$status-failure: #ff7959; +$status-pending: #e69e5d; + + +/* CSS Mini Reset */ + +html, body, div, form, fieldset, legend, label +{ + margin: 0; + padding: 0; +} + +table +{ + border-collapse: collapse; + border-spacing: 0; +} + +th, td +{ + text-align: left; + vertical-align: top; +} + +h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } + +img { border: 0; } + +body { + background-color: #ffffff; + color: #333333; + padding: 0; + margin: 0; + font-family: "Helvetica Neue", Arial, Helvetica, Helmet, Freesans, sans-serif; + font-weight: normal; + font-style: normal; + line-height: 1.5em; + position: relative; + cursor: default; + font-size: 1em; +} + +a{ + color: #336c86; + text-decoration: none; +} + +a:hover, +a:focus, +a:active { + color: #333; +} + +/* Button styles */ +.button-base { + padding: 0.5em 1.25em; + border-radius: 3px; + display: inline-block; + font-weight: 600; + text-decoration: none; + transition: background-color 300ms ease-out; + margin-bottom: 0; + font-size: 0.875em; + &:hover, + &:active, + &:focus { + text-decoration: none; + transition: background-color 300ms ease-out; + cursor: pointer; + } +} + +.button-disabled { + background-color: #f4f4f4 !important; + border: 1px solid #e9e9e9 !important; + cursor: default !important; + color: #333 !important; + font-weight: normal; + &:hover, + &:active, + &:focus { + background-color: #f4f4f4 !important; + color: #333 !important; + } +} + +.alaveteli-widget { + width: 318px; + height: 213px; + border: 1px solid #e9e9e9; + background: #e9e9e9 url("widget-base.png") top left no-repeat; + position: relative; + background-color: $body-bg; + color: $heading-color; +} + +.alaveteli-widget__title { + position: absolute; + top: 1em; + left: 16px; + width: 160px; + height: 75px; + overflow: hidden; + } + +.alaveteli-widget__status { + position: absolute; + top: 97px; + left: 16px; + font-weight: bold; + text-transform: uppercase; + width: 200px; + text-transform: none; + + &.successful, + &.partially_successful { + color: $status-success; + } + + &.requires_admin, + &.waiting_response_very_overdue, + &.not_held, + &.rejected { + color: $status-failure; + } + + &.waiting_response, + &.waiting_response_overdue, + &.user_withdrawn, + &.waiting_clarification, + &.gone_postal, + &.internal_review, + &.attention_requested { + color: $status-pending; + } +} + +.alaveteli-widget__status__status-label { + margin: 0; + font-weight: normal; + font-size: 0.875em; + line-height: 1.1em; + color: #555; + text-transform: capitalize; +} + +.alaveteli-widget__left { + position: absolute; + width: 145px; +} + +.alaveteli-widget__people-count { + position: absolute; + top: 22px; + left: 197px; + width: 100px; + text-align: center; + line-height: 1.3em; +} +.alaveteli-widget__count { + font-size: 55px; + line-height: 55px; + text-align: center; + font-weight: bold; + color: $button-bg; +} + +.alaveteli-widget__bottom a { + text-decoration: none; +} + +.alaveteli-widget__button--down, +.alaveteli-widget__button { + position: absolute; + left: 16px; + text-align: center; + top: 167px; + @extend .button-base; + color: #fff; + background-color: $button-bg; + border: none; + &:hover, + &:active, + &:focus, + &:visited:hover, + &:visited:active, + &:visited:focus { + background-color: darken($button-bg, 10%); + color: #fff; + } +} -- cgit v1.2.3 From c5d92eff8ea9aba5e379c5b43c3a5c19fa46d66f Mon Sep 17 00:00:00 2001 From: Louise Crow Date: Tue, 10 Mar 2015 12:20:29 +0000 Subject: Widget styles and image from @martinwright --- assets/stylesheets/responsive/custom.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/assets/stylesheets/responsive/custom.scss b/assets/stylesheets/responsive/custom.scss index 9debf2f..4a7f10c 100644 --- a/assets/stylesheets/responsive/custom.scss +++ b/assets/stylesheets/responsive/custom.scss @@ -581,4 +581,21 @@ dt { font-size: 1.1rem; } +/* Widget */ +.alaveteli-widget { + background-color: $body-bg; + color: $heading-color; +} + +.alaveteli-widget__people-count { + top: 28px; +} +.alaveteli-widget__count { + font-weight: bold; + color: $button-bg; +} + +.alaveteli-widget__button { + top: 167px; +} -- cgit v1.2.3 From 03486143eabbc7a95be2af38f6d8a079fb2bd710 Mon Sep 17 00:00:00 2001 From: Louise Crow Date: Tue, 10 Mar 2015 15:51:02 +0000 Subject: Latest style and bg from @martinwright --- assets/stylesheets/responsive/custom.scss | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/assets/stylesheets/responsive/custom.scss b/assets/stylesheets/responsive/custom.scss index 4a7f10c..036ff30 100644 --- a/assets/stylesheets/responsive/custom.scss +++ b/assets/stylesheets/responsive/custom.scss @@ -588,7 +588,8 @@ dt { } .alaveteli-widget__people-count { - top: 28px; + top: 22px; + left: 197px; } .alaveteli-widget__count { @@ -599,3 +600,31 @@ dt { .alaveteli-widget__button { top: 167px; } + +.alaveteli-widget__status { + width: 200px; + text-transform: none; + + &.successful, + &.partially_successful { + color: $status-success; + } + + &.requires_admin, + &.waiting_response_very_overdue, + &.not_held, + &.rejected { + color: $status-failure; + } + + &.waiting_response, + &.waiting_response_overdue, + &.user_withdrawn, + &.waiting_clarification, + &.gone_postal, + &.internal_review, + &.attention_requested { + color: $status-pending; + } + +} -- cgit v1.2.3 From 1b86fdc63d52074fa499fbcfb30038bc3654903f Mon Sep 17 00:00:00 2001 From: Louise Crow Date: Fri, 10 Apr 2015 17:18:41 +0100 Subject: Move css for widget to widget.css. Imports seem to be too complicated for what needs to be a simple and small bit of css to sit on someone else's site. --- assets/stylesheets/responsive/custom.scss | 46 ------------------------------- assets/stylesheets/widget.scss | 9 ++---- 2 files changed, 3 insertions(+), 52 deletions(-) diff --git a/assets/stylesheets/responsive/custom.scss b/assets/stylesheets/responsive/custom.scss index 036ff30..9debf2f 100644 --- a/assets/stylesheets/responsive/custom.scss +++ b/assets/stylesheets/responsive/custom.scss @@ -581,50 +581,4 @@ dt { font-size: 1.1rem; } -/* Widget */ -.alaveteli-widget { - background-color: $body-bg; - color: $heading-color; -} - -.alaveteli-widget__people-count { - top: 22px; - left: 197px; -} - -.alaveteli-widget__count { - font-weight: bold; - color: $button-bg; -} - -.alaveteli-widget__button { - top: 167px; -} - -.alaveteli-widget__status { - width: 200px; - text-transform: none; - &.successful, - &.partially_successful { - color: $status-success; - } - - &.requires_admin, - &.waiting_response_very_overdue, - &.not_held, - &.rejected { - color: $status-failure; - } - - &.waiting_response, - &.waiting_response_overdue, - &.user_withdrawn, - &.waiting_clarification, - &.gone_postal, - &.internal_review, - &.attention_requested { - color: $status-pending; - } - -} diff --git a/assets/stylesheets/widget.scss b/assets/stylesheets/widget.scss index 80a08b6..7e0e7cc 100644 --- a/assets/stylesheets/widget.scss +++ b/assets/stylesheets/widget.scss @@ -45,7 +45,7 @@ body { font-size: 1em; } -a{ +a{ color: #336c86; text-decoration: none; } @@ -174,12 +174,7 @@ a:active { text-decoration: none; } -.alaveteli-widget__button--down, .alaveteli-widget__button { - position: absolute; - left: 16px; - text-align: center; - top: 167px; @extend .button-base; color: #fff; background-color: $button-bg; @@ -194,3 +189,5 @@ a:active { color: #fff; } } + + -- cgit v1.2.3 From 57c5d93d3cb83cfe024a7de913d0bf3a52d492d5 Mon Sep 17 00:00:00 2001 From: Martin Wright Date: Fri, 3 Jul 2015 17:05:46 +0100 Subject: add widget styles for our theme --- assets/stylesheets/widget.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/assets/stylesheets/widget.scss b/assets/stylesheets/widget.scss index 7e0e7cc..75f3758 100644 --- a/assets/stylesheets/widget.scss +++ b/assets/stylesheets/widget.scss @@ -45,7 +45,7 @@ body { font-size: 1em; } -a{ +a{ color: #336c86; text-decoration: none; } @@ -189,5 +189,3 @@ a:active { color: #fff; } } - - -- cgit v1.2.3 From 250a55d5578e4102ea1b2e2f2a1977cad5d67b0f Mon Sep 17 00:00:00 2001 From: Martin Wright Date: Mon, 6 Jul 2015 08:51:58 +0100 Subject: updated theme with all button states --- assets/stylesheets/widget.scss | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/assets/stylesheets/widget.scss b/assets/stylesheets/widget.scss index 75f3758..e0fa302 100644 --- a/assets/stylesheets/widget.scss +++ b/assets/stylesheets/widget.scss @@ -1,4 +1,3 @@ - $body-bg: #f7eee1; $button-bg: #8b9352; $heading-color: #3d3b38; @@ -6,7 +5,6 @@ $status-success: #aab26e; $status-failure: #ff7959; $status-pending: #e69e5d; - /* CSS Mini Reset */ html, body, div, form, fieldset, legend, label @@ -66,6 +64,7 @@ a:active { transition: background-color 300ms ease-out; margin-bottom: 0; font-size: 0.875em; + text-align: center; &:hover, &:active, &:focus { @@ -162,6 +161,7 @@ a:active { text-align: center; line-height: 1.3em; } + .alaveteli-widget__count { font-size: 55px; line-height: 55px; @@ -170,6 +170,14 @@ a:active { color: $button-bg; } +.alaveteli-widget__bottom { + position: absolute; + bottom: 0; + left: 0; + width: 72%; + padding: 1em 0 0.9em 1em; +} + .alaveteli-widget__bottom a { text-decoration: none; } @@ -179,6 +187,8 @@ a:active { color: #fff; background-color: $button-bg; border: none; + position: relative; + top: 0.375em; &:hover, &:active, &:focus, @@ -189,3 +199,14 @@ a:active { color: #fff; } } + +.alaveteli-widget__button--sign-in-to-track { + @extend .alaveteli-widget__button; + font-size: 13px; +} + +.alaveteli-widget__button--unsubscribe, +.alaveteli-widget__button--create-track, +.alaveteli-widget__button--create-vote { + @extend .alaveteli-widget__button; +} -- cgit v1.2.3