@bigfishtv/cockpit/styles/theme.less

/*
 * Global
 */

// Border Radius
@border-radius: 2px;

// Z-Index
@z-index-high: 999;
@z-index-medium: 99;
@z-index-low: 9;

// Animation
@animation-fast: 0.5s;
@animation-medium: 1s;
@animation-slow: 2s;

// Transition
@transition-fast: 0.1s;
@transition-medium: 0.2s;
@transition-slow: 0.3s;

// Height
@height-xlarge: 4.4rem;
@height-large: 4.0rem;
@height-medium: 3.6rem;
@height-small: 3.2rem;
@height-xsmall: 2.8rem;

// Margin
@margin-xlarge: 3.2rem;
@margin-large: 2.4rem;
@margin-medium: 1.6rem;
@margin-small: 1rem;
@margin-xsmall: 0.8rem;

// Padding
@padding-xlarge: 3.2rem;
@padding-large: 2.4rem;
@padding-medium: 1.6rem;
@padding-small: 1rem;
@padding-xsmall: 0.8rem;

// Max Width
@max-width-xlarge: 1280px;
@max-width-large: 1024px;
@max-width-medium: 800px;
@max-width-small: 600px;
@max-width-xsmall: 450px;


/*
 * Body
 */

// Body
@body-font-family: @regular-font-family;
@body-font-weight: @regular-font-weight; 
@body-color: @dark;
@body-line-height: @line-height-medium;
@body-letter-spacing: 0;
@body-background: @white;


/*
 * Colors
 */

//Shades
@white: #FFFFFF;
@black: #000000;
@light-grey: @grey-300;
@mid-grey: @grey-500;
@grey: @grey-700;
@dark-grey: @grey-800;

// Custom Shades
@grey-000: #FAFAFD;
@grey-100: #F6F6F9;
@grey-200: #ECECEF;
@grey-300: #D9DEE3;
@grey-400: #C3C9CE;
@grey-500: #737983;
@grey-600: #5F6873;
@grey-700: #48494C;
@grey-800: #333C47;
@grey-900: #2B333E;

//Indicators
@info: #00AAFF;
@error: #F62943;
@warning: #F89406;
@success: #1AB934;

//Palette
@light: @grey-100;
@dark: @grey-900;
@primary: #3498DB;
@secondary: @success;
@tertiary: @grey-600;

//Utility
@inverse: @dark;


/*
 * Font
 */

// Fonts
@font-path: '/assets/fonts/';
@sans-serif-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@serif-font-family: Georgia, 'Times New Roman', Times, serif;
@monospace-font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;

// Generic Font Families
@thin-font-family: @sans-serif-font-family;
@regular-font-family: @sans-serif-font-family;
@medium-font-family: @sans-serif-font-family;
@semibold-font-family: @sans-serif-font-family;
@bold-font-family: @sans-serif-font-family;

// Generic Font Weights
@thin-font-weight: 300;
@regular-font-weight: 400;
@medium-font-weight: 500;
@semibold-font-weight: 600;
@bold-font-weight: bold;

// Base Font Size
@base-font-size: 10px;
@base-font-size-xlarge: @base-font-size;
@base-font-size-large: @base-font-size;
@base-font-size-medium: @base-font-size;
@base-font-size-small: @base-font-size - 1;
@base-font-size-xsmall: @base-font-size - 1;

// Font Sizes
@font-size-xlarge: 1.6;
@font-size-large: 1.4;
@font-size-medium: 1.3;
@font-size-small: 1.2;
@font-size-xsmall: 1;

// Line height
@line-height-xlarge: 1.75;
@line-height-large: 1.5;
@line-height-medium: 1.35;
@line-height-small: 1.2;
@line-height-xsmall: 1;


/*
 * Link
 */

// Link
@link-color: @primary;
@link-text-decoration: none;

// Link Hover
@link-hover-color: @dark;
@link-hover-decoration: none;


/*
 * Breakpoints
 */

// Screen Sizes
@screen-xsmall: 480px;
@screen-xsmall-max: (@screen-small-min - 1);
@screen-small: 768px;
@screen-small-min: @screen-small;
@screen-small-max: (@screen-medium-min - 1);
@screen-medium: 1024px;
@screen-medium-min: @screen-medium;
@screen-medium-max: (@screen-large-min - 1);
@screen-large: 1280px;
@screen-large-min: @screen-large;
@screen-large-max: (@screen-xlarge-min - 1);
@screen-xlarge: 1680px;
@screen-xlarge-min: @screen-xlarge;


/*
 * Headings
 */

// Headings
@headings-margin: 1em 0;
@headings-font-family: @semibold-font-family;
@headings-font-weight: @semibold-font-weight;
@headings-color: @grey;
@headings-line-height: 1.1;

// Headings Small
@headings-small-font-family: @medium-font-family;
@headings-small-size: 0.6em;
@headings-small-color: @grey;

// Heading Font Sizes
@h1-font-size: 2;
@h2-font-size: 1.6;
@h3-font-size: 1.4;
@h4-font-size: 1.3;
@h5-font-size: 1.3;
@h6-font-size: 1.2;


/*
 * Strong
 */

// Strong
@strong-font-family: @semibold-font-family;
@strong-font-weight: @semibold-font-weight;


/*
 * Emphasis
 */

// Emphasis
@em-font-style: italic;


/*
 * Paragraph
 */

// Paragraph
@paragraph-margin: 1em 0;
@paragraph-font-family: @regular-font-family;
@paragraph-font-weight: @regular-font-weight;
@paragraph-font-size: @font-size-medium;
@paragraph-color: @body-color;
@paragraph-line-height: @line-height-medium;


/*
 * Lead
 */

// Lead
@lead-margin: 0 0 1em 0;
@lead-font-family: @semibold-font-family;
@lead-font-weight: @semibold-font-weight;
@lead-font-size: @font-size-large;
@lead-color: @body-color;
@lead-line-height: @line-height-medium;


/*
 * Horizontal Rule
 */

// Horizontal Rule
@hr-margin: @margin-medium auto;
@hr-height: 1px;
@hr-background: @light-grey;


/*
 * Blockquote
 */

// Blockquote
@blockquote-margin: @margin-xsmall 0;
@blockquote-padding: 0 @padding-large;

// Blockquote Quote
@blockquote-quote-margin: 0;
@blockquote-quote-font-family: @lead-font-family;
@blockquote-quote-font-weight: @lead-font-weight;
@blockquote-quote-font-size: @lead-font-size;
@blockquote-quote-font-style: normal;
@blockquote-quote-line-height: @line-height-medium;
@blockquote-quote-color: @body-color;

// Blockquote Cite
@blockquote-cite-margin: @margin-xsmall 0;
@blockquote-cite-font-family: @regular-font-family;
@blockquote-cite-font-weight: @regular-font-family;
@blockquote-cite-font-size: @font-size-medium;
@blockquote-cite-font-style: normal;
@blockquote-cite-color: @blockquote-quote-color;
@blockquote-cite-text-align: left;


/*
 * Pullout
 */

// Pullout
@pullout-margin: @blockquote-margin;
@pullout-padding: 0 @padding-small;
@pullout-font-family: @blockquote-quote-font-family;
@pullout-font-weight: @blockquote-quote-font-weight;
@pullout-font-size: @blockquote-quote-font-size;
@pullout-color: @blockquote-quote-color;
@pullout-border: solid @dark;
@pullout-border-width: 0 0 0 2px;


/*
 * List
 */

// List
@list-margin: @paragraph-margin;
@list-padding: 0;

// Lists Item
@list-item-margin: 1rem 0 1rem 2rem;
@list-item-font-family: @paragraph-font-family;
@list-item-font-weight: @paragraph-font-weight;
@list-item-font-size: @paragraph-font-size;
@list-item-color: @paragraph-color;
@list-item-line-height: @paragraph-line-height;

// Child List
@child-list-margin: 1rem 0;
@child-list-padding: 0;
@child-list-item-margin: @list-item-margin;

// Unordered List
@unordered-list-icon: disc;
@unordered-child-list-icon: disc;


/*
 * Definition List
 */

// Definition List
@definition-list-margin: 0;
@definition-list-padding: 0;

// Definition Term
@definition-term-margin: 0.5em 0;
@definition-term-font-family: @semibold-font-family;
@definition-term-font-weight: @semibold-font-weight;
@definition-term-font-size: @paragraph-font-size;
@definition-term-color: @paragraph-color;

// Definition Description
@definition-description-margin: 0.5em 0;
@definition-description-font-family: @regular-font-family;
@definition-description-font-weight: @regular-font-weight;
@definition-description-font-size: @paragraph-font-size;
@definition-description-color: @paragraph-color;


/*
 * Code
 */

// Code
@code-font-family: @monospace-font-family;
@code-font-weight: normal;
@code-font-size: @font-size-xsmall;
@code-color: @grey;


/*
 * Pre
 */

// Pre
@pre-margin: 20px 0;
@pre-padding: 1rem;
@pre-color: @body-color;
@pre-tab-size: 4;
@pre-hyphens: none;
@pre-line-height: @line-height-medium;
@pre-background: @light;
@pre-border: 1px solid @light-grey;

// Pre Code
@pre-code-color: @grey;


/*
 * Kbd
 */

// Kbd
@kbd-margin: 0 0.5rem;
@kbd-padding: 0.4rem;
@kbd-font-family: @code-font-family;
@kbd-font-weight: @code-font-weight;
@kbd-font-size: @code-font-size;
@kbd-color: @code-color;
@kbd-background: @pre-background;
@kbd-border: @pre-border;


/*
 * Mark
 */

// Mark
@mark-margin: 0;
@mark-padding: 0.4rem;
@mark-font-family: @regular-font-family;
@mark-font-weight: @regular-font-weight;
@mark-font-size: @font-size-xsmall;
@mark-color: @paragraph-color;
@mark-background: @grey-200;
@mark-border: none;
@mark-border-radius: 2px;

// Mark Error
@mark-error-color: @white;
@mark-error-background: @error;
@mark-error-border: none;

// Mark Warning
@mark-warning-color: @white;
@mark-warning-background: @warning;
@mark-warning-border: none;

// Mark Success
@mark-success-color: @white;
@mark-success-background: @success;
@mark-success-border: none;

// Mark Info
@mark-info-color: @white;
@mark-info-background: @info;
@mark-info-border: none;



/*
 * Container
 */

// Container
@container-xsmall: 100%;
@container-small: 100%;
@container-medium: 1024px;
@container-large: 1280px;
@container-xlarge: 1680px;


/*
 * Gutter
 */

// Gutter
@gutter: @padding-xsmall;
@gutter-xlarge: @gutter;
@gutter-large: @gutter;
@gutter-medium: @gutter;
@gutter-small: @gutter;
@gutter-xsmall: @gutter;


/*
 * Label
 */

// Label
@label-margin: @input-margin;
@label-font-family: @regular-font-family;
@label-font-weight: @regular-font-weight;
@label-font-size: @font-size-small;
@label-color: @grey-600;
@label-line-height: @line-height-medium;


/*
 * Fieldset
 */

// Fieldset
@fieldset-margin: 1.6rem 0;
@fieldset-padding: 1rem;
@fieldset-border: 1px solid @light-grey;

// Feildset Legend
@fieldset-legend-padding: 0rem;
@fieldset-legend-font-size: @font-size-small;
@fieldset-legend-color: @mid-grey;


/*
 * Form Message
 */

// Form Message
@form-message-margin: @margin-xsmall 0 @margin-small;
@form-message-font-family: @paragraph-font-family;
@form-message-font-weight: @paragraph-font-weight;
@form-message-font-size: @font-size-small;
@form-message-color: @mid-grey;
@form-message-line-height: @line-height-large;

// Form Message Indicators
@form-message-error-color: @error;
@form-message-warning-color: @warning;
@form-message-success-color: @success;
@form-message-info-color: @info;


/*
 * Input
 */

// Input
@input-height: @height-medium;
@input-margin: @margin-xsmall 0;
@input-padding: 0 @padding-xsmall;
@input-color: @body-color;
@input-font-family: @regular-font-family;
@input-font-weight: @regular-font-weight;
@input-font-size: @font-size-medium;
@input-line-height: normal;
@input-background: @white;
@input-border: 1px solid @light-grey;
@input-border-radius: @border-radius;

// Input Hover
@input-hover-color: @input-color;
@input-hover-background: #FBFCFE;
@input-hover-border: 1px solid @grey-400;

// Input Focus
@input-focus-color: @input-color;
@input-focus-background: mix(@input-background, @grey-100, 65%);
@input-focus-border: 1px solid @primary;

// Input Placeholder
@input-placeholder-font-family: @input-font-family;
@input-placeholder-font-size: @input-font-size;
@input-placeholder-color: fade(@input-color, 50%);
@input-placeholder-line-height: @input-line-height;
@input-placeholder-letter-spacing: 0;
@input-placeholder-text-transform: none;

// Input Inverse
@input-inverse-color: @white;
@input-inverse-background: @inverse;
@input-inverse-border: none;

// Input Inverse Hover
@input-inverse-hover-color: @input-inverse-color;
@input-inverse-hover-background: darken(@input-inverse-background, 2%);
@input-inverse-hover-border: @input-inverse-border;

// Input Inverse Focus
@input-inverse-focus-color: @input-inverse-color;
@input-inverse-focus-background: darken(@input-inverse-background, 2%);
@input-inverse-focus-border: @input-inverse-border;

// Input Disabled
@input-disabled-color: @light;
@input-disabled-background: @light;
@input-disabled-border: 1px solid darken(@light, 10%);

// Input Search
@input-search-border-radius: @input-border-radius;

// Textarea
@textarea-padding: 8px;
@textarea-line-height: @line-height-large;


/*
 * Input Indicators
 */

// Input Indicators
@input-error-color: @error;
@input-warning-color: @warning;
@input-success-color: @success;
@input-info-color: @info;


/*
 * Input Sizes
 */

// Input Extra Large
@input-xlarge-padding: 0 1.6rem;
@input-xlarge-height: @height-xlarge;
@input-xlarge-font-size: @font-size-xlarge;

// Input Large
@input-large-padding: 0 1.6rem;
@input-large-height: @height-large;
@input-large-font-size: @font-size-large;

// Input Medium
@input-medium-padding: 0 1.2rem;
@input-medium-height: @input-height;
@input-medium-font-size: @input-font-size;

// Input Small
@input-small-padding: 0 0.8rem;
@input-small-height: @height-small;
@input-small-font-size: @font-size-small;

// Input Extra Small
@input-xsmall-padding: 0 0.8rem;
@input-xsmall-height: @height-xsmall;
@input-xsmall-font-size: @font-size-xsmall;


/*
 * Control
 */

// Control
@control-margin: @input-margin;
@control-padding: 0 0 0 1.5em;
@control-color: @input-color;

// Control Indicator
@control-indicator-size: 16px;
@control-indicator-color: @primary;
@control-indicator-background: @input-background;
@control-indicator-border: @input-border;

// Control Checked
@control-indicator-checked-background: @primary;
@control-indicator-checked-border: 1px solid @primary;
@control-label-checked-color: @control-label-color;

// Control Label
@control-label-margin: 0 0 0 @margin-xsmall;
@control-label-font-family: @input-font-family;
@control-label-font-weight: @input-font-weight;
@control-label-font-size: @label-font-size;
@control-label-color: @input-color;
@control-label-line-height: @input-line-height;

// Control Inline
@control-inline-margin-right: 20px;

// Checkbox
@checkbox-border-radius: none;

// Radio
@radio-border-radius: 50%;


/*
 * Select
 */

// Select
@select-margin: @input-margin;
@select-padding: @input-padding;
@select-height: @input-height;
@select-font-family: @input-font-family;
@select-font-weight: @input-font-weight;
@select-font-size: @input-font-size;
@select-color: @input-color;
@select-line-height: auto;
@select-background: @input-background;
@select-border: @input-border;
@select-border-radius: @border-radius;

// Select Arrow
@select-arrow-size: 0.4rem;
@select-arrow-background: @dark;

// Select Inverse
@select-inverse-color: @input-inverse-color;
@select-inverse-border: @input-inverse-border;
@select-inverse-background: @input-inverse-background;
@select-inverse-arrow-background: @white;


/*
 * Select Sizes
 */

// Select Extra Large
@select-xlarge-padding: @input-xlarge-padding;
@select-xlarge-height: @input-xlarge-height;
@select-xlarge-font-size: @input-xlarge-font-size;

// Select Large
@select-large-padding: @input-large-padding;
@select-large-height: @input-large-height;
@select-large-font-size: @input-large-font-size;

// Select Medium
@select-medium-padding: @select-padding;
@select-medium-height: @select-height;
@select-medium-font-size: @select-font-size;

// Select Small
@select-small-padding: @input-small-padding;
@select-small-height: @input-small-height;
@select-small-font-size: @input-small-font-size;

// Select Extra Small
@select-xsmall-padding: @input-xsmall-padding;
@select-xsmall-height: @input-xsmall-height;
@select-xsmall-font-size: @input-xsmall-font-size;


/*
 * Button
 */

// Button
@button-padding: 1.1rem 1.4rem;
@button-height: @height-medium;
@button-font-family: @semibold-font-family;
@button-font-weight: @semibold-font-weight;
@button-font-size: 1.2;
@button-color: @grey;
@button-line-height: 1;
@button-letter-spacing: 0;
@button-text-align: center;
@button-text-transform: none;
@button-background: @white;
@button-border: @input-border;
@button-border-radius: @border-radius;

// Button Hover
@button-hover-color: @dark;
@button-hover-background: @grey-100;
@button-hover-border: 1px solid @grey-400;


/*
 * Button Disabled
 */

// Button Disabled
@button-disabled-opacity: 0.35;


/*
 * Button Block
 */

// Button Block
@button-block-text-align: left;


/*
 * Button Styles
 */

// Button Inverse
@button-inverse-color: @button-color;
@button-inverse-background: @grey-100;
@button-inverse-border: @button-border;
@button-inverse-hover-color: @button-inverse-color;
@button-inverse-hover-background: darken(@button-inverse-background, 2%);
@button-inverse-hover-border: 1px solid @grey-400;

// Button Primary
@button-primary-color: @white;
@button-primary-background: @primary;
@button-primary-border: 1px solid @primary;
@button-primary-hover-color: @button-primary-color;
@button-primary-hover-background: darken(@primary, 8%);
@button-primary-hover-border: 1px solid darken(@primary, 8%);

// Button Secondary
@button-secondary-color: @white;
@button-secondary-background: @secondary;
@button-secondary-border: 1px solid @secondary;
@button-secondary-hover-color: @button-secondary-color;
@button-secondary-hover-background: darken(@secondary, 8%);
@button-secondary-hover-border: 1px solid darken(@secondary, 8%);

// Button Tertiary
@button-tertiary-color: @white;
@button-tertiary-background: @tertiary;
@button-tertiary-border: 1px solid @tertiary;
@button-tertiary-hover-color: @button-tertiary-color;
@button-tertiary-hover-background: darken(@tertiary, 8%);
@button-tertiary-hover-border: 1px solid darken(@tertiary, 8%);

// Button Border
@button-border-color: @dark;
@button-border-border: 1px solid @button-border-color;
@button-border-background: transparent;
@button-border-hover-color: @white;
@button-border-hover-border: 1px solid @button-border-color;
@button-border-hover-background: @button-border-color;

// Button Text
@button-text-color: @dark;
@button-text-hover-color: @primary;


/*
 * Button Indicators
 */

// Button Error
@button-error-color: @white;
@button-error-background: @error;
@button-error-border: none;
@button-error-hover-color: @button-error-color;
@button-error-hover-background: darken(@error, 8%);
@button-error-hover-border: none;

// Button Warning
@button-warning-color: @white;
@button-warning-background: @warning;
@button-warning-border: none;
@button-warning-hover-color: @button-warning-color;
@button-warning-hover-background: darken(@warning, 8%);
@button-warning-hover-border: none;

// Button Success
@button-success-color: @white;
@button-success-background: @success;
@button-success-border: none;
@button-success-hover-color: @button-success-color;
@button-success-hover-background: darken(@success, 8%);
@button-success-hover-border: none;

// Button Info
@button-info-color: @white;
@button-info-background: @info;
@button-info-border: none;
@button-info-hover-color: @button-info-color;
@button-info-hover-background: darken(@button-info-background, 8%);
@button-info-hover-border: none;


/*
 * Button Sizes
 */

// Button Extra Large
@button-xlarge-padding: 1.3rem 1.8rem;
@button-xlarge-height: @height-xlarge;
@button-xlarge-font-size: @font-size-xlarge;

// Button Large
@button-large-padding: 1.1rem 1.6rem;
@button-large-height: @height-large;
@button-large-font-size: @font-size-large;

// Button Medium
@button-medium-padding: @button-padding;
@button-medium-height: @button-height;
@button-medium-font-size: @button-font-size;

// Button Small
@button-small-padding: 1rem 1.2rem;
@button-small-height: @height-small;
@button-small-font-size: @font-size-small;

// Button Extra Small
@button-xsmall-padding: 0.8rem 1.0rem;
@button-xsmall-height: @height-xsmall;
@button-xsmall-font-size: @font-size-xsmall;


/*
 * Figure
 */

// Figure
@figure-display: block;
@figure-margin: 0;
@figure-padding: @padding-xsmall;
@figure-border: 1px solid @light-grey;

// Figure Caption
@figure-caption-margin: 10px 0;
@figure-caption-font-family: @paragraph-font-family;
@figure-caption-font-weight: @paragraph-font-weight;
@figure-caption-font-size: @paragraph-font-size;
@figure-caption-color: @body-color;
@figure-caption-text-align: center;


/*
 * Media
 */

// Media
@media-background: @light;


/*
 * Nav
 */

// Nav
@nav-list-margin: 0;
@nav-item-margin: 10px 0;

// Nav Inline
@nav-inline-item-margin: 0 10px;


/*
 * Table
 */

// Table
@table-background: none;
@table-border: 1px solid @light-grey;
@table-border-radius: @border-radius;

// Table Caption
@table-caption-margin: @margin-xsmall 0;
@table-caption-font-family: @semibold-font-family;
@table-caption-font-weight: @semibold-font-weight;
@table-caption-font-size: @font-size-medium;
@table-caption-color: @body-color;
@table-caption-text-align: left;

// Table Head
@table-head-padding: @padding-small @padding-xsmall;
@table-head-font-family: @semibold-font-family;
@table-head-font-weight: @semibold-font-weight;
@table-head-font-size: @paragraph-font-size;
@table-head-text-align: left;
@table-head-text-transform: none;
@table-head-color: @body-color;
@table-head-border: @table-border;
@table-head-background: @light;

// Table Cell
@table-cell-padding: @padding-small @padding-xsmall;
@table-cell-font-family: @regular-font-family;
@table-cell-font-weight: @regular-font-weight;
@table-cell-font-size: @paragraph-font-size;
@table-cell-color: @body-color;
@table-cell-line-height: @line-height-medium;
@table-cell-vertical-align: middle;
@table-cell-border: @table-border;

// Table Reponsive
@table-responsive-breakpoint: @xsmall;