Refactors SCSS
This commit is contained in:
Alberto Garcia Cabeza
@@ -205,7 +205,7 @@ body.admin {
|
||||
.delete {
|
||||
border-bottom: 1px dotted #CF2A0E;
|
||||
color: $delete;
|
||||
font-size: rem-calc(12);
|
||||
font-size: $small-font-size;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
border-bottom: 1px dotted white;
|
||||
|
||||
@@ -1,127 +1,50 @@
|
||||
// Table of Contents
|
||||
//
|
||||
// 01. Variables
|
||||
// 02. Mixins
|
||||
// 03. Global styles
|
||||
// 04. Header
|
||||
// 05. Footer
|
||||
// 06. Tags
|
||||
// 07. Auth pages
|
||||
// 08. Forms
|
||||
// 09. Alerts
|
||||
// 10. User account
|
||||
// 11. Filters & search
|
||||
// 12. Official levels
|
||||
// 13. Pagination
|
||||
// 14. Tables
|
||||
// 15. Social
|
||||
// 16. Pages
|
||||
// 17. Verification
|
||||
// 18. Comments
|
||||
// 19. Flags
|
||||
// 20. Accesibility
|
||||
// 21. Activity
|
||||
// 01. Global styles
|
||||
// 02. Header
|
||||
// 03. Footer
|
||||
// 04. Tags
|
||||
// 05. Auth pages
|
||||
// 06. Forms
|
||||
// 07. Alerts
|
||||
// 08. User account
|
||||
// 09. Filters & search
|
||||
// 10. Official levels
|
||||
// 11. Pagination
|
||||
// 12. Tables
|
||||
// 13. Social
|
||||
// 14. Pages
|
||||
// 15. Verification
|
||||
// 16. Comments
|
||||
// 17. Flags
|
||||
// 18. Activity
|
||||
//
|
||||
|
||||
// 01. Variables
|
||||
// 01. Global styles
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
@import "variables";
|
||||
*, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// 02. Mixins
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin back {
|
||||
color: $text-medium;
|
||||
body {
|
||||
background: white;
|
||||
color: $text;
|
||||
font-family: $font-sans;
|
||||
font-size: $small-font-size;
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
@mixin logo {
|
||||
color: white;
|
||||
font-family: $font-logo;
|
||||
font-weight: lighter;
|
||||
|
||||
@media (min-width: $small-breakpoint) {
|
||||
font-size: rem-calc(24);
|
||||
line-height: rem-calc(48);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
|
||||
@media (min-width: $small-breakpoint) {
|
||||
height: 80px;
|
||||
margin-right: rem-calc(12);
|
||||
margin-top: 0;
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin title {
|
||||
font-size: $title-font-size;
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
clear: both;
|
||||
font-family: $font-sans;
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
|
||||
@mixin h1 {
|
||||
font-family: $font-sans;
|
||||
font-size: $h2-font-size;
|
||||
font-weight: $font-bold;
|
||||
|
||||
@media (min-width: $small-breakpoint) {
|
||||
font-size: $h1-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin h2 {
|
||||
font-family: $font-sans;
|
||||
font-size: $h3-font-size;
|
||||
font-weight: $font-bold;
|
||||
|
||||
@media (min-width: $small-breakpoint) {
|
||||
font-size: $h2-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin h3 {
|
||||
font-family: $font-sans;
|
||||
font-size: $h4-font-size;
|
||||
font-weight: $font-bold;
|
||||
|
||||
@media (min-width: $small-breakpoint) {
|
||||
font-size: $h3-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin h4 {
|
||||
font-family: $font-sans;
|
||||
font-size: $h5-font-size;
|
||||
font-weight: $font-bold;
|
||||
|
||||
@media (min-width: $small-breakpoint) {
|
||||
font-size: $h4-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin h5 {
|
||||
font-family: $font-sans;
|
||||
font-size: $h6-font-size;
|
||||
font-weight: $font-bold;
|
||||
|
||||
@media (min-width: $small-breakpoint) {
|
||||
font-size: $h5-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin h6 {
|
||||
font-family: $font-sans;
|
||||
font-size: $h6-font-size;
|
||||
font-weight: $font-normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include h1();
|
||||
}
|
||||
@@ -144,49 +67,13 @@ h5 {
|
||||
|
||||
h6 {
|
||||
@include h6();
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
clear: both;
|
||||
font-family: $font-sans;
|
||||
line-height: $heading-line-height;
|
||||
margin: rem-calc(12) 0 rem-calc(6);
|
||||
|
||||
&.lead {
|
||||
border-bottom: rem-calc(6) solid $brand;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: $text-medium;
|
||||
}
|
||||
}
|
||||
|
||||
// 03. Global styles
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
*, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: white;
|
||||
color: $text;
|
||||
font-family: $font-sans;
|
||||
font-size: rem-calc(17);
|
||||
font-weight: 400;
|
||||
line-height: rem-calc(26);
|
||||
text-rendering: optimizeLegibility;
|
||||
font-weight: $font-normal;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem-calc(17);
|
||||
font-weight: 400;
|
||||
line-height: rem-calc(26);
|
||||
font-size: $base-font-size;
|
||||
font-weight: $font-normal;
|
||||
line-height: $base-line-height;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -208,7 +95,7 @@ a {
|
||||
|
||||
.button {
|
||||
background: $brand;
|
||||
font-family: $font-sans !important;
|
||||
font-family: $font-sans;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none !important;
|
||||
@@ -236,46 +123,22 @@ a {
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin-top: rem-calc(24);
|
||||
margin-bottom: rem-calc(48);
|
||||
margin-top: $line-height;
|
||||
margin-bottom: $line-height*2;
|
||||
}
|
||||
|
||||
.sidebar-divider {
|
||||
border-top: 1px solid $border;
|
||||
margin-top: rem-calc(24);
|
||||
margin-top: $line-height;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-nav {
|
||||
background-color: #f2f2f2;
|
||||
border-radius: rem-calc(3);
|
||||
padding: rem-calc(10) rem-calc(10) rem-calc(10) 0;
|
||||
margin: rem-calc(12) 0;
|
||||
}
|
||||
|
||||
.sub-nav dt, .sub-nav dd, .sub-nav li {
|
||||
padding: rem-calc(3) 0;
|
||||
|
||||
&.active {
|
||||
background: #008CBA;
|
||||
border-radius: rem-calc(3);
|
||||
color: white;
|
||||
cursor: default;
|
||||
font-weight: normal;
|
||||
padding: rem-calc(3) rem-calc(14);
|
||||
|
||||
a:hover {
|
||||
color: #737373;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.f-dropdown {
|
||||
li a {
|
||||
font-size: rem-calc(12);
|
||||
font-size: $small-font-size;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover;
|
||||
@@ -312,14 +175,9 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
background-color: rgba(0,0,0,.06);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
min-height: 100%;
|
||||
margin: 0 auto rem-calc(-288);
|
||||
margin: 0 auto (-$line-height)*12;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -330,7 +188,7 @@ a {
|
||||
|
||||
.footer, .push {
|
||||
clear: both;
|
||||
min-height: rem-calc(288);
|
||||
min-height: $line-height*12;
|
||||
}
|
||||
|
||||
.ie-alert-box {
|
||||
@@ -339,43 +197,31 @@ a {
|
||||
width: 100%;
|
||||
|
||||
a.close {
|
||||
font-size: 36px;
|
||||
font-size: $h2-font-size;
|
||||
top: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
.moderator-actions {
|
||||
margin: rem-calc(24) 0;
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.text-medium {
|
||||
font-size: rem-calc(16) !important;
|
||||
}
|
||||
|
||||
// 04. Header
|
||||
// 02. Header
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
header {
|
||||
background: $highlight;
|
||||
border-bottom: rem-calc(1) solid $border;
|
||||
border-bottom: 1px solid $border;
|
||||
|
||||
.home-page {
|
||||
padding-top: rem-calc(24);
|
||||
}
|
||||
|
||||
.icon-external {
|
||||
display: inline-block;
|
||||
font-size: rem-calc(12);
|
||||
opacity: .5;
|
||||
padding-top: rem-calc(3);
|
||||
vertical-align: top;
|
||||
|
||||
@media (min-width: $small-breakpoint) {
|
||||
padding-top: 0;
|
||||
position: absolute;
|
||||
right: -18px;
|
||||
top: 3px;
|
||||
}
|
||||
padding: $line-height 0;
|
||||
}
|
||||
|
||||
.selected {
|
||||
@@ -392,10 +238,6 @@ header {
|
||||
float: left;
|
||||
margin-left: rem-calc(12);
|
||||
}
|
||||
|
||||
.icon-language {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
|
||||
.external-links {
|
||||
@@ -480,10 +322,10 @@ header {
|
||||
|
||||
&.expanded .toggle-topbar a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.expanded .toggle-topbar a span::after {
|
||||
box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
|
||||
span::after {
|
||||
box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -492,16 +334,43 @@ header {
|
||||
width: 100%;
|
||||
|
||||
ul {
|
||||
margin-left: 0;
|
||||
margin-right: rem-calc(12);
|
||||
margin-left: rem-calc(12);
|
||||
|
||||
@media (min-width: $small-breakpoint) {
|
||||
margin-left: rem-calc(24);
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul li {
|
||||
background: none;
|
||||
li {
|
||||
background: none;
|
||||
|
||||
&:not(.has-form) a:not(.button) {
|
||||
background: none;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
@media (min-width: $small-breakpoint) {
|
||||
background: none;
|
||||
line-height: rem-calc(80);
|
||||
padding: 0 rem-calc(12);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
transition: text-decoration 275ms;
|
||||
}
|
||||
|
||||
&.active:not(.has-form) a:not(.button) {
|
||||
background: none;
|
||||
height: rem-calc(96);
|
||||
line-height: $line-height*4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul li > a {
|
||||
@@ -512,6 +381,10 @@ header {
|
||||
line-height: $line-height*1.5;
|
||||
text-align: left;
|
||||
background: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: #007095 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $small-breakpoint) {
|
||||
@@ -526,54 +399,6 @@ header {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul li > a {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
|
||||
ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
|
||||
background-color: #007095 !important;
|
||||
}
|
||||
|
||||
ul li, ul li:hover:not(.has-form) > a:not(.button) {
|
||||
|
||||
@media (min-width: $small-breakpoint) {
|
||||
background: none;
|
||||
border: 0;
|
||||
line-height: rem-calc(80);
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-left: rem-calc(12);
|
||||
|
||||
@media (min-width: $small-breakpoint) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
li:not(.has-form) a:not(.button) {
|
||||
background: none;
|
||||
color: white;
|
||||
|
||||
@media (min-width: $small-breakpoint) {
|
||||
line-height: rem-calc(80);
|
||||
padding: 0 rem-calc(12);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
transition: text-decoration 275ms;
|
||||
}
|
||||
}
|
||||
|
||||
li.active:not(.has-form) a:not(.button) {
|
||||
background: none;
|
||||
height: rem-calc(96);
|
||||
line-height: $line-height*4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-links {
|
||||
@@ -653,33 +478,34 @@ header {
|
||||
}
|
||||
}
|
||||
|
||||
// 05. Footer
|
||||
// 03. Footer
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
footer {
|
||||
color: #171819;
|
||||
color: $footer-color;
|
||||
|
||||
.logo {
|
||||
@include logo;
|
||||
.logo a {
|
||||
font-family: $font-logo;
|
||||
text-decoration: none;
|
||||
|
||||
a {
|
||||
color: #454A4C;
|
||||
line-height: rem-calc(36);
|
||||
padding-left: 0;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $small-font-size;
|
||||
|
||||
.info a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
a, a:active, a:focus {
|
||||
color: #454A4C;
|
||||
text-decoration: underline;
|
||||
color: $footer-link;
|
||||
|
||||
&:hover {
|
||||
color: #171819;
|
||||
color: $footer-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -687,35 +513,32 @@ footer {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
h2 a {
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid #BFC1C3;
|
||||
display: block;
|
||||
padding-bottom: rem-calc(6);
|
||||
text-decoration: none;
|
||||
}
|
||||
border-bottom: 1px solid $footer-border;
|
||||
display: block;
|
||||
font-size: $h3-font-size;
|
||||
line-height: $h3-line-height;
|
||||
padding-bottom: $line-height/4;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: #DEE0E2;
|
||||
background: $footer-bg;
|
||||
border-top: rem-calc(6) solid $brand;
|
||||
padding-top: $line-height;
|
||||
}
|
||||
|
||||
.subfooter {
|
||||
border-top: 1px solid #BFC1C3;
|
||||
opacity: .75;
|
||||
margin-top: rem-calc(24);
|
||||
border-top: 1px solid $footer-border;
|
||||
padding-top: rem-calc(12);
|
||||
}
|
||||
|
||||
// 06. Tags
|
||||
// 04. Tags
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
.tags, .tag-cloud {
|
||||
font-family: $font-sans;
|
||||
|
||||
a {
|
||||
background: $border;
|
||||
@@ -768,7 +591,7 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
// 07. Auth pages
|
||||
// 05. Auth pages
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
.auth-page {
|
||||
@@ -820,7 +643,7 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
// 08. Forms
|
||||
// 06. Forms
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
form.locale-form {
|
||||
@@ -943,7 +766,7 @@ form {
|
||||
}
|
||||
}
|
||||
|
||||
// 09. Alerts
|
||||
// 07. Alerts
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
.alert-box {
|
||||
@@ -1006,62 +829,13 @@ label.error, label.error a {
|
||||
padding-top: rem-calc(24);
|
||||
}
|
||||
|
||||
// 10. User account
|
||||
// 08. User account
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
.account {
|
||||
background: white;
|
||||
padding-top: rem-calc(24);
|
||||
|
||||
a {
|
||||
font-family: $font-sans;
|
||||
}
|
||||
|
||||
.icon-debates {
|
||||
color: $debates;
|
||||
font-size: rem-calc(60);
|
||||
line-height: $line-height;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-bottom: rem-calc(24);
|
||||
}
|
||||
|
||||
.initialjs-avatar {
|
||||
margin-bottom: $line-height;
|
||||
}
|
||||
|
||||
h1.avatar {
|
||||
margin-left: rem-calc(12);
|
||||
}
|
||||
|
||||
h3 {
|
||||
clear: both;
|
||||
font-size: rem-calc(20);
|
||||
font-weight: bold;
|
||||
line-height: $line-height;
|
||||
margin: 0;
|
||||
margin-bottom: rem-calc(12);
|
||||
}
|
||||
|
||||
.recommendations {
|
||||
list-style-type: none;
|
||||
margin-left: 0;
|
||||
margin-top: rem-calc(24);
|
||||
|
||||
li {
|
||||
font-size: rem-calc(12);
|
||||
margin: rem-calc(12) 0;
|
||||
|
||||
&:before {
|
||||
color: $debates;
|
||||
content: "l ";
|
||||
font-family: "icons" !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
height: rem-calc(48);
|
||||
margin-right: rem-calc(12);
|
||||
@@ -1143,7 +917,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
|
||||
}
|
||||
}
|
||||
|
||||
// 11. Filters & search
|
||||
// 09. Filters & search
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
.filters, .search-results {
|
||||
@@ -1210,7 +984,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
|
||||
}
|
||||
}
|
||||
|
||||
// 12. Officials levels
|
||||
// 10. Officials levels
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
[class^="level-"] {
|
||||
@@ -1249,7 +1023,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
|
||||
background: $level-5;
|
||||
}
|
||||
|
||||
// 13. Pagination
|
||||
// 11. Pagination
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
ul.pagination {
|
||||
@@ -1260,7 +1034,7 @@ ul.pagination {
|
||||
}
|
||||
}
|
||||
|
||||
// 14. Tables
|
||||
// 12. Tables
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
table {
|
||||
@@ -1285,7 +1059,7 @@ table {
|
||||
}
|
||||
}
|
||||
|
||||
// 15. Social
|
||||
// 13. Social
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
.button.button-twitter {
|
||||
@@ -1517,7 +1291,7 @@ table {
|
||||
}
|
||||
}
|
||||
|
||||
// 16. Pages
|
||||
// 14. Pages
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
.page {
|
||||
@@ -1608,7 +1382,7 @@ table {
|
||||
}
|
||||
}
|
||||
|
||||
// 17. Verification
|
||||
// 15. Verification
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
.verification {
|
||||
@@ -1758,7 +1532,7 @@ table {
|
||||
}
|
||||
}
|
||||
|
||||
// 18. Comments
|
||||
// 16. Comments
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
.comments {
|
||||
@@ -1921,7 +1695,7 @@ table {
|
||||
}
|
||||
}
|
||||
|
||||
// 19. Flags
|
||||
// 17. Flags
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
.flag-content {
|
||||
@@ -1946,38 +1720,20 @@ table {
|
||||
color: $delete;
|
||||
}
|
||||
|
||||
// 20. Accesibility
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// 21. Activity
|
||||
// 18. Activity
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
.activity {
|
||||
margin-bottom: rem-calc(48);
|
||||
margin-top: rem-calc(24);
|
||||
margin-bottom: $line-height*2;
|
||||
margin-top: $line-height;
|
||||
|
||||
.sub-nav {
|
||||
background: none;
|
||||
border-bottom: 1px solid $border;
|
||||
border-radius: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
dd.active {
|
||||
background: none;
|
||||
border-bottom: 2px solid $brand;
|
||||
border-radius: 0;
|
||||
color: $brand;
|
||||
padding-bottom: $line-height/4;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1994,7 +1750,6 @@ table {
|
||||
font-size: rem-calc(24);
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -165,8 +165,6 @@
|
||||
.progress {
|
||||
background-color: rgba(255,255,255,.8);
|
||||
height: rem-calc(12);
|
||||
margin-bottom: rem-calc(6);
|
||||
margin-top: rem-calc(4);
|
||||
|
||||
.meter {
|
||||
background: $votes-like;
|
||||
@@ -178,8 +176,8 @@
|
||||
color: $brand;
|
||||
vertical-align: top;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 18px;
|
||||
top: 13px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
abbr {
|
||||
@@ -295,22 +293,14 @@
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
h2 {
|
||||
clear: both;
|
||||
font-size: rem-calc(20);
|
||||
font-weight: bold;
|
||||
line-height: $line-height;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.recommendations {
|
||||
list-style-type: none;
|
||||
margin-left: 0;
|
||||
margin-top: rem-calc(24);
|
||||
margin-top: $line-height;
|
||||
|
||||
li {
|
||||
font-size: rem-calc(12);
|
||||
margin: rem-calc(12) 0;
|
||||
font-size: $small-font-size;
|
||||
margin: $line-height/2 0;
|
||||
|
||||
&:before {
|
||||
content: "l ";
|
||||
@@ -334,7 +324,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 02. Show participation
|
||||
// 03. Show participation
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
.debate-show, .proposal-show {
|
||||
@@ -344,18 +334,6 @@
|
||||
@include back;
|
||||
}
|
||||
|
||||
h1 {
|
||||
clear: both;
|
||||
font-size: rem-calc(30);
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
text-transform: lowercase;
|
||||
|
||||
&:first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: rem-calc(12) 0;
|
||||
}
|
||||
@@ -367,7 +345,7 @@
|
||||
.debate-info, .proposal-info {
|
||||
clear: both;
|
||||
color: $text-medium;
|
||||
font-family: $font-sans;
|
||||
font-size: $small-font-size;
|
||||
line-height: $line-height*2;
|
||||
position: relative;
|
||||
|
||||
@@ -376,7 +354,7 @@
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem-calc(15);
|
||||
font-size: $small-font-size;
|
||||
line-height: $line-height;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -634,7 +612,7 @@
|
||||
|
||||
.debate-info, .proposal-info {
|
||||
color: $text-medium;
|
||||
font-family: $font-sans;
|
||||
font-size: $small-font-size;
|
||||
margin: rem-calc(6) 0 0;
|
||||
|
||||
.icon-comments {
|
||||
|
||||
@@ -11,27 +11,35 @@
|
||||
// 01. Typography
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
$base-font-size: rem-calc(17);
|
||||
$small-font-size: rem-calc(14);
|
||||
$lead-font-size: rem-calc(20);
|
||||
$title-font-size: rem-calc(52);
|
||||
$h1-font-size: rem-calc(40);
|
||||
$h2-font-size: rem-calc(30);
|
||||
$h3-font-size: rem-calc(20);
|
||||
$h4-font-size: rem-calc(17);
|
||||
$h5-font-size: rem-calc(15);
|
||||
$h6-font-size: rem-calc(13);
|
||||
$base-line-height: 1.5;
|
||||
$heading-line-height: 1.3;
|
||||
$lead-line-height: 1.7;
|
||||
|
||||
$font-sans: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
|
||||
$font-logo: 'Lato' !important;
|
||||
$font-sans: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif !important;
|
||||
|
||||
$font-normal: 400;
|
||||
$font-bold: 700;
|
||||
|
||||
$line-height: rem-calc(24);
|
||||
$base-font-size: rem-calc(17);
|
||||
$base-line-height: rem-calc(26);
|
||||
|
||||
$h1-font-size: rem-calc(44);
|
||||
$h1-line-height: rem-calc(57);
|
||||
|
||||
$h2-font-size: rem-calc(34);
|
||||
$h2-line-height: rem-calc(44);
|
||||
|
||||
$h3-font-size: rem-calc(24);
|
||||
$h3-line-height: rem-calc(31);
|
||||
|
||||
$h4-font-size: rem-calc(19);
|
||||
$h4-line-height: rem-calc(25);
|
||||
|
||||
$h5-font-size: rem-calc(16);
|
||||
$h5-line-height: rem-calc(21);
|
||||
|
||||
$h6-font-size: rem-calc(13);
|
||||
$h6-line-height: rem-calc(17);
|
||||
|
||||
$small-font-size: rem-calc(14);
|
||||
$line-height: rem-calc(24);
|
||||
|
||||
// 02. Colors
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
@@ -66,6 +74,11 @@ $proposals-border: #CC8425;
|
||||
|
||||
$highlight: #E7F2FC;
|
||||
|
||||
$footer-bg: #DEE0E2;
|
||||
$footer-color: #171819;
|
||||
$footer-link: #454A4C;
|
||||
$footer-border: #BFC1C3;
|
||||
|
||||
// 03. Forms
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
@@ -116,9 +129,3 @@ $small-breakpoint: em-calc(640);
|
||||
$medium-breakpoint: em-calc(1024);
|
||||
$large-breakpoint: em-calc(1440);
|
||||
$xlarge-breakpoint: em-calc(1920);
|
||||
|
||||
$small-range: (0, $small-breakpoint);
|
||||
$medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint);
|
||||
$large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint);
|
||||
$xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint);
|
||||
$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999));
|
||||
|
||||
Reference in New Issue
Block a user