From c1eec7fdb82ea0a683dbf6d5eff7bc930084deda Mon Sep 17 00:00:00 2001 From: Manas Solanki Date: Thu, 19 Apr 2018 14:32:11 +0530 Subject: [PATCH] [bs4] about page and media group using the bs4 --- foundation/public/css/erpnext-org-theme.css | 1613 +++++++++---------- foundation/templates/includes/macros.html | 8 +- foundation/www/about.html | 21 +- 3 files changed, 775 insertions(+), 867 deletions(-) diff --git a/foundation/public/css/erpnext-org-theme.css b/foundation/public/css/erpnext-org-theme.css index 01a72500..3b86d281 100644 --- a/foundation/public/css/erpnext-org-theme.css +++ b/foundation/public/css/erpnext-org-theme.css @@ -1,1162 +1,1071 @@ -/* palette colors*/ -/*utilities*/ -@import "reset.css"; -.align-items-center { - align-items: center; -} -.hide, -.hidden { - display: none; - visibility: hidden; -} -.top-zero { - margin-top: 0; -} -.bottom-zero { - margin-bottom: 0; -} -.top-spacer { - margin-top: 2.5rem; -} -.bottom-spacer { - margin-bottom: 2.5rem; -} -.top-spacer-4 { - margin-top: 4rem; -} -.bottom-spacer-4 { - margin-bottom: 4rem; -} -.gray-bg { - background-color: #fafbfc; -} -.dark-bg { - background-color: #2e3338; -} -.text-left { - text-align: left; -} -.text-right { - text-align: right; -} -.text-center { - text-align: center; -} -.text-muted { - color: #8d99a6; -} -.text-light { - color: #6c7680; -} -.text-white { - color: #fff; -} -.text-normal { - font-size: 1rem; -} -.text-medium { - font-size: 1.5rem; -} -.text-small { - font-size: 0.5rem; -} -.centered { - margin-left: auto; - margin-right: auto; -} -.bold { - font-weight: bold; -} -.list-unstyled { - padding: 0; -} -.list-unstyled li { - list-style: none; -} -.list-circle { - list-style: circle; -} -.bullet::before { - content: "\2022"; - display: inline-block; - width: 1em; - font-size: 1.25rem; -} -.half-width { - max-width: 50%; -} -.border { - border: 1px solid #d1d8dd; -} -.border-top { - border-top: 1px solid #d1d8dd; -} -.border-top-light { - border-top: 1px solid #ebeff2; -} -.saturate { - filter: grayscale(100%); -} -.saturate:hover { - filter: grayscale(0%); -} -/* colors */ -.green-bullet::before { - color: #98d85b; -} -/* components */ -.grid-of-four, -.grid-of-three { - grid-gap: 2.5rem; - display: grid; -} -.grid-of-four { - grid-template-columns: repeat(1, 1fr); -} -@media screen and (min-width: 500px) { - .grid-of-four { - grid-template-columns: repeat(2, 1fr); - } -} -@media screen and (min-width: 767px) { - .grid-of-four { - grid-template-columns: repeat(3, 1fr); - } -} -@media screen and (min-width: 991px) { - .grid-of-four { - grid-template-columns: repeat(4, 1fr); - } -} -.grid-of-three { - grid-template-columns: repeat(1, 1fr); -} -@media screen and (min-width: 500px) { - .grid-of-three { - grid-template-columns: repeat(2, 1fr); - } -} -@media screen and (min-width: 767px) { - .grid-of-three { - grid-template-columns: repeat(3, 1fr); - } -} -.columns { - display: flex; - justify-content: space-between; - flex-direction: column; -} -@media screen and (min-width: 767px) { - .columns { - flex-direction: inherit; - } -} -.column { - margin-bottom: 1rem; -} -@media screen and (min-width: 767px) { - .column { - margin: 0; - } -} -.three-column { - max-width: 100%; -} -@media screen and (min-width: 767px) { - .three-column { - max-width: 33%; - } -} -.copyright { - font-size: 1rem; -} -@media screen and (min-width: 767px) { - .copyright { - font-size: 0.75rem; - } -} -.flex-wrap { - flex-wrap: wrap; - justify-content: flex-start; -} -.grid-center { - justify-items: center; -} -.indicator, -.indicator-right { - background: none; - font-size: 12px; - vertical-align: middle; - font-weight: bold; - color: #6c7680; -} -.indicator::before, -.indicator-right::after { - content: ""; - display: inline-block; - height: 8px; - width: 8px; - border-radius: 8px; -} -.indicator::before { - margin: 0 4px 0 0; -} -.indicator-right::after { - margin: 0 0 0 4px; -} -.indicator.grey::before, -.indicator-right.grey::after { - background: #f0f4f7; -} -.indicator.blue::before, -.indicator-right.blue::after { - background: #5e64ff; -} -.indicator.red::before, -.indicator-right.red::after { - background: #ff5858; -} -.indicator.green::before, -.indicator-right.green::after { - background: #98d85b; -} -.indicator.orange::before, -.indicator-right.orange::after { - background: #ffa00a; -} -.indicator.purple::before, -.indicator-right.purple::after { - background: #743ee2; -} -.indicator.darkgrey::before, -.indicator-right.darkgrey::after { - background: #b8c2cc; -} -.indicator.black::before, -.indicator-right.black::after { - background: #36414c; -} -.indicator.yellow::before, -.indicator-right.yellow::after { - background: #feef72; -} -.indicator.light-blue::before, -.indicator-right.light-blue::after { - background: #7cd6fd; -} -.indicator.lightblue::before, -.indicator-right.lightblue::after { - background: #7cd6fd; -} -.modal-header .indicator { - float: left; - margin-top: 7.5px; - margin-right: 3px; -} + +/* + * /Users/manas/frappe/frappe-bench/apps/foundation/foundation/public/less/erpnext-org-theme.less + */ +@import "variables.less"; +@import "base.less"; +@import (css) "reset.css"; +@import "indicator.less"; + a { - color: #7575ff; - text-decoration: none; - transition: color 0.3s ease-out; + color: @brand-primary; + text-decoration: none; + transition: color @transition; + + &:hover { + color: @text-dark; + text-decoration: underline; + } + + &:focus, + &:visited { + outline: 0; + } } -a:hover { - color: #2e3338; - text-decoration: underline; -} -a:focus, -a:visited { - outline: 0; -} -[data-path=""] .get-started { - display: none; + +[ data-path = "" ] .get-started { + display: none; } + .header-1, .header-2, .header-3 { - line-height: 1.025; + line-height: 1.025; } + .header-1 { - font-size: 2.5rem; + font-size: 2.5rem; } + .header-2 { - font-size: 1.5rem; + font-size: 1.5rem; } + .header-3 { - font-size: 1rem; + font-size: 1rem; } + .navbar { - padding: 1rem; - background-color: #fff; -} -@media screen and (min-width: 767px) { - .navbar { - padding: 1rem 2.5rem; - } + padding: 1rem; + background-color: #fff; + + @media screen and (min-width: @screen-xs) { + padding: 1rem 2.5rem; + } } + .navbar-header { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } + .navbar-icon { - width: 1.5rem; - margin-right: 0.5rem; - padding-bottom: 0.07rem; + width: 1.5rem; + margin-right: 0.5rem; + padding-bottom: 0.07rem; } + .navbar-brand { - font-size: 1rem; - font-weight: bold; - letter-spacing: 0.005em; - text-decoration: none; - color: #36414c; -} -.navbar-brand:hover { - text-decoration: none; - color: #2e3338; + font-size: 1rem; + font-weight: bold; + letter-spacing: 0.005em; + text-decoration: none; + color: @text-color; + + &:hover { + text-decoration: none; + color: @text-dark; + } } + .navbar-brand:visited { - color: #36414c; + color: @text-color; } + .menu { - display: flex; - margin: 0; + display: flex; + margin: 0; } + .menu-item { - margin-left: 1.5rem; + margin-left: 1.5rem; } + .menu-links { - color: #6c7680; - text-decoration: none; -} -.menu-links:hover { - text-decoration: none; + color: @text-light; + text-decoration: none; + + &:hover { + text-decoration: none; + } } + .container, .page-content-wrapper { - max-width: 100%; - margin: 0 auto; -} -@media screen and (min-width: 991px) { - .container, - .page-content-wrapper { - max-width: 991px; - } -} -@media screen and (min-width: 1199px) { - .container, - .page-content-wrapper { - max-width: 1199px; - } + max-width: 100%; + margin: 0 auto; + + @media screen and (min-width: @screen-sm) { + max-width: @screen-sm; + } + + @media screen and (min-width: @screen-md) { + max-width: @screen-md; + } } + .section-padding.hero { - padding: 2.5rem 1rem; -} -@media screen and (min-width: 767px) { - .section-padding.hero { - padding: 10.5rem 1.5rem; - } + padding: 2.5rem 1rem; + + @media screen and (min-width: @screen-xs) { + padding: 10.5rem 1.5rem; + } } + .section-padding { - padding: 2.5rem 1rem; -} -@media screen and (min-width: 767px) { - .section-padding { - padding: 6.5rem 1.5rem; - } + padding: 2.5rem 1rem; + + @media screen and (min-width: @screen-xs) { + padding: 6.5rem 1.5rem; + } } + .reviews { - max-width: 200px; + max-width: 200px; } + .stars { - width: 125px; + width: 125px; } + .footer-brand { - order: 10; -} -@media screen and (min-width: 767px) { - .footer-brand { - order: unset; - } + order: 10; + + @media screen and (min-width: @screen-xs) { + order: unset; + } } + .section-bullet { - margin-bottom: 0.5rem; + margin-bottom: 0.5rem; } + .page { - padding: 0 1rem; - border-top: 1px solid #ebeff2; -} -@media screen and (min-width: 767px) { - .page { - padding: 0 2.5rem; - } + padding: 0 1rem; + border-top: 1px solid @light-border-color; + + @media screen and (min-width: @screen-xs) { + padding: 0 2.5rem; + } } + .hero-illustration { - width: 100%; - max-width: 800px; + width: 100%; + max-width: 800px; } + .list-items { - text-align: center; - border-radius: 0.5rem; - background-color: #fff; - min-width: 200px; - transition: all 0.3s ease-out; - margin: 0 1rem; -} -@media screen and (min-width: 500px) { - .list-items { - margin: 0; - } -} -.list-items:hover { - box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.05); + text-align: center; + border-radius: 0.5rem; + background-color: #fff; + min-width: 200px; + transition: all @transition; + margin: 0 1rem; + + @media screen and (min-width: @screen-palm) { + margin: 0; + } + + &:hover { + box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.05); + } } + .contact-content { - max-width: 90%; -} -@media screen and (min-width: 500px) { - .contact-content { - max-width: 50%; - } + max-width: 90%; + + @media screen and (min-width: @screen-palm) { + max-width: 50%; + } } + .countries { - max-width: 100%; -} -@media screen and (min-width: 500px) { - .countries { - max-width: 50%; - min-width: 50%; - } -} -@media screen and (min-width: 767px) { - .countries { - max-width: 25%; - min-width: 25%; - } + max-width: 100%; + + @media screen and (min-width: @screen-palm) { + max-width: 50%; + min-width: 50%; + } + + @media screen and (min-width: @screen-xs) { + max-width: 25%; + min-width: 25%; + } } + .intro-copy { - max-width: 599.5px; - margin: 0 auto 1.5rem auto; + max-width: @screen-md/2; + margin: 0 auto 1.5rem auto; } + .primary-links { - color: #6c7680; - transition: all 0.3s ease-out; -} -.primary-links:hover { - color: #2e3338; - text-decoration: none; + color: @text-light; + transition: all @transition; + + &:hover { + color: @text-dark; + text-decoration: none; + } } + .button { - padding: 1rem 1.5rem; - border-radius: 0.25em; - cursor: pointer; - transition: all 0.3s ease-out; - border-bottom: 3px solid rgba(0, 0, 0, 0.2); - text-decoration: none; -} -.button:hover { - text-decoration: none; + padding: 1rem 1.5rem; + border-radius: 0.25em; + cursor: pointer; + transition: all @transition; + border-bottom: 3px solid rgba(0, 0, 0, 0.2); + text-decoration: none; + + &:hover { + text-decoration: none; + } } + .button-primary { - font-size: 1.5em; - color: #fff; - background: #7575ff; - border-right: 0; - border-left: 0; - border-top: 0; - line-height: 3; -} -.button-primary:hover { - background: #5e5ec9; - color: #fff; + font-size: 1.5em; + color: #fff; + background: @brand-primary; + border-right: 0; + border-left: 0; + border-top: 0; + line-height: 3; + + &:hover { + background: @button-primary-hover; + color: #fff; + } } + .button-primary-small { - color: #fff; - background: #7575ff; - border-right: 0; - border-left: 0; - border-top: 0; - padding: 0.45rem 1rem; -} -.button-primary-small:hover { - background: #5e5ec9; - color: #fff; + color: #fff; + background: #7575ff; + border-right: 0; + border-left: 0; + border-top: 0; + padding: 0.45rem 1rem; + + &:hover { + background: @button-primary-hover; + color: #fff; + } } + .button-secondary { - font-size: 1.5em; - color: #6c7680; - background: #f0f4f7; - border-right: 0; - border-left: 0; - border-top: 0; - line-height: 3; -} -.button-secondary:hover { - background: #ffffff; - color: #2e3338; + font-size: 1.5em; + color: @text-light; + background: @btn-bg; + border-right: 0; + border-left: 0; + border-top: 0; + line-height: 3; + + &:hover { + background: @button-secondary-hover; + color: @text-dark; + } } + .secondary-link { - color: #6c7680; - transition: color 0.3s ease-out; -} -.secondary-link:hover { - color: #2e3338; + color: @text-light; + transition: color @transition; + + &:hover { + color: @text-dark; + } } + .bulleted-list { - margin: 0; - padding-left: 1em; -} -.bulleted-list li { - padding-bottom: 1em; + margin: 0; + padding-left: 1em; + + li { + padding-bottom: 1em; + } } + .footer-title { - margin-bottom: 0.5rem; + margin-bottom: 0.5rem; } + .footer-list { - padding-left: 0; + padding-left: 0; } + .footer-email-input { - border: 1px solid #8d99a6; - border-radius: 0.25rem; - padding: 0.25rem; - color: #8d99a6; - margin-right: 0.5rem; + border: 1px solid @text-muted; + border-radius: 0.25rem; + padding: 0.25rem; + color: @text-muted; + margin-right: 0.5rem; } + .page_content li, .sidebar-item, .footer-list li { - margin-bottom: 0.5rem; + margin-bottom: 0.5rem; } + .page-container { - display: flex; - max-width: 1199px; - margin: 0 auto; - flex-direction: column-reverse; -} -@media screen and (min-width: 767px) { - .page-container { - flex-direction: row; - } + display: flex; + max-width: @screen-md; + margin: 0 auto; + flex-direction: column-reverse; + + @media screen and (min-width: @screen-xs) { + flex-direction: row; + } } + .page-content { - width: 100%; - padding: 4rem 0; -} -.page-content h1:first-child { - margin-top: 0; + width: 100%; + padding: 4rem 0; + + h1:first-child { + margin-top: 0; + } } + .breadcrumb { - padding: 0; - margin-bottom: 1.5rem; -} -.breadcrumb a { - background-color: transparent; - color: #8d99a6; -} -.breadcrumb a:focus, -.breadcrumb a:visited { - background-color: transparent; - color: #8d99a6; -} -.breadcrumb a:hover { - color: #2e3338; - transition: color 0.3s ease-out; + padding: 0; + margin-bottom: 1.5rem; + + a { + background-color: transparent; + color: @text-muted; + + &:focus, + &:visited { + background-color: transparent; + color: @text-muted; + } + + &:hover { + color: @text-dark; + transition: color @transition; + } + } } + .breadcrumb > li { - display: inline-block; + display: inline-block; } + .breadcrumb > li + li::before { - padding: 0 5px; - color: #8d99a6; - content: "/\00a0"; + padding: 0 5px; + color: @text-muted; + content: "/\00a0"; } + .sidebar-block { - padding: 4rem 0; - min-width: 200px; - border-top: 1px solid #ebeff2; -} -@media screen and (min-width: 767px) { - .sidebar-block { - border-right: 1px solid #ebeff2; - border-top: 0; - } + padding: 4rem 0; + min-width: 200px; + border-top: 1px solid @light-border-color; + + @media screen and (min-width: @screen-xs) { + border-right: 1px solid @light-border-color; + border-top: 0; + } } + .blog-page { - padding: 4rem 0; - max-width: 700px; - margin: 0 auto; + padding: 4rem 0; + max-width: 700px; + margin: 0 auto; } + .page-content.with-sidebar { - padding: 1rem; -} -@media screen and (min-width: 767px) { - .page-content.with-sidebar { - padding: 4rem 0 4rem 2.5rem; - } + @media screen and (min-width: @screen-xs) { + padding: 4rem 0 4rem 2.5rem; + } + + padding: 1rem; } + hr { - margin-top: 20px; - margin-bottom: 20px; - border: 0; - border-top: 1px solid #ebeff2; + margin-top: 20px; + margin-bottom: 20px; + border: 0; + border-top: 1px solid @light-border-color; } + .footer-link { - color: #8d99a6; - transition: color 0.3s ease-out; -} -.footer-link:hover { - color: #fff; + color: @text-muted; + transition: color @transition; + + &:hover { + color: #fff; + } } + .button-dark { - color: #fff; - background: #8d99a6; - border-right: 0; - border-left: 0; - border-top: 0; - padding: 0.45rem 1rem; + color: #fff; + background: @text-muted; + border-right: 0; + border-left: 0; + border-top: 0; + padding: 0.45rem 1rem; } + .footer-icon { - width: 4rem; - margin-right: unset; -} -@media screen and (min-width: 767px) { - .footer-icon { - margin-right: 0.5rem; - } + width: 4rem; + margin-right: unset; + + @media screen and (min-width: @screen-xs) { + margin-right: 0.5rem; + } } + .footer-email-title { - margin-bottom: 0.5rem; + margin-bottom: 0.5rem; } + /* loaned from bootstrap need to cleanup*/ + /*progress bar*/ .progress { - height: 1.5rem; - margin-bottom: 1.5rem; - overflow: hidden; - background-color: #f5f5f5; - border-radius: 0.25rem; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + height: 1.5rem; + margin-bottom: 1.5rem; + overflow: hidden; + background-color: #f5f5f5; + border-radius: 0.25rem; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } + .progress-bar { - height: inherit; + height: inherit; } + .progress-bar-success { - background-color: #98d85b; + background-color: #98d85b; } + .sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; } + /*progress bar*/ .clickable a { - color: #36414c; + color: @text-color; } + .clickable a:focus { - outline: 0; + outline: 0; } + .fade.in { - opacity: 1; + opacity: 1; } + caption { - padding-top: 8px; - padding-bottom: 8px; - color: #8d99a6; - text-align: left; + padding-top: 8px; + padding-bottom: 8px; + color: @text-muted; + text-align: left; } + th { - text-align: left; + text-align: left; } + .input-group { - position: relative; - display: table; - border-collapse: separate; + position: relative; + display: table; + border-collapse: separate; } + .btn-group, .btn-group-vertical { - position: relative; - display: inline-block; - vertical-align: middle; + position: relative; + display: inline-block; + vertical-align: middle; } + .note-popover .popover-content > .btn-group, .panel-heading.note-toolbar > .btn-group { - margin-top: 5px; - margin-right: 5px; - margin-left: 0; + margin-top: 5px; + margin-right: 5px; + margin-left: 0; } + .note-popover .popover-content, .panel-heading.note-toolbar { - padding: 0 0 5px 5px; - margin: 0; + padding: 0 0 5px 5px; + margin: 0; } + .panel-heading { - padding: 0.5rem 1rem; - border-bottom: 1px solid transparent; - border-top-left-radius: 0.25em; - border-top-right-radius: 0.25em; + padding: 0.5rem 1rem; + border-bottom: 1px solid transparent; + border-top-left-radius: 0.25em; + border-top-right-radius: 0.25em; } + .panel-default > .panel-heading { - color: #333; - background-color: #f7fafc; - border-color: #d1d8dd; + color: #333; + background-color: #f7fafc; + border-color: @border-color; } + .panel-body { - padding-left: 1rem; + padding-left: 1rem; } + .modal { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1040; - display: none; - overflow: hidden; - outline: 0; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1040; + display: none; + overflow: hidden; + outline: 0; } + .modal-open .modal { - overflow-x: hidden; - overflow-y: auto; + overflow-x: hidden; + overflow-y: auto; } + .modal-backdrop.in { - filter: alpha(opacity=50); - opacity: 0.5; + filter: alpha(opacity=50); + opacity: 0.5; } + .modal-backdrop { - position: absolute; - top: 0; - right: 0; - left: 0; - background-color: #334143; + position: absolute; + top: 0; + right: 0; + left: 0; + background-color: #334143; } + .modal-dialog { - width: 600px; - margin: 2rem auto; + width: 600px; + margin: 2rem auto; } + .modal.in .modal-dialog { - transform: translate(0, 0); + transform: translate(0, 0); } + .modal-content { - position: relative; - background-color: #fff; - background-clip: padding-box; - border: 1px solid #d1d8dd; - border-radius: 0.25rem; - outline: 0; - box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); + position: relative; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #d1d8dd; + border-radius: 0.25rem; + outline: 0; + box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); } + .modal-header { - min-height: 1rem; - padding: 1rem; - border-bottom: 1px solid #d1d8dd; + min-height: 1rem; + padding: 1rem; + border-bottom: 1px solid #d1d8dd; } + .modal-title { - margin: 0; - line-height: 1.42857143; + margin: 0; + line-height: 1.42857143; } + .modal-body { - position: relative; - padding: 1rem; + position: relative; + padding: 1rem; } + .close { - float: right; - font-size: 1.5rem; - font-weight: bold; - line-height: 1; - color: #000; - text-shadow: 0 1px 0 #fff; - filter: alpha(opacity=20); - opacity: 0.2; + float: right; + font-size: 1.5rem; + font-weight: bold; + line-height: 1; + color: #000; + text-shadow: 0 1px 0 #fff; + filter: alpha(opacity=20); + opacity: 0.2; } + .modal-header .close { - margin-top: -2px; + margin-top: -2px; } + .close:hover, .close:focus { - color: #000; - text-decoration: none; - cursor: pointer; - filter: alpha(opacity=50); - opacity: 0.5; + color: #000; + text-decoration: none; + cursor: pointer; + filter: alpha(opacity=50); + opacity: 0.5; } + .btn-default { - color: inherit; - background-color: #f0f4f7; - border-color: transparent; + color: inherit; + background-color: #f0f4f7; + border-color: transparent; } + .btn { - display: inline-block; - padding: 0.25em 0.75em; - margin-bottom: 0; - font-size: 1em; - font-weight: normal; - text-align: center; - white-space: nowrap; - vertical-align: middle; - cursor: pointer; - user-select: none; - background-image: none; - border: 1px solid transparent; - border-radius: 0.25em; + display: inline-block; + padding: 0.25em 0.75em; + margin-bottom: 0; + font-size: 1em; + font-weight: normal; + text-align: center; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + user-select: none; + background-image: none; + border: 1px solid transparent; + border-radius: 0.25em; } + .btn-block { - background-image: none; - border: 1px solid transparent; - border-radius: 0.25em; - display: block; - width: 100%; + background-image: none; + border: 1px solid transparent; + border-radius: 0.25em; + display: block; + width: 100%; } + .form-control { - display: block; - width: 100%; - height: 2em; - padding: 0.5em; - color: #2e3338; - background-color: #fff; - background-image: none; - border: 1px solid #d1d8dd; - border-radius: 0.25em; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - transition: border-color ease-out 0.15s, box-shadow ease-out 0.15s; + display: block; + width: 100%; + height: 2em; + padding: 0.5em; + color: #2e3338; + background-color: #fff; + background-image: none; + border: 1px solid #d1d8dd; + border-radius: 0.25em; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + transition: border-color ease-out 0.15s, box-shadow ease-out 0.15s; } + .form-signin .form-control { - position: relative; - height: auto; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 0.5rem; - margin-bottom: 0.5rem; + position: relative; + height: auto; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 0.5rem; + margin-bottom: 0.5rem; } + code { - color: #fc4f51; - background: #fff5f5; - padding: 0.25em; - border-radius: 0.25em; - font-size: 0.85em; + color: #fc4f51; + background: #fff5f5; + padding: 0.25em; + border-radius: 0.25em; + font-size: 0.85em; } + /*loaned from frappe*/ textarea.form-control { - height: auto; + height: auto; } + .col-sm-6 { - margin-bottom: 1rem; + margin-bottom: 1rem; } -@media screen and (min-width: 767px) { - .col-sm-8 { - width: 66.66%; - } + +.col-sm-8 { + @media screen and (min-width: @screen-xs) { + width: 66.66%; + } } + .comment-view { - padding-bottom: 2.5rem; + padding-bottom: 2.5rem; } + .no-results { - text-align: center; - padding: 10rem 0; + text-align: center; + padding: 10rem 0; } + .add-comment-section { - padding-bottom: 2rem; + padding-bottom: 2rem; } + .comment-header { - border-bottom: 1px solid #d1d8dd; - padding: 2rem 0 1rem; + border-bottom: @border; + padding: 2rem 0 1rem; } + .comment-row { - margin: 0 1rem; - padding: 1rem; + margin: 0 1rem; + padding: 1rem; } + .comment-row:last-child { - margin-bottom: 2rem; - border-bottom: 0; + margin-bottom: 2rem; + border-bottom: 0; } + .page-card { - max-width: 360px; - padding: 1em; - margin: 8rem auto; - border: 1px solid #d1d8dd; - border-radius: 0.25em; - background-color: #fff; - box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1); + max-width: 360px; + padding: 1em; + margin: 8rem auto; + border: @border; + border-radius: 0.25em; + background-color: #fff; + box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1); } + .page-card .page-card-head { - padding: 0.75em 1em; - margin: -1em; - margin-bottom: 1em; - border-bottom: 1px solid #d1d8dd; + padding: 0.75em 1em; + margin: -1em; + margin-bottom: 1em; + border-bottom: @border; } + .login-content .btn { - margin-top: 3rem; + margin-top: 3rem; } + .btn-primary { - background-color: #7575ff; - border-color: #7575ff; - color: #fff; - transition: background-color 0.3s ease-in; + background-color: @brand-primary; + border-color: @brand-primary; + color: #fff; + transition: background-color 0.3s ease-in; } + .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { - color: #fff; - background-color: #5e5ec9; - border-color: #5e5ec9; - text-decoration: none; + color: #fff; + background-color: @button-primary-hover; + border-color: @button-primary-hover; + text-decoration: none; } + img.blog-cover-image, .blog-text img, .screenshot { - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); - border: 1px solid #d1d8dd; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); + border: 1px solid #d1d8dd; } + .btn-next-wrapper { - margin-top: 4rem; + margin-top: 4rem; } + .input-group-btn { - display: table-cell; - vertical-align: middle; - white-space: nowrap; - height: 2rem; + display: table-cell; + vertical-align: middle; + white-space: nowrap; + height: 2rem; } + .dropdown-menu { - display: none; - position: absolute; - list-style: none; - margin: 0; - padding: 0; - box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.05); - background-color: #fff; -} -.dropdown-menu li { - padding: 0.5rem; - margin: 0; - transition: background-color 0.3s ease-out; - cursor: pointer; -} -.dropdown-menu li:hover { - background-color: #f0f4f7; + display: none; + position: absolute; + list-style: none; + margin: 0; + padding: 0; + box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.05); + background-color: #fff; + + li { + padding: 0.5rem; + margin: 0; + transition: background-color @transition; + cursor: pointer; + + &:hover { + background-color: @btn-bg; + } + } } + .display-block { - display: block; + display: block; } + .caret { - display: inline-block; - width: 0; - height: 0; - margin-left: 2px; - vertical-align: middle; - border-top: 0.25rem solid; - border-right: 0.25rem solid transparent; - border-left: 0.25rem solid transparent; + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: 0.25rem solid; + border-right: 0.25rem solid transparent; + border-left: 0.25rem solid transparent; } + .bounty-amount .form-control { - margin-right: 1.5rem; + margin-right: 1.5rem; } + .input-group-btn .dropdown-toggle { - margin-left: 1.5rem; + margin-left: 1.5rem; } + /*blog*/ + /*TODO Needs refactor in frappe to use utilities.less*/ + .blog-list-content { - border: 0; - background: transparent; + border: 0; + background: transparent; } + .blog-list-item { - padding-bottom: 4rem; - border-bottom: 1px solid #ebeff2; -} -.blog-list-item:last-child { - border-bottom: 0; -} -.blog-list-item a { - color: #36414c; -} -.blog-list-item h1 { - margin-top: 0; + padding-bottom: 4rem; + border-bottom: 1px solid @navbar-default-border; + + &:last-child { + border-bottom: 0; + } + + a { + color: @text-color; + } + + h1{ + margin-top: 0; + } } + .blog-list-item:not(:first-child) { - padding-top: 4rem; + padding-top: 4rem; } + .blogpost-cover-img { - width: 75%; - margin-bottom: 0.5rem; + width: 75%; + margin-bottom: 0.5rem; } + .blog-header { - font-size: 2.5rem; + font-size: 2.5rem; } + .blog-container img { - margin-bottom: 1.5rem; + margin-bottom: 1.5rem; } + .blog-comments { - position: relative; - border-top: 1px solid #d1d8dd; + position: relative; + border-top: @border; } + .blog-info { - margin: 2.5rem 0; + margin: 2.5rem 0; } + .blog-text { - font-size: 1.15em; - line-height: 1.62; + font-size: 1.15em; + line-height: 1.62; } + .blog-content { - margin-bottom: 2.5rem; + margin-bottom: 2.5rem; } + .blogger { - padding-top: 0; - padding-bottom: 2.5rem; + padding-top: 0; + padding-bottom: 2.5rem; } + .blogger-name { - margin-top: 0.25em; - font-weight: normal; - font-size: 1rem; -} -.blogger-name a { - color: #36414c; + margin-top: 0.25em; + font-weight: normal; + font-size: 1rem; + + a { + color: @text-color; + } } + .avatar { - display: inline-block; - width: 3rem; - height: 3rem; - margin-right: 1rem; + display: inline-block; + width: 3rem; + height: 3rem; + margin-right: 1rem; } + .blog-list-item .avatar { - margin-right: 1em; + margin-right: 1em; } + .avatar img { - max-width: 100%; - max-height: 100%; - border-radius: 0.25em; + max-width: 100%; + max-height: 100%; + border-radius: 0.25em; } + .avatar-medium { - margin-right: 0.25em; - width: 2rem; - height: 2rem; + margin-right: 0.25em; + width: 2rem; + height: 2rem; } + .inline-block { - display: inline-block; + display: inline-block; } + .blog-container, .max-width-medium { - max-width: 700px; + max-width: 700px; } + .media { - display: flex; - background: #fafbfc; - margin-bottom: 1.5rem; - border-radius: 0.25em; - padding: 1.5rem; - flex-direction: column; -} -@media screen and (min-width: 500px) { - .media { - flex-direction: row; - } + display: flex; + background: @light-bg; + margin-bottom: 1.5rem; + border-radius: 0.25em; + padding: 1.5rem; + flex-direction: column; + + @media screen and (min-width: @screen-palm) { + flex-direction: row; + } } + .media-left { - margin-bottom: 1.5rem; -} -@media screen and (min-width: 500px) { - .media-left { - margin-right: 2.5rem; - margin-bottom: 0; - } + margin-bottom: 1.5rem; + + @media screen and (min-width: @screen-palm) { + margin-right: 2.5rem; + margin-bottom: 0; + } } + .media-heading { - margin-top: 0; + margin-top: 0; } + .media-object { - width: 6.5rem; - max-width: inherit; + width: 6.5rem; + max-width:inherit; } + .with-border { - border-radius: 0.25em; - padding: 1rem; - margin-bottom: 2rem; - border: 1px solid #d1d8dd; -} -.with-border a { - text-decoration: none; - color: #36414c; -} -.with-border a:hover { - text-decoration: none; - color: #2e3338; -} -.with-border:hover { - background-color: #fafbfc; + border-radius: 0.25em; + padding: 1rem; + margin-bottom: 2rem; + border: 1px solid @border-color; + + a { + text-decoration: none; + color: @text-color; + + &:hover { + text-decoration: none; + color: @text-dark; + } + } + + &:hover { + background-color: @light-bg; + } } + /* individual elements */ + .gold-member { - display: flex; - padding: 2.5rem 0; - transition: background-color 0.3s ease-out; - border-bottom: 1px solid #d1d8dd; -} -.gold-member:hover { - background-color: #fafbfc; + display: flex; + padding: 2.5rem 0; + transition: background-color @transition; + border-bottom: 1px solid @border-color; + + &:hover { + background-color: @light-bg; + } } + .individual-member { - border-bottom: 1px solid #d1d8dd; - padding-bottom: 2.5rem; + border-bottom: 1px solid @border-color; + padding-bottom: 2.5rem; } + .box { - padding: 1.5rem; - border: 1px solid #d1d8dd; - border-radius: 0.25em; - transition: background-color 0.3s ease-out; -} -.box:hover { - background-color: #fafbfc; + padding: 1.5rem; + border: 1px solid @border-color; + border-radius: 0.25em; + transition: background-color @transition; + + &:hover { + background-color: @light-bg; + } } + .grid-boxes { - font-size: 1.5rem; - display: block; - padding: 1.5rem; -} -.grid-boxes span { - display: block; + font-size: 1.5rem; + display: block; + padding: 1.5rem; + + span { + display: block; + } } + .thumb-small { - width: 100px; + width: 100px; } + .grid-images { - width: 150px; - padding-bottom: 1.5rem; + width: 150px; + padding-bottom: 1.5rem; } + .feature-img { - max-width: 250px; + max-width: 250px; } + .community-bg { - background-image: linear-gradient(to bottom, rgba(46, 51, 56, 0.5), #2e3338), url("/assets/foundation/img/community-2016.jpg"); - background-size: cover; - background-repeat: no-repeat; - background-position: center; - background-attachment: fixed; + background-image: linear-gradient(to bottom, rgba(46, 51, 56, 0.5), @text-dark), url("/assets/foundation/img/community-2016.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-attachment: fixed; } + .community-bg .intro-copy, .about .intro-copy { - max-width: 800px; + max-width: 800px; } + /* added to make iframe responsive */ .embed-container { - position: relative; - padding-bottom: 56.25%; - height: 0; - overflow: hidden; - max-width: 800px; - width: auto; + position: relative; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; + max-width: 800px; + width: auto; } + .embed-container iframe, .embed-container object, .embed-container embed { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } diff --git a/foundation/templates/includes/macros.html b/foundation/templates/includes/macros.html index 43c65a3b..49ea3afc 100644 --- a/foundation/templates/includes/macros.html +++ b/foundation/templates/includes/macros.html @@ -1,15 +1,13 @@ {% macro media(title, content, image, link) %} -
-
- -
-
+
{% if title %}

{{ title }}

{% endif %} {{ content }}
diff --git a/foundation/www/about.html b/foundation/www/about.html index 89259abd..288be5d7 100644 --- a/foundation/www/about.html +++ b/foundation/www/about.html @@ -6,22 +6,23 @@ {% block content%}
-
+
- -

ERPNext Foundation

-

We are a Non Profit Foundation representing a community of ERPNext Users, Developers and Service Providers. Our goal is to provide a platform for the ERPNext Community to - come together, join hands and build assets to help build and enhance ERPNext around the world.

ERPNext Foundation aims to be a community driven organization and run in a transparent manner. If you want to be more involved in the ERPNext Community, read the FAQ. + +

ERPNext Foundation

+

We are a Non Profit Foundation representing a community of ERPNext Users, Developers and Service Providers. Our goal is to provide a platform for the ERPNext Community to + come together, join hands and build assets to help build and enhance ERPNext around the world.

+

ERPNext Foundation aims to be a community driven organization and run in a transparent manner. If you want to be more involved in the ERPNext Community, read the FAQ.

-
-
-
-

{{ doc.team_members_heading }}

+
+
+
+

{{ doc.team_members_heading }}

{% for member in doc.team_members %} {{ media(member.full_name, member.bio, member.image_link) }} {% endfor %} -

Want to talk to someone in the foundation? Get in touch

+

Want to talk to someone in the foundation? Get in touch