/* #PRODUIRE{fond=css/bootstrap.css}
md5:35b87cafd34f61c9c809fcc8fd63fae7 */
/*!
* Bootstrap v3.3.6 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// Core variables and mixins
// ------ Couleurs ------
@black: #000;
@white: #fff;
@gris-base: #000;
@gris-darker: lighten(@gris-base, 13.5%); // #222
@gris-dark: lighten(@gris-base, 20%); // #333
@gris: lighten(@gris-base, 33.5%); // #555
@gris-light: lighten(@gris-base, 46.7%); // #777
@gris-lighter: lighten(@gris-base, 90.9%); // #e8e8e8
@gris-extralighter: lighten(@gris-base, 95%); // #e8e8e8
// Adaptateur BS2
@grisDarker: @gris-darker;
@grisDark: @gris-dark;
@grisLight: @gris-light;
@grisLighter: @gris-lighter;
@grisExtraLighter: @gris-extralighter;
@bleu: #00969c;
@bleuLight: #7fc3ea;
@bleuDark: #044769;
@vert: #6fbd47;
@vertLight: #cbda42;
@rouge: #ec1e24;
@rougeLight: lighten(@rouge, 15%);
@rougeDark: darken(@rouge, 15%);
@jaune: #f0b214;
@orange: #ff3c00;;
@orangeLighter: #ed9140;
@orangeLight: #d2791d;
@orangeDark: #DE3700;
@rose: #c3325f;
@violet: #7C57A2;
@turquoise: #00BEDF;
@bleu_fb: #5267AA;
@bleu_tw: #26BBED;
@couleur-defaut : @orange;
@couleur-defautLight: lighten(@couleur-defaut, 15%);
@couleur-defautDark: darken(@couleur-defaut, 15%);
// Scaffolding
@bodyBackground: @white;
@textColor: @grisDark;
// Links
@linkColor: @bleuDark;
@linkColorHover: @bleu;
// Adaptateur BS2
@brand-defaut: @rouge;
@brand-primary: @bleu;
@brand-vert: @vert;
@brand-jaune: @jaune;
@brand-orange: @orange;
@brand-rouge: @rouge;
@body-bg: @bodyBackground;
@text-color: @textColor;
@link-color: @linkColor;
@link-hover-color: @linkColorHover;
@link-hover-decoration: none;
// === Typography ===
@sansFontFamily: 'Baloo Chettan 2', Verdana, sans-serif;
@labeur: @sansFontFamily;
@serifFontFamily: Georgia, Cambria, Times New Roman, Times, serif;
@monoFontFamily: "Courier New", Courier, monospace;
@baseFontSize: 18px;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 24px;
@altFontFamily: @sansFontFamily;
@labeur: @baseFontFamily;
@headingsFontFamily: @baseFontFamily; // empty to use BS defaut, @baseFontFamily
@headingsFontWeight: normal; // instead of browser defaut, bold
@headingsColor: inherit; // empty to use BS defaut, @textColor
@titraille: @baseFontFamily;
// Adaptateur BS2
@font-family-sans-serif: @sansFontFamily;
@font-family-serif: @serifFontFamily;
@font-family-monospace: @monoFontFamily;
@font-family-base: @font-family-serif;
@font-size-base: @baseFontSize;
@font-size-large: @fontSizeLarge; // ~18px
@font-size-small: @fontSizeSmall; // ~12px
@font-size-h1: floor((@font-size-base * 2));
@font-size-h2: floor((@font-size-base * 1.5));
@font-size-h3: ceil((@font-size-base * 1.25));
@font-size-h4: ceil((@font-size-base * 1.1));
@font-size-h5: @font-size-base;
@font-size-h6: @font-size-base;
//** Unit-less `line-height` for use in components like buttons.
@line-height-base: unit(@baseLineHeight / @baseFontSize);
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed: @baseLineHeight; // ~20px
//** By defaut, this inherits from the ``.
@headings-font-family: @headingsFontFamily;
@headings-font-weight: @headingsFontWeight;
@headings-line-height: 1.1;
@headings-color: @headingsColor;
//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
//** Load fonts from this directory.
@icon-font-path: "../fonts/";
//** File name for all font files.
@icon-font-name: "glyphicons-halflings-regular";
//** Element ID within SVG icon file.
@icon-font-svg-id: "glyphicons_halflingsregular";
// ==== Component sizing ====
@fontSizeLarge: @baseFontSize * 1.25; // ~18px
@fontSizeSmall: @baseFontSize * 0.85; // ~12px
@fontSizeMini: @baseFontSize * 0.75; // ~11px
@paddingLarge: .2em .5em; // 44px
@paddingSmall: 2px 10px; // 26px
@paddingMini: 0 6px; // 22px
@baseBorderRadius: .2em;
@borderRadiusLarge: .2em;
@borderRadiusSmall: .4em;
// Utilisé pour les boutons
@padding-base-vertical: 0.4em;
@padding-base-horizontal: .8em;
@padding-large-vertical: 0.2em;
@padding-large-horizontal: .7em;
@padding-small-vertical: .4em;
@padding-small-horizontal: .6em;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
@line-height-small: 1.5;
// Adaptateur BS2
@border-radius-base: @baseBorderRadius;
@border-radius-large: @borderRadiusLarge;
@border-radius-small: @borderRadiusSmall;
//** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff;
//** Global background color for active items (e.g., navs or dropdowns).
@component-active-bg: @brand-primary;
//** Width of the `border` for generating carets that indicator dropdowns.
@caret-width-base: 4px;
//** Carets increase slightly in size for larger components.
@caret-width-large: 5px;
// Tables
@tableBackground: @grisLighter; // overall background-color
@tableBackgroundAccent: #f9f9f9; // for striping
@tableBackgroundHover: #f5f5f5; // for hover
@tableBorder: #ddd; // table and cell border
//** Padding for `| `s and ` | `s.
@table-cell-padding: 8px;
//** Padding for cells in `.table-condensed`.
@table-condensed-cell-padding: 5px;
// Adaptateur BS2
@table-bg: @tableBackground;
@table-bg-accent: @tableBackgroundAccent;
@table-bg-hover: @tableBackgroundHover;
@table-bg-active: @table-bg-hover;
@table-border-color: @tableBorder;
// Buttons
@btnBackground: @couleur-defaut;
@btnBackgroundHighlight: darken(@couleur-defaut, 10%);
@btnBorder: #bbb;
@btnPrimaryBackground: @linkColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@btnJauneBackground: lighten(@bleu, 5%);
@btnJauneBackgroundHighlight: darken(@bleu, 5%);
@btnVertBackground: lighten(@vert, 5%);
@btnVertBackgroundHighlight: darken(@vert, 5%);
@btnOrangeBackground: lighten(@orange, 15%);
@btnOrangeBackgroundHighlight: @orange;
@btnRougeBackground: @rouge;
@btnRougeBackgroundHighlight: darken(@rouge, 5%);
@btnBleuBackground: @bleu;
@btnBleuBackgroundHighlight: darken(@bleu, 5%);
@btnVioletBackground: @violet;
@btnVioletBackgroundHighlight: darken(@violet, 5%);
@btnInverseBackground: #444;
@btnInverseBackgroundHighlight: @grisDarker;
// Adaptateur BS2
@btn-font-weight: normal;
@btn-defaut-color: #fff;
@btn-defaut-bg: @btnBackground;
@btn-defaut-border: darken(@btn-defaut-bg, 5%);
@btn-primary-color: #fff;
@btn-primary-bg: @btnPrimaryBackground;
@btn-primary-border: darken(@btn-primary-bg, 5%);
@btn-vert-color: #fff;
@btn-vert-bg: @btnVertBackground;
@btn-vert-border: darken(@btn-vert-bg, 5%);
@btn-jaune-color: #fff;
@btn-jaune-bg: @brand-jaune;
@btn-jaune-border: darken(@btn-jaune-bg, 5%);
@btn-orange-color: #fff;
@btn-orange-bg: @btnOrangeBackground;
@btn-orange-border: darken(@btn-orange-bg, 5%);
@btn-rouge-color: #fff;
@btn-rouge-bg: @btnRougeBackground;
@btn-rouge-border: darken(@btn-rouge-bg, 5%);
@btn-bleu-color: #fff;
@btn-bleu-bg: @btnBleuBackground;
@btn-bleu-border: darken(@btn-bleu-bg, 5%);
@btn-violet-color: #fff;
@btn-violet-bg: @btnVioletBackground;
@btn-violet-border: darken(@btn-violet-bg, 5%);
@btn-link-disabled-color: @gris-light;
@btn-border-radius-base: @border-radius-base;
@btn-border-radius-large: @border-radius-large;
@btn-border-radius-small: @border-radius-small;
// ==== Filigrane ====
@filigrane : url('');
// ==== Forms ====
// --- Couleurs ---
@formActionsBackground: #f5f5f5;
@inputBackground: @white;
@inputBorder: #ccc;
@inputDisabledBackground: @grisLighter;
@placeholderText: @grisLight;
@input-border-focus: #66afe9;
@legend-color: @gris-dark;
@legend-border-color: #e5e5e5;
@input-group-addon-bg: @gris-lighter;
// --- Hauteurs ---
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@form-group-margin-bottom: 0;
@cursor-disabled: not-allowed;
// Adaptateur BS2
@input-group-addon-border-color: @input-border;
@input-bg: @inputBackground;
@input-bg-disabled: @inputDisabledBackground;
@input-color: @gris;
@input-border: @inputBorder;
@input-border-radius: @inputBorderRadius;
@input-color-placeholder: @placeholderText;
@input-border-radius-large: @border-radius-large;
@input-border-radius-small: @border-radius-small;
@inputBorderRadius: @baseBorderRadius;
// ==== Dropdowns ====
@dropdownBackground: @white;
@dropdownBorder: rgba(0,0,0,.2);
@dropdownDividerTop: #e5e5e5;
@dropdownDividerBottom: @white;
@dropdownLinkColor: @grisDark;
@dropdownLinkColorHover: @white;
@dropdownLinkColorActive: @white;
@dropdownLinkBackgroundActive: @linkColor;
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
// Adaptateur BS2
@dropdown-bg: @dropdownBackground;
@dropdown-border: @dropdownBorder;
@dropdown-fallback-border: #ccc;
@dropdown-divider-bg: @dropdownDividerTop;
@dropdown-link-color: @dropdownLinkColor;
@dropdown-link-hover-color: @dropdownLinkColorHover;
@dropdown-link-hover-bg: @dropdownLinkBackgroundHover;
@dropdown-link-active-color: @dropdownLinkColorActive;
@dropdown-link-active-bg: @dropdownLinkBackgroundActive;
@dropdown-link-disabled-color: @gris-light;
@dropdown-header-color: @gris-light;
@dropdown-caret-color: #000;
// ==== Z-index master list ====
@zindexDropdown: 1000;
@zindexPopover: 1010;
@zindexTooltip: 1030;
@zindexFixedNavbar: 1030;
@zindexModalBackdrop: 1040;
@zindexModal: 1050;
// Adaptateur border-style: 2px;
@zindex-navbar: 1000;
@zindex-dropdown: @zindexDropdown;
@zindex-popover: @zindexPopover;
@zindex-tooltip: @zindexTooltip;
@zindex-navbar-fixed: @zindexFixedNavbar;
@zindex-modal-background: @zindexModalBackdrop;
@zindex-modal: @zindexModal;
// ============================= GRILLE =============================
// Grille par defaut
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 60px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
// Adaptateur BS2
@grid-columns: @gridColumns;
@grid-gutter-width: @gridGutterWidth;
@grid-float-breakpoint: @navbarCollapseDesktopWidth;
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
// Extra small screen / phone
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;
// Small screen - 768px max ( tablette )
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
@screen-xs-max: (@screen-sm-min - 1);
@screen-tablet: @screen-sm-min;
// Medium screen - 992 max
@screen-md: 992px;
@screen-md-min: @screen-md;
@screen-sm-max: (@screen-md-min - 1);
@screen-desktop: @screen-md-min;
// Large - 1280px max
@screen-lg: 1280px;
@screen-lg-min: @screen-lg;
@screen-md-max: (@screen-lg-min - 1);
@screen-lg-desktop: @screen-lg-min;
// Extra Large - 1366px max
@screen-xl: 1366px;
@screen-xl-min: @screen-xl;
@screen-lg-max: (@screen-xl-min - 1);
@screen-xl-desktop: @screen-xl-min;
// So media queries don't overlap when required, provide a maximum
// Small screen / tablet
@container-tablet: (720px + @grid-gutter-width);
@container-sm: @container-tablet;
// Medium screen / desktop
@container-desktop: (950px + @grid-gutter-width);
@container-md: @container-desktop;
// Large screen / wide desktop
@container-large-desktop: (1200px + @grid-gutter-width);
@container-lg: @container-large-desktop;
// Trés largeLarge screen / wide desktop
@container-treslarge-desktop: (1306px + @grid-gutter-width);
@container-xl: @container-treslarge-desktop;
// ============================= MENU =============================
@navbarCollapseWidth: 767px;
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 45px;
@navbarBackgroundHighlight: #ffffff;
@navbarBackground: @bleu;
@navbarBorder: lighten(@navbarBackground, 12%);
@navbarText: @white;
@navbarLinkColor: @white;
@navbarLinkColorHover: @grisDark;
@navbarLinkColorActive: @gris;
@navbarLinkBackgroundHover: transparent;
@navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
@navbarBrandColor: @navbarLinkColor;
// Ajout Laurent
@navbarsupHeight: 45px;
// ------ Menu navba: r negatif ------
@navbarInverseBackground: #111111;
@navbarInverseBackgroundHighlight: #222222;
@navbarInverseBorder: #252525;
@navbarInverseText: @grisLight;
@navbarInverseLinkColor: @grisLight;
@navbarInverseLinkColorHover: @white;
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
@navbarInverseLinkBackgroundHover: transparent;
@navbarInverseLinkBackgroundActive: @navbarInverseBackground;
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
@navbarInverseSearchBackgroundFocus: @white;
@navbarInverseSearchBorder: @navbarInverseBackground;
@navbarInverseSearchPlaceholderColor: #ccc;
@navbarInverseBrandColor: @navbarInverseLinkColor;
// Adaptateur BS2
// Basics of a navbar
@navbar-height: @navbarHeight;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px;
@navbar-defaut-color: @navbarText;
@navbar-defaut-bg: @navbarBackground;
@navbar-defaut-border: @navbarBorder;
// Navbar links
@navbar-defaut-link-color: @navbarLinkColor;
@navbar-defaut-link-hover-color: @navbarLinkColorHover;
@navbar-defaut-link-hover-bg: @navbarLinkBackgroundHover;
@navbar-defaut-link-active-color: @navbarLinkColorActive;
@navbar-defaut-link-active-bg: @navbarLinkBackgroundActive;
@navbar-defaut-link-disabled-color: #ccc;
@navbar-defaut-link-disabled-bg: transparent;
// Navbar brand label
@navbar-defaut-brand-color: @navbarBrandColor;
@navbar-defaut-brand-hover-color: darken(@navbar-defaut-brand-color, 10%);
@navbar-defaut-brand-hover-bg: transparent;
// Navbar toggle
@navbar-defaut-toggle-hover-bg: transparent;
@navbar-defaut-toggle-icon-bar-bg: #888;
@navbar-defaut-toggle-border-color: #ddd;
//=== Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color: @navbarInverseText;
@navbar-inverse-bg: @navbarInverseBackground;
@navbar-inverse-border: @navbarInverseBorder;
// Inverted navbar list-style: ;
@navbar-inverse-link-color: @navbarInverseLinkColor;
@navbar-inverse-link-hover-color: @navbarInverseLinkColorHover;
@navbar-inverse-link-hover-bg: @navbarInverseLinkBackgroundHover;
@navbar-inverse-link-active-color: @navbarInverseLinkColorActive;
@navbar-inverse-link-active-bg: @navbarInverseLinkBackgroundActive;
@navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label
@navbar-inverse-brand-color: @navbarInverseBrandColor;
@navbar-inverse-brand-hover-color: #fff;
@navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: transparent;
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333;
//== Tabs
@nav-tabs-border-color: #ddd;
@nav-tabs-link-hover-border-color: @gris-lighter;
@nav-tabs-active-link-hover-bg: @body-bg;
@nav-tabs-active-link-hover-color: @gris;
@nav-tabs-active-link-hover-border-color: #ddd;
@nav-tabs-justified-link-border-color: #ddd;
@nav-tabs-justified-active-link-border-color: @body-bg;
//== Pills
@nav-pills-border-radius: @border-radius-base;
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color;
// ==== Pagination =====
@paginationBackground: #fff;
@paginationBorder: #ddd;
@paginationActiveBackground: #f5f5f5;
// Adaptateur BS2
@pagination-color: @link-color;
@pagination-bg: @paginationBackground;
@pagination-border: @paginationBorder;
@pagination-hover-color: @link-hover-color;
@pagination-hover-bg: @gris-lighter;
@pagination-hover-border: #ddd;
@pagination-active-color: #fff;
@pagination-active-bg: @brand-primary;
@pagination-active-border: @brand-primary;
@pagination-disabled-color: @gris-light;
@pagination-disabled-bg: #fff;
@pagination-disabled-border: #ddd;
// ==== Pager (BS2) ====
@pager-bg: @pagination-bg;
@pager-border: @pagination-border;
@pager-border-radius: 15px;
@pager-hover-bg: @pagination-hover-bg;
@pager-active-bg: @pagination-active-bg;
@pager-active-color: @pagination-active-color;
@pager-disabled-color: @pagination-disabled-color;
/* ==== Form states and alerts ==== */
@orangeText: #c09853;
@orangeBackground: #fcf8e3;
@orangeBorder: darken(spin(@orangeBackground, -10), 3%);
@rougeText: #b94a48;
@rougeBackground: #f2dede;
@rougeBorder: darken(spin(@rougeBackground, -10), 3%);
@vertText: #468847;
@vertBackground: #dff0d8;
@vertBorder: darken(spin(@vertBackground, -10), 5%);
@jauneText: #3a87ad;
@jauneBackground: #d9edf7;
@jauneBorder: darken(spin(@jauneBackground, -10), 7%);
/* Adaptateur BS2 */
@state-vert-text: @vertText;
@state-vert-bg: @vertBackground;
@state-vert-border: @vertBorder;
@state-jaune-text: @jauneText;
@state-jaune-bg: @jauneBackground;
@state-jaune-border: @jauneBorder;
@state-orange-text: @orangeText;
@state-orange-bg: @orangeBackground;
@state-orange-border: @orangeBorder;
@state-rouge-text: @rougeText;
@state-rouge-bg: @rougeBackground;
@state-rouge-border: @rougeBorder;
/* ==== Tooltips and popovers ==== */
@tooltipColor: #fff;
@tooltipBackground: #000;
@tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground;
@popoverBackground: #fff;
@popoverArrowWidth: 10px;
@popoverArrowColor: #fff;
@popoverTitleBackground: darken(@popoverBackground, 3%);
/* Adaptateur BS2 */
@tooltip-max-width: 200px;
@tooltip-color: @tooltipColor;
@tooltip-bg: @tooltipBackground;
@tooltip-opacity: .9;
@tooltip-arrow-width: @tooltipArrowWidth;
@tooltip-arrow-color: @tooltipArrowColor;
/* ==== Special enhancement for popovers ==== */
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
@popoverArrowOuterColor: rgba(0,0,0,.25);
/* Adaptateur BS2 */
@popover-bg: @popoverBackground;
@popover-max-width: 276px;
@popover-border-color: fadeout(@popoverArrowOuterColor, 5%);
@popover-fallback-border-color: #ccc;
@popover-title-bg: @popoverTitleBackground;
@popover-arrow-width: @popoverArrowWidth;
@popover-arrow-color: @popover-bg;
@popover-arrow-outer-width: @popoverArrowOuterWidth;
@popover-arrow-outer-color: @popoverArrowOuterColor;
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
/* ==== Labels (BS2) ==== */
@label-defaut-bg: @gris-light;
@label-primary-bg: @brand-primary;
@label-vert-bg: @vert;
@label-jaune-bg: @jaune;
@label-orange-bg: @orange;
@label-rouge-bg: @rouge;
@label-bleu-bg: @bleu;
@label-violet-bg: @violet;
@label-rose-bg: @rose;
@label-turquoise-bg: @turquoise;
@label-color: #fff;
@label-link-hover-color: #fff;
/* ==== Modals (BS2) ==== */
// Padding applied to the modal body
@modal-inner-padding: 15px;
// Padding applied to the modal title
@modal-title-padding: 15px;
// Modal title line-height
@modal-title-line-height: @line-height-base;
// Background color of modal content area
@modal-content-bg: #fff;
// Modal content border color
@modal-content-border-color: rgba(0,0,0,.2);
// Modal content border color **for IE8**
@modal-content-fallback-border-color: #999;
// Modal backdrop background color
@modal-backdrop-bg: #000;
// Modal backdrop opacity
@modal-backdrop-opacity: .5;
// Modal header border color
@modal-header-border-color: #e5e5e5;
// Modal footer border color
@modal-footer-border-color: @modal-header-border-color;
@modal-lg: 900px;
@modal-md: 600px;
@modal-sm: 300px;
/* ==== Alerts (BS2) ==== */
@alert-padding: 15px;
@alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold;
@alert-vert-bg: @state-vert-bg;
@alert-vert-text: @state-vert-text;
@alert-vert-border: @state-vert-border;
@alert-jaune-bg: @state-jaune-bg;
@alert-jaune-text: @state-jaune-text;
@alert-jaune-border: @state-jaune-border;
@alert-orange-bg: @state-orange-bg;
@alert-orange-text: @state-orange-text;
@alert-orange-border: @state-orange-border;
@alert-rouge-bg: @state-rouge-bg;
@alert-rouge-text: @state-rouge-text;
@alert-rouge-border: @state-rouge-border;
/* ==== Progress bars (BS2) ==== */
// Background color of the whole progress component
@progress-bg: #f5f5f5;
// Progress bar text color
@progress-bar-color: #fff;
// Variable for setting rounded corners on progress bar.
@progress-border-radius: @border-radius-base;
// Defaut progress bar color
@progress-bar-bg: @brand-primary;
// Vert progress bar color
@progress-bar-vert-bg: @brand-vert;
// Orange progress bar color
@progress-bar-orange-bg: @brand-orange;
// Rouge progress bar color
@progress-bar-rouge-bg: @brand-rouge;
// Info progress bar color
@progress-bar-jaune-bg: @brand-jaune;
/* ==== Thumbail (BS2) ==== */
@thumbnail-padding: 4px;
@thumbnail-bg: @body-bg;
@thumbnail-border: #ddd;
@thumbnail-border-radius: @border-radius-base;
@thumbnail-caption-color: @text-color;
@thumbnail-caption-padding: 9px;
/* ==== Wells ===== */
@wellBackground: #f5f5f5;
// Adaptateur BS2
@well-bg: @wellBackground;
@well-border: darken(@well-bg, 7%);
/* ==== Badges (BS2) ==== */
@badge-color: #fff;
@badge-link-hover-color: #fff;
@badge-bg: @gris-light;
@badge-active-color: @link-color;
@badge-active-bg: #fff;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
/* ==== Carousel (BS2) ==== */
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
@carousel-control-color: #fff;
@carousel-control-width: 15%;
@carousel-control-opacity: .5;
@carousel-control-font-size: 20px;
@carousel-indicator-active-bg: #fff;
@carousel-indicator-border-color: #fff;
@carousel-caption-color: #fff;
/* ==== Close (BS2) ==== */
@close-font-weight: bold;
@close-color: #000;
@close-text-shadow: 0 1px 0 #fff;
/* ==== Code (BS2) ==== */
@code-color: #c7254e;
@code-bg: #f9f2f4;
@kbd-color: #fff;
@kbd-bg: #333;
@pre-bg: #f5f5f5;
@pre-color: @gris-dark;
@pre-border-color: #ccc;
@pre-scrollable-max-height: 340px;
/* ==== Type (BS2) ==== */
/* Horizontal offset for forms and lists. */
@component-offset-horizontal: 180px;
/* Text muted color */
@text-muted: @gris-light;
/* Abbreviations and acronyms border color */
@abbr-border-color: @gris-light;
/* Headings small color */
@headings-small-color: @gris-light;
/* Blockquote small color */
@blockquote-small-color: @gris-light;
/* Blockquote font size */
@blockquote-font-size: inherit;
/* Blockquote border color */
@blockquote-border-color: @gris-lighter;
/* Page header border color */
@page-header-border-color: @gris-lighter;
/* Width of horizontal description list titles */
@dl-horizontal-offset: @component-offset-horizontal;
/* Point at which .dl-horizontal becomes horizontal */
@dl-horizontal-breakpoint: @grid-float-breakpoint;
/* Horizontal line color. */
@hrBorder: @grisLighter;
@hr-border: @hrBorder;
/* ==== Sprite icons path ==== */
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
/* ==== Horizontal forms & lists ==== */
@horizontalComponentOffset: 180px;
/* ==== Hero unit ==== */
@heroUnitBackground: @grisLighter;
@heroUnitHeadingColor: inherit;
@heroUnitLeadColor: inherit;
/* Typo SPIP */
@emFontSize : 1em * (@font-size-base / 16);
@emLineHeight : 1em * (@line-height-base);
@emVertMargin : @emLineHeight;
@indentStep : (@container-md / @grid-columns) / 2;
@indentStep1200 : (@container-lg / @grid-columns) / 2;
@indentStep768 : (@container-sm / @grid-columns) / 2;
@font-size-large-em : 1em * @font-size-large / @font-size-base;
@font-size-small-em : 1em * @font-size-small / @font-size-base;
@font-size-h1-em: 1em * @font-size-h1 / @font-size-base;
@font-size-h2-em: 1em * @font-size-h2 / @font-size-base;
@font-size-h3-em: 1em * @font-size-h3 / @font-size-base;
@font-size-h4-em: 1em * @font-size-h4 / @font-size-base;
@font-size-h5-em: 1em * @font-size-h5 / @font-size-base;
@font-size-h6-em: 1em * @font-size-h6 / @font-size-base;
//
// Mixins
// --------------------------------------------------
// Vendor Prefixes
//
// All vendor mixins are deprecated as of v3.2.0 due to the introduction of
// Autoprefixer in our Gruntfile. They have been removed in v4.
// - Animations
// - Backface visibility
// - Box shadow
// - Box sizing
// - Content columns
// - Hyphens
// - Placeholder text
// - Transformations
// - Transitions
// - User Select
// Animations
.animation(@animation) {
-webkit-animation: @animation;
-o-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}
.animation-fill-mode(@fill-mode) {
-webkit-animation-fill-mode: @fill-mode;
animation-fill-mode: @fill-mode;
}
// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Defaut value is `visible`, but can be changed to `hidden`
.backface-visibility(@visibility) {
-webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility;
backface-visibility: @visibility;
}
// Drop shadows
//
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
// supported browsers that have box shadow capabilities now support it.
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
// Box sizing
.box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
// CSS3 Content Columns
.content-columns(@column-count; @column-gap: @grid-gutter-width) {
-webkit-column-count: @column-count;
-moz-column-count: @column-count;
column-count: @column-count;
-webkit-column-gap: @column-gap;
-moz-column-gap: @column-gap;
column-gap: @column-gap;
}
// Optional hyphenation
.hyphens(@mode: auto) {
word-wrap: break-word;
-webkit-hyphens: @mode;
-moz-hyphens: @mode;
-ms-hyphens: @mode; // IE10+
-o-hyphens: @mode;
hyphens: @mode;
}
// Placeholder text
.placeholder(@color: @input-color-placeholder) {
// Firefox
&::-moz-placeholder {
color: @color;
opacity: 1; // Override Firefox's unusual defaut opacity; see https://github.com/twbs/bootstrap/pull/11526
}
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}
// Transformations
.scale(@ratio) {
-webkit-transform: scale(@ratio);
-ms-transform: scale(@ratio); // IE9 only
-o-transform: scale(@ratio);
transform: scale(@ratio);
}
.scale(@ratioX; @ratioY) {
-webkit-transform: scale(@ratioX, @ratioY);
-ms-transform: scale(@ratioX, @ratioY); // IE9 only
-o-transform: scale(@ratioX, @ratioY);
transform: scale(@ratioX, @ratioY);
}
.scaleX(@ratio) {
-webkit-transform: scaleX(@ratio);
-ms-transform: scaleX(@ratio); // IE9 only
-o-transform: scaleX(@ratio);
transform: scaleX(@ratio);
}
.scaleY(@ratio) {
-webkit-transform: scaleY(@ratio);
-ms-transform: scaleY(@ratio); // IE9 only
-o-transform: scaleY(@ratio);
transform: scaleY(@ratio);
}
.skew(@x; @y) {
-webkit-transform: skewX(@x) skewY(@y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
-o-transform: skewX(@x) skewY(@y);
transform: skewX(@x) skewY(@y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
-o-transform: translate(@x, @y);
transform: translate(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
-o-transform: rotate(@degrees);
transform: rotate(@degrees);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
-o-transform: rotateX(@degrees);
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
-o-transform: rotateY(@degrees);
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
// User select
// For selecting text on the page
.user-select(@select) {
-webkit-user-select: @select;
-moz-user-select: @select;
-ms-user-select: @select; // IE10+
user-select: @select;
}
// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes.
.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
// Color the label and help text
.help-block,
.control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline,
&.radio label,
&.checkbox label,
&.radio-inline label,
&.checkbox-inline label {
color: @text-color;
}
// Set the border and box shadow on specific inputs to match
.form-control {
border-color: @border-color;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken(@border-color, 10%);
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
.box-shadow(@shadow);
}
}
// Set validation states also for addons
.input-group-addon {
color: @text-color;
border-color: @border-color;
background-color: @background-color;
}
// Optional feedback icon
.form-control-feedback {
color: @text-color;
}
}
// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defauts to the `@input-border-focus` variable.
//
// We highly encourage you to not customize the defaut value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's defaut styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the defaut bleu border and shadow to white for better
// contrast against a dark gris background.
.form-control-focus(@color: @input-border-focus) {
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
&:focus {
border-color: @color;
outline: 0;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
}
}
// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. ` |