
/*doc
---
title: Colors
name: Colors
category: Variables - colors
---
Color patterns used in the whole Bahmni application are listed below... For using any particular color , you should call the variable used for the color.

```html_example
    <div class="row">

    <div class="col-sm-3 col-xs-6">
      <div style="background:#00463f;"><br><br><br><br><br></div>
      <pre class="text-center">$bahmniPrimaryColor</pre>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div style="background:#669999;"><br><br><br><br><br></div>
      <pre class="text-center">$bahmniSecondaryColor</pre>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div style="background: #457FAC;"><br><br><br><br><br></div>
      <pre class="text-center">$bahmniTertiaryColor</pre>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div style="background:#2b95ff;"><br><br><br><br><br></div>
      <pre class="text-center">$bahmniLinkColor</pre>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div style="background:#a1d030;"><br><br><br><br><br></div>
      <pre class="text-center">$bahmniPrimaryBtnColor</pre>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div style="background:#88af28;"><br><br><br><br><br></div>
      <pre class="text-center">$bahmniPrimaryBtnColorHover</pre>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div style="background:#66b298;"><br><br><br><br><br></div>
      <pre class="text-center">$bahmniSectionHeaderColor</pre>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div style="background: #EFF8FF;"><br><br><br><br><br></div>
      <pre class="text-center">$clinicalNotesColor</pre>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div style="background:#E8A000;"><br><br><br><br><br></div>
      <pre class="text-center">$clinicalCurrentVist</pre>
    </div>

     <div class="col-sm-3 col-xs-6">
      <div style="background:#e8edf3;"><br><br><br><br><br></div>
      <pre class="text-center">$clinicalInfoMessageBg</pre>
    </div>

     <div class="col-sm-3 col-xs-6">
      <div style="background: #660000;"><br><br><br><br><br></div>
      <pre class="text-center">$clinicalRemoveBtn</pre>
    </div>

     <div class="col-sm-3 col-xs-6">
      <div style="background:#cceffc;"><br><br><br><br><br></div>
      <pre class="text-center">$clinicalHighlight</pre>
    </div>

     <div class="col-sm-3 col-xs-6">
      <div style="background: #ffcdcd;"><br><br><br><br><br></div>
      <pre class="text-center">$clinicalFormInvalid</pre>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div style="background: #007fff;"><br><br><br><br><br></div>
      <pre class="text-center">$clinicalFormFocus</pre>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div style="background: #fffdf7;"><br><br><br><br><br></div>
      <pre class="text-center">$clinicalFormFocusBg</pre>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div style="background: #FFFAD8;"><br><br><br><br><br></div>
      <pre class="text-center">$clinicalFormWarning</pre>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div style="background:#333;"><br><br><br><br><br></div>
      <pre class="text-center">$darkGray</pre>
    </div>

    <div class="col-sm-3 col-xs-6">
      <div style="background: #666;"><br><br><br><br><br></div>
      <pre class="text-center">$mediumGray</pre>
    </div>
    <div class="col-sm-3 col-xs-6">
        <div style="background:#ccc;"><br><br><br><br><br></div>
        <pre class="text-center">$lightGray</pre>
    </div>

     <div class="col-sm-3 col-xs-6">
        <div style="background: #ddd;"><br><br><br><br><br></div>
        <pre class="text-center">$lighterGray</pre>
     </div>

      <div class="col-sm-3 col-xs-6">
          <div style="background: #eee;"><br><br><br><br><br></div>
          <pre class="text-center">$lightestGray</pre>
      </div>

      <div class="col-sm-3 col-xs-6">
            <div style="background: #bbb;"><br><br><br><br><br></div>
            <pre class="text-center">$primarySectionGridBorder</pre>
      </div>

      <div class="col-sm-3 col-xs-6">
        <div style="background: #f1f1f1;"><br><br><br><br><br></div>
        <pre class="text-center">$bahmniTableHeaderBg</pre>
      </div>

      <div class="col-sm-3 col-xs-6">
        <div style="background: #fafafa;"><br><br><br><br><br></div>
        <pre class="text-center">$bahmniPageBg</pre>
      </div>

      <div class="col-sm-3 col-xs-6">
        <div style="background: #FFFDF0;"><br><br><br><br><br></div>
        <pre class="text-center">$alertBackground</pre>
      </div>

      <div class="col-sm-3 col-xs-6">
        <div style="background: #FFFFFF;"><br><br><br><br><br></div>
        <pre class="text-center">$white</pre>
      </div>

      <div class="col-sm-3 col-xs-6">
        <div style="background: #000000;"><br><br><br><br><br></div>
        <pre class="text-center">$black</pre>
      </div>

      <div class="col-sm-3 col-xs-6">
        <div style="background: #BBB;"><br><br><br><br><br></div>
        <pre class="text-center">$darkerGrey</pre>
      </div>

      <div class="col-sm-3 col-xs-6">
        <div style="background: #f3f3f3;"><br><br><br><br><br></div>
        <pre class="text-center">$lighterGrey</pre>
      </div>

  </div>
```

*/




/*doc
---
title: Fonts
name: Fonts
category: Variables - fonts
---
Below listed fonts are used in the whole Bahmni application.

```html_example
  <div>
   <span style="font-family: OpenSansBold;">font-family: $OpenSansBoldFont;</span><br/>
   <span>font-family: $OpenSansFont;</span><br/>
   <span style="font-family: OpenSansLight;">font-family: $primaryLightFont;</span><br/>
   <span style="font-family: OpenSansItalic;"> font-family: $primaryItalicFont;</span><br/>
  </div>
```

*/





/* settings */
$max-page-width: 1300px;

/*  _colors - bahmniTheme:  */
$bahmniPrimaryColor: #00463f;
$bahmniSecondaryColor: #669999;
$bahmniTertiaryColor: #457FAC;

$bahmniLinkColor: #2b95ff;

$bahmniPrimaryBtnColor: #a1d030;
$bahmniPrimaryBtnColorHover: #88af28;

$bahmniSectionHeaderColor: #66b298;


/*  _components - bahmniTheme: */
$clinicalNotesColor: #EFF8FF;
$clinicalCurrentVist: #E8A000;
$clinicalInfoMessageBg: #e8edf3;
$clinicalRemoveBtn: #660000;
$clinicalHighlight: #cceffc;


$clinicalFormInvalid: #ffcdcd;
$clinicalFormFocus: #007fff;
$clinicalFormFocusBg: #fffdf7;
$clinicalFormWarning: #FFFAD8;

// New Observation Template Color

$observationTitleHover:#b7e5e5;


/*  _different shades of grey/gray:  */
$darkGray:     #333;
$mediumGray:   #666;       /* any text will not be lighter than this */
$lightGray:    #ccc;     /* any border will not be lighter than this */
$lighterGray:  #ddd; 
$lightestGray: #eee; /* any background will not be lighter than this */

$primarySectionGridBorder: #bbb;
$bahmniTableHeaderBg: #f1f1f1;

$bahmniPageBg: #fafafa;

//fonts

$iconFont: "FontAwesome";
$fontPath: "../styles/fonts";
$customFontPath: "../styles/fonts/bahmni-custom-fonts";

//colors
$alertBackground: #FFFDF0;
$bodyBackground: #EEE;

$white: #FFFFFF;
$black: #000000;
$darkerGrey: #BBB;
$lighterGrey: #f3f3f3;

//openMrs colors
$highlight: darken(#009384, 15%);
$text: darken(#5B57A6, 20%);
$subtleText: darken($darkerGrey, 25%);
$subtlerText: $darkerGrey;

$link: #007FFF;
$focus: #FFFDF7;

$success: #A1D030;
$alert: #FFA000;
$error: #ff6666;
$successBackground: #ddffdd;

/*  _spacing padding - margin:  */
$smallestSpacing: 5px;
$defaultSpacing: 10px;
$mediumSpacing: 15px;
$largeSpacing: 20px;


/* _fonts */

$OpenSansBoldFont: OpenSansBold, Arial, sans-serif;
$OpenSansFont: OpenSans, Arial, sans-serif;

$OpenSansSemiBoldFont: 'OpenSansSemiBold';

$primaryFont: "OpenSans";
$primaryBoldFont: "OpenSansBold";
$primaryLightFont: "OpenSansLight";
$primaryItalicFont: "OpenSansItalic";


/* _mixins */
@mixin font-size($sizeValue: 1) {
    font-size: ($sizeValue * 16) + px;
    font-size: $sizeValue + rem;
}

@mixin clearfix() {
  *zoom:1;
  &:before,
  &:after {
      content:"";
      display:table;
  }
  &:after {
      clear:both;
  }
}

@mixin box-shadow-for-section{
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

@mixin check-box {
  -webkit-appearance: none;
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
  padding: 8px;
  border-radius: 3px;
  display: inline-block;
  position: relative;

  &:active, &:checked:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
  }
   
  &:checked {
    background-color: white;
    border: 1px solid #adb8c0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
    color: $text;
  }
  
  &:checked:after {
    content: '\2714';
    font-size: 15px;
    position: absolute;
    top: -2px;
    left: 2px;
    color: $text;
  }
}
