Skip to content

Instantly share code, notes, and snippets.

@Jessica7

Jessica7/breadcrumb.scss

Created December 22, 2015 16:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Jessica7/f96705afde56dc3e74ff to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Jessica7/f96705afde56dc3e74ff to your computer and use it in GitHub Desktop.
Download ZIP
breadcrumb
Raw
breadcrumb.scss
/*
*Uma paleta de cores da brand e com variações curtinho
*Hover e tals
*tipografia
*Levando em consideração que é responsivo
*Fala com mixins, functions e diretivas(@for,@if...)
*/
// Cores da brand
$breadcrumb__text--color : $color-sixth !default;
$breadcrumb__link--states : $color-sixth !default;
$breadcrumb__background--active : $color-third !default;
//Tipografia
$breadcrumb--font-family : $font-family--primary !default;
$breadcrumb--font-size : 1em !default;
//Utilizar os mixins que preciso:
@include fontstyle( $breadcrumb--font-size , $breadcrumb--font-family, normal , $breadcrumb__text--color );
@include states-links($breadcrumb__link--states, $breadcrumb__link--states, $breadcrumb__link--states, $breadcrumb__link--states );
//-Responsivo foi aplicada grids
//Profound-Grid(http://www.profoundgrid.com/)
.breadcrumb {
@include column(2);
list-style : none;
li {
float : left;
a {
@include fontstyle( $breadcrumb--font-size , $breadcrumb--font-family, normal , $breadcrumb__text--color );
@include states-links($breadcrumb__link--states, $breadcrumb__link--states, $breadcrumb__link--states, $breadcrumb__link--states );
display : block;
padding : 10px;
text-decoration : none;
}
//class utilizada la no jquery para manter link marcado ao clicar
.breadcrumb__link--active {
background : $breadcrumb__background--active;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment