From 923ec89eac2c9f8c6424ff838bc44114ced7939b Mon Sep 17 00:00:00 2001 From: Leandro Nunes dos Santos Date: Thu, 16 Apr 2015 14:17:31 -0300 Subject: [PATCH] adding sass support --- images/icons/desenvolvimento-social.png | Bin 0 -> 2360 bytes images/icons/desenvolvimento.png | Bin 2360 -> 0 bytes index.html | 4 +++- sass/_footer.scss | 3 +++ sass/_header.scss | 7 +++++++ sass/_login.scss | 6 ++++++ sass/_nav.scss | 40 ++++++++++++++++++++++++++++++++++++++++ sass/_proposal_categories.scss | 112 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ sass/_proposal_group.scss | 37 +++++++++++++++++++++++++++++++++++++ sass/style.scss | 115 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 10 files changed, 323 insertions(+), 1 deletion(-) create mode 100644 images/icons/desenvolvimento-social.png delete mode 100644 images/icons/desenvolvimento.png create mode 100644 sass/_footer.scss create mode 100644 sass/_header.scss create mode 100644 sass/_login.scss create mode 100644 sass/_nav.scss create mode 100644 sass/_proposal_categories.scss create mode 100644 sass/_proposal_group.scss create mode 100755 sass/style.scss diff --git a/images/icons/desenvolvimento-social.png b/images/icons/desenvolvimento-social.png new file mode 100644 index 0000000..3648ed4 Binary files /dev/null and b/images/icons/desenvolvimento-social.png differ diff --git a/images/icons/desenvolvimento.png b/images/icons/desenvolvimento.png deleted file mode 100644 index 3648ed4..0000000 Binary files a/images/icons/desenvolvimento.png and /dev/null differ diff --git a/index.html b/index.html index b8b1faf..2e40e0c 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,13 @@ Participa Brasil - + + diff --git a/sass/_footer.scss b/sass/_footer.scss new file mode 100644 index 0000000..6bf10d9 --- /dev/null +++ b/sass/_footer.scss @@ -0,0 +1,3 @@ +footer { + display: none; +} diff --git a/sass/_header.scss b/sass/_header.scss new file mode 100644 index 0000000..2fa0d1c --- /dev/null +++ b/sass/_header.scss @@ -0,0 +1,7 @@ +header { + height: 100px; + background: #fff; + margin: 0; + padding: 0; + position: relative; +} diff --git a/sass/_login.scss b/sass/_login.scss new file mode 100644 index 0000000..de9c8d2 --- /dev/null +++ b/sass/_login.scss @@ -0,0 +1,6 @@ +#login a { + margin: 10px; + font-size: 12px; + color: #333; + text-decoration: none; +} diff --git a/sass/_nav.scss b/sass/_nav.scss new file mode 100644 index 0000000..7f2893f --- /dev/null +++ b/sass/_nav.scss @@ -0,0 +1,40 @@ +nav { + width: 100%; + padding: 0; + margin: 0; +} + +nav ul { + padding: 0; + margin: 0; +} + +nav li { + display: inline; + list-style: none; + padding: 0; + margin: 0; +} + +nav li a { + display: block; + width: 48%; + float: left; + text-align: center; + text-decoration: none; + font-size: 16px; + font-weight: bold; + color: #fff; + background: #03316f; + margin: 0; + padding: 20px 1%; + text-transform: uppercase; + border-bottom: 3px solid #001129; +} + +nav li a.active { + position: relative; + background: #fff; + color: #03316f; + border-bottom: 3px solid #fff; +} diff --git a/sass/_proposal_categories.scss b/sass/_proposal_categories.scss new file mode 100644 index 0000000..f3b86e6 --- /dev/null +++ b/sass/_proposal_categories.scss @@ -0,0 +1,112 @@ +#proposal-categories{ + background: #fff; + clear: both; + margin: 0; + width: 100%; + padding: 10px; + text-align: center; + li { + list-style: none; + display: inline-block; + } + a { + text-decoration: none; + color: #fff; + margin: 10px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + background-position: center 30px; + background-repeat: no-repeat; + width: 140px; + height: 40px; + display: inline-block; + font-size: 14px; + font-family: asap_bold, sans; + font-weight: bolder; + text-align: center; + padding-top: 100px; + overflow: hidden; + border-width: 2px; + border-style: solid; + hover: { + border-color: #fff !important; + } + } +} + +$categories: (saude: #00cbd7, seguranca: #e34748, educacao: #ffb400, desenvolvimento-social: #51d0b3); + +@each $category, $color in $categories { + .proposal-category-items-#{$category} { + background-color: $color; + } + #proposal-category-#{$category} a { + background-image: url(./images/icons/#{$category}.png); + background-color: $color; + border-color: $color; + } +} + +#proposal-categories-container { + display: inline; + width: auto; +} + +.proposal-category-items { + margin: 0 auto; + padding: 0; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} + +ul.category { + display: block; + text-align: left; + padding: 0; +} + +.category > li { + color: #FFFFFF; + text-align: left; + font-family: asap_bold; + font-size: 16px; + padding: 10px 10px 5px 10px; + margin-bottom: 10px; + background-color: gray; +} + +.proposal-item p { + font-size: 14px; + color: #172938; + margin: 0; + padding-top: 5px; + background: #fff; + margin-bottom: 10px; + text-align: left; +} + +.proposal-item > a { + border-top: 1px dotted #03316f; + padding-top: 10px; + display: block; + margin: 0; + color: #03316f; + text-align: left; + font-family: asap_bold; + font-size: 16px; + text-decoration: none; + background: #fff; +} + +.proposal-category-items .proposal-item { + width: 290px; + min-height: 134px; + margin: 10px; + background: #fff; + border-radius: 7px; + padding: 15px; + vertical-align: top; +} + diff --git a/sass/_proposal_group.scss b/sass/_proposal_group.scss new file mode 100644 index 0000000..5ec1529 --- /dev/null +++ b/sass/_proposal_group.scss @@ -0,0 +1,37 @@ +#proposal-group{ + background: #fff; + clear: both; + margin: 0; + width: 100%; + padding: 10px; + text-align: center; + li { + list-style: none; + display: inline-block; + } + a { + text-decoration: none; + color: #fff; + margin: 10px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + background-position: center 30px; + background-repeat: no-repeat; + width: 140px; + height: 40px; + display: inline-block; + font-size: 14px; + font-family: asap_bold, sans; + font-weight: bolder; + text-align: center; + padding-top: 100px; + overflow: hidden; + border-width: 2px; + border-style: solid; + hover: { + border-color: #fff !important; + } + } +} + diff --git a/sass/style.scss b/sass/style.scss new file mode 100755 index 0000000..be180ee --- /dev/null +++ b/sass/style.scss @@ -0,0 +1,115 @@ +@font-face { + font-family: asap_bold_italic; + src: url(../fonts/Asap-BoldItalic.ttf); +} + +@font-face { + font-family: asap_bold; + src: url(../fonts/Asap-Bold.ttf); +} + +@font-face { + font-family: asap_italic; + src: url(../fonts/Asap-Italic.ttf); +} + +@font-face { + font-family: asap; + src: url(../fonts/Asap-Regular.ttf); +} + +@import 'nav'; +@import 'header'; +@import 'proposal_categories'; +@import 'proposal_group'; +@import 'login'; +@import 'footer'; + +html, body { + margin: 0; + padding: 0; + height: 100%; + font-family: asap, sans; +} + +h1 { + position: absolute; + bottom: 0; + left: 0; + color: #03316f; + font-size: 28px; + padding: 20px; + margin: 0; + display: block; + width: 100%; + text-transform: uppercase; + border-bottom: 1px solid #d6dcd7; +} + +#content { + padding-bottom: 150px; + background: transparent url(../images/header.png) center bottom no-repeat; + p { + font{ + weight: lighter; + size: 14px; + } + text-align: justify; + margin: 20px; + line-height: 1.5em; + } +} + +.hide { + display: none; +} + +.mobile nav { + position: absolute; + bottom: 0; +} + +/* + * Each button + * FIXME: This selector doesn't look reliable + */ + + +ul.category { + display: block; + text-align: left; + padding: 0; +} + +.category > li { + color: #03316f; + text-align: left; + display: block !important; + font-family: asap_bold; + font-size: 16px; + padding: 10px 0 5px 0; + border-bottom: 1px solid #03316f; + margin-bottom: 10px; +} + +.proposal-item p { + font-size: 14px; + color: #172938; + margin: 0; + padding: 10px; + padding-top: 5px; + background: #fff; + margin-bottom: 10px; +} + +.proposal-item > a { + display: block; + margin: 0; + color: #03316f; + text-align: left; + font-family: asap_bold; + font-size: 16px; + text-decoration: none; + padding: 10px; + background: #fff; +} -- libgit2 0.21.2