Commit ad29503f authored by marcheing's avatar marcheing

Add stylesheet files and configuration for header and footer

Signed-off-by: Diego de Araújo Martinez Camarinha's avatarDiego Araújo <diegoamc@protonmail.ch>
parent 0184da10
......@@ -12,5 +12,8 @@
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
$(function(){ $(document).foundation(); });
footer {
@include is-container();
padding-top: 40px;
border-top: 1px solid $brand-gray-medium;
&:not(:last-child) {
border-bottom: none;
}
ul {
@include breakpoint(medium){
@include grid-col(3);
&:nth-child(n+2){
margin-left: 0;
}
}
list-style: none;
li:nth-child(1){
font-size: 18px !important;
line-height: 30px !important;
font-weight: 700;
color: $brand-red;
}
li:nth-child(2){
}
}
div {
margin-left: 1.25rem;
margin-right: 1.25rem;
@include breakpoint(medium){
@include grid-col(2);
margin-left: 0;
margin-right: 0;
}
h3 {
color: $brand-red;
}
}
}
.top-banner {
@include grid-col-row;
@include show-for(medium);
padding-bottom: 20px;
padding-top: 20px;
}
.menu-icon.dark {
float: right;
margin-top: 10px;
&::after {
background: $brand-red;
box-shadow: 0 7px 0 $brand-red, 0 14px 0 $brand-red;
}
}
.general-header {
@include grid-row;
margin-bottom: 20px;
@include breakpoint(medium) {
margin-bottom: 40px;
}
.top-bar {
@include grid-col-row;
background-color: $white;
}
.top-bar-right {
@include breakpoint(medium down) {
float: none;
}
}
.top-bar-title {
@include breakpoint(medium down) {
width: 100%;
}
@include breakpoint(large) {
float: left;
}
.logo {
display: inline-block;
width: 150px;
@include breakpoint(large) {
display: block;
width: 250px;
}
}
}
.menu {
background-color: $white;
font-size: 14px;
@include breakpoint(medium down) {
text-align: center;
}
a {
color: #000;
&:hover {
color: $brand-red-hover;
}
}
.featured-link {
@extend .button;
border-radius: 6px;
margin: 0 1em;
}
.language-selector {
font-weight: bold;
}
.social-links-group {
display: inline-block;
font-size: 26px;
@include breakpoint(large) {
float: right;
margin-left: 50px;
}
a {
color: $brand-red;
display: inline-block;
margin: 0 5px;
&:hover {
color: $brand-red-hover;
}
}
}
&.primary-menu {
@extend .vertical;
@extend .large-horizontal;
}
&.secondary-menu {
@extend .vertical;
@extend .large-horizontal;
margin-top: 20px;
@include breakpoint(large) {
float: right;
}
}
}
.dropdown.menu {
.is-dropdown-submenu-parent {
&.is-down-arrow > a {
&:after {
border-color: #000 transparent transparent;
}
&:hover:after {
border-color: $brand-red-hover transparent transparent;
}
}
}
.submenu {
min-width: 100px;
@include breakpoint(medium down) {
width: 100%;
}
@include breakpoint(large) {
&.first-sub {
left: auto;
right: 0;
}
}
}
}
}
$fb-color: #3b5998;
$twitter-color: #55acee;
$gplus-color: #dc4e41;
@mixin is-container () {
@extend .row;
margin-bottom: 20px;
@include breakpoint(medium) {
margin-bottom: 40px;
}
&:not(:last-child) {
border-bottom: 1px solid $brand-gray-medium;
padding-bottom: 40px;
}
}
html {
}
body {
width: 100%;
font-family: $secondary-font;
font-size: 12px;
line-height: 15px;
}
h1, h2, h3, .h3, h4 {
font-family: $primary-font;
font-weight: 700;
line-height: 1.25;
}
h1, h2 {
// color: $brand-red;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3, .h3 {
font-size: 18px;
}
a {
color: $brand-red;
&:hover, &:focus {
color: $brand-red-hover;
}
}
//buttons
.button {
border-color: $brand-red-hover;
background-color: $white;
color: $brand-red-hover;
margin: 0;
&:hover,
&:focus {
background-color: $brand-red-hover;
color: #eee;
}
&.hollow {
color: $black;
border-color: $black;
&:hover,
&:focus {
color: $brand-red;
border-color: $brand-red;
}
}
}
.follow-button {
@extend .button;
@extend .tiny;
border-bottom: 1px solid $brand-red-hover;
cursor: pointer;
font-size: 1rem;
line-height: 1.25;
padding: 0.25em 1.5em;
position: relative;
i {
position: absolute;
&:nth-child(1) {
left: 3px;
top: 1px;
transform: rotate(-25deg);
}
&:nth-child(2) {
left: 8px;
top: 8px;
transform: rotate(20deg);
}
&:nth-child(3) {
left: 15px;
top: 1px;
transform: rotate(-10deg);
}
&:nth-child(4) {
left: 21px;
top: 7px;
transform: rotate(10deg);
}
}
}
.see-more {
@include grid-col(12);
margin: 0;
text-align: center;
}
.see-more-button {
@extend .button;
}
.cancel-button {
margin-right: 1rem;
}
.send-button {
@extend .button;
@extend .small;
}
.response-button {
@extend .button;
@extend .tiny;
background-color: $brand-gray-light;
border: none;
color: $black;
margin-bottom: 0;
&:hover,
&:focus {
background-color: $brand-gray-medium;
color: #fff;
}
}
.evaluate-button {
margin: 5px 30px 0;
}
.fb-button {
@extend .button;
@extend .small;
@include button-style($fb-color, auto, #fff);
border: none;
}
.search-box {
display: inline-block;
}
.search-button {
color: $brand-gray-light;
display: inline-block;
font-size: 20px;
}
.tooltip {
background-color: $brand-gray-light;
color: #000;
&.top {
&:before {
border-color: $brand-gray-light transparent transparent;
}
}
&.bottom {
&:before {
border-color: transparent transparent $brand-gray-light;
}
}
&.right {
&:before {
border-color: transparent $brand-gray-light transparent transparent;
}
}
&.left {
&:before {
border-color: transparent transparent transparent $brand-gray-light;
}
}
}
.label {
background-color: $white;
border: 1px solid $black;
border-radius: 2px;
color: $black;
margin: 3px 0;
&:not(:last-child) {
margin-right: 2px;
}
}
a.label {
@extend .label;
@extend .hvr-grow;
&:hover,
&:focus {
background-color: $brand-red-hover;
border-color: $brand-red-hover;
color: $white;
}
}
i.fa-question-circle {
color: $brand-gray-medium;
}
.title-call {
color: $brand-red;
}
.section {
@include is-container();
}
.inline-grid {
display: inline-flex;
h3,p {
padding-right: 10px;
}
}
.thumbnail {
border: none;
box-shadow: none;
&:hover {
box-shadow: none;
}
}
.archive {
ul {
li {
a {
color: $black;
&:hover {
color: $brand-red-hover;
}
}
}
}
}
.rateit {
div.rateit-range {
background: url(../img/ic-estrela_vazia.svg);
background-size: 20px 20px;
height: 20px;
}
div.rateit-hover {
background: url(../img/ic-estrela_cheia.svg);
background-size: 20px 20px;
}
div.rateit-selected {
background: url(../img/ic-estrela_cheia.svg);
background-size: 20px 20px;
}
button.rateit-reset {
display: none !important;
}
&.small {
.rateit-range,
.rateit-hover,
.rateit-selected {
background-size: 16px 16px;
}
}
}
.share-links-group {
display: inline-block;
font-size: 20px;
line-height: 1;
a {
display: inline-block;
margin: 0 0px;
}
.share-facebook {
color: $fb-color;
&:hover,
&:focus {
color: scale-color($fb-color, $lightness: -20%)
}
}
.share-twitter {
color: $twitter-color;
&:hover,
&:focus {
color: scale-color($twitter-color, $lightness: -20%)
}
}
.share-google-plus {
color: $gplus-color;
&:hover,
&:focus {
color: scale-color($gplus-color, $lightness: -20%)
}
}
.share-link-modal {
background-color: $white;
bottom: 0;
color: $black;
display: none;
left: 0;
margin: 2%;
padding: 2rem;
position: absolute;
right: 0;
top: 0;
z-index: 20;
.close-button {
color: $black;
}
}
}
This diff is collapsed.
//cores
$brand-red: #800500;
$brand-red-hover: #500200;
$brand-gray-light: #d8d8d8;
$brand-gray-medium: #9b9b9b;
//fonts
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300);
$primary-font: "PT Sans", Helvetica, Arial, sans-serif;
$secondary-font: "Open Sans", Helvetica, Arial, sans-serif;
......@@ -10,6 +10,7 @@
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*= require foundation_and_overrides
*/
@charset 'utf-8';
@import 'variables';
@import 'settings';
@import 'foundation';
// If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package.
//
@import 'motion-ui/motion-ui';
// We include everything by default. To slim your CSS, remove components you don't use.
@include foundation-global-styles;
@include foundation-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
@include foundation-label;
@include foundation-media-object;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;
// If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package.
//
@include motion-ui-transitions;
@include motion-ui-animations;
@import 'hover';
@import 'main';
@import 'header';
@import 'footer';
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment