src/static/css/cf-theme-overrides.less
/* ==========================================================================
Capital Framework theme overrides
========================================================================== */
/* cf-core
========================================================================== */
// Sizing variables
@base-font-size-px: 16px;
@base-line-height-px: 22px;
@base-line-height: unit(@base-line-height-px / @base-font-size-px);
@bp-xs-max: 600px;
@bp-sm-min: @bp-xs-max + 1px;
@bp-sm-max: 900px;
@bp-med-min: @bp-sm-max + 1px;
@bp-med-max: 1020px;
@bp-lg-min: @bp-med-max + 1px;
@bp-lg-max: 1230px;
@bp-xl-min: @bp-lg-max + 1px;
// To be deprecated
@mobile-max: @bp-xs-max;
@tablet-min: @bp-sm-min;
// Color variables
// body
@body-text-color: @black;
@text: @black;
// a
@link-text: @pacific;
@link-underline: @pacific;
@link-text-visited: @dark-teal;
@link-underline-visited: @dark-teal;
@link-text-hover: @pacific-60;
@link-underline-hover: @pacific-60;
@link-text-active: @dark-navy;
@link-underline-active: @dark-navy;
// thead
@thead-text: @white;
@thead-bg: @dark-gray;
@td-bg: @gray-5;
@td-bg-alt: @gray-10;
// input
@input-bg: @white;
@input-border: @gray-80;
@input-border-focus: @pacific;
@input-placeholder: @gray-80;
@input-warning: @gold;
// .figure__bordered
@figure__bordered: @gray-40;
/* cf-buttons
========================================================================== */
// Color variables
// .btn
@btn-text: @white;
@btn-bg: @pacific;
@btn-bg-hover: @pacific-80;
@btn-bg-active: @navy;
// .btn__secondary
@btn__secondary-text: @white;
@btn__secondary-bg: @gray-80;
@btn__secondary-bg-hover: @gray-60;
@btn__secondary-bg-active: @dark-gray;
// .btn__warning
@btn__warning-text: @white;
@btn__warning-bg: @red;
@btn__warning-bg-hover: @red-80;
@btn__warning-bg-active: @dark-red;
// .btn__disabled
@btn__disabled-text: @gray-80;
@btn__disabled-bg: @gray-10;
@btn__disabled-outline: @gray-10;
// Sizing variables
// .btn
@btn-font-size: 14px;
@btn-v-padding: 8px;
@btn-v-padding-modifier-ie: .8;
@super-btn-font-size: 18px;
/* cf-expandables
========================================================================== */
// Color variables
// .expandable
@expandable-focus: @black;
// .expandable_label
@expandable_label-text: @black;
// .expandable_link
@expandable_link-text: @pacific;
// .expandable__padded
@expandable__padded-bg: @gray-10;
@expandable__padded-bg-hover: @gray-10;
@expandable__padded-divider: @gray-40;
// .expandable-group
@expandable-group_header-text: @gray-80;
@expandable-group_header-bg: @gray-10;
@expandable-group-bg: @white;
@expandable-group-divider: @gray-60;
// Sizing variables
// .expandable_link
@expandable_link-font-size: @btn-font-size;
/* cf-forms
========================================================================== */
// Color variables
// .error
@input-error: @red;
// .success
@input-success: @green;
// Sizing variables
// .input__super
@input__super-font-size: @super-btn-font-size;
/* cf-grid
========================================================================== */
@grid_box-sizing-polyfill-path: '/static/vendor/box-sizing-polyfill';
@grid_wrapper-width: 1230px;
@grid_gutter-width: 30px;
@grid_total-columns: 12;
@grid_debug: false;
@grid_column-breakpoint: 720px;
.grid_nested-col-group() {
display: block;
position: relative;
margin-left: ( @grid_gutter-width / 2 ) * -1;
margin-right: ( @grid_gutter-width / 2 ) * -1;
}
/* cf-icons
========================================================================== */
@cf-icon-prefix: cf-icon;
@cf-icon-path: '../fonts';
@cf-icon-ie7-support: true;
/* cf-layout
========================================================================== */
// Color variables
// .block
@block__border-top: @gray-40;
@block__border-bottom: @gray-40;
@block__bg: @gray-5;
// .content_main
@content_main-border: @gray-40;
// .content_sidebar
@content_sidebar-bg: @gray-10;
@content_sidebar-border: @gray-40;
// .content_bar
@content_bar: @green;
// .content_line
@content_line: @gray-40;
// .grid_column__top-divider
@grid_column__top-divider: @gray-40;
// .grid_column__top-divider
@grid_column__left-divider: @gray-40;
/* cf-pagination
========================================================================== */
// Color variables
@pagination-text: @gray-80;
@pagination-bg: @gray-10;
// Sizing variables
@pagination-font-size: 16px;
@pagination-bp: 640px;
/* cf-typography
========================================================================== */
// Color variables
// .pull-quote
@pull-quote_body: @black;
@pull-quote_citation: @gray-80;
// .micro-copy
@micro-copy-text: @gray-80;
// .date
@date-text: @gray-80;
// .category-slug
@category-slug-text: @black;
@category-slug-hover: @link-text-hover;
// .header-slug
@header-slug-thin-border: @gray-10;
@header-slug-thick-border: @green;
// .padded-header
@padded-header-text: @dark-gray;
@padded-header-bg: @gray-10;
@padded-header-border: @gray-40;
// .fancy-slug
@fancy-slug-text: @black;
@fancy-slug-bg: @white;
@fancy-slug-border: @gray-40;
// .meta-header
@meta-header-border: @gray-40;
// .jump-link
@jump-link__bg: @gray-10;
@jump-link__bg-border: @gray-10;
// .list__branded
@list__branded-bullet: @green;