Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
421 lines (405 sloc) 12.7 KB
/*
---
name: Colors
category: Foundations/Variables
tag: variables
---
Base colors of the Bitnami styleguide.
<div class="container">
<h5>Base</h5>
<div class="colorBoxes">
<div class="colorBox colorBox-reverse" style="background-color: #00437B;">
<div class="colorBox__title padding-h-normal">
<h5>Brand</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex</span> #00437B
</div>
<div class="colorBox__values__value">
<span>RGB</span> rgb(0, 67, 123)
</div>
<div class="colorBox__values__value">
<span>HSL</span> hsl(207, 100%, 24%)
</div>
</div>
</div>
<div class="colorBox colorBox-reverse" style="background-color: #1C2B39;">
<div class="colorBox__title padding-h-normal">
<h5>Primary</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex</span> #1C2B39
</div>
<div class="colorBox__values__value">
<span>RGB</span> rgb(28, 43, 57)
</div>
<div class="colorBox__values__value">
<span>HSL</span> hsl(209, 34%, 17%)
</div>
</div>
</div>
<div class="colorBox colorBox-reverse" style="background-color: #1598CB;">
<div class="colorBox__title padding-h-normal">
<h5>Secondary</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex</span> #1598CB
</div>
<div class="colorBox__values__value">
<span>RGB</span> rgb(21, 152, 203)
</div>
<div class="colorBox__values__value">
<span>HSL</span> hsl(197, 81%, 44%)
</div>
</div>
</div>
</div>
<h5>Accent</h5>
<div class="colorBoxes">
<div class="colorBox colorBox-reverse" style="background-color: #008145;">
<div class="colorBox__title padding-h-normal">
<h5>Accent</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex</span> #008145
</div>
<div class="colorBox__values__value">
<span>RGB</span> rgb(0, 129, 69)
</div>
<div class="colorBox__values__value">
<span>HSL</span> hsl(152, 100%, 25%)
</div>
</div>
</div>
<div class="colorBox" style="background-color: #82C341;">
<div class="colorBox__title padding-h-normal">
<h5>Light accent</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex</span> #82C341
</div>
<div class="colorBox__values__value">
<span>RGB</span> rgb(130, 195, 65)
</div>
<div class="colorBox__values__value">
<span>HSL</span> hsl(90, 52%, 51%)
</div>
</div>
</div>
</div>
<h5>Action</h5>
<div class="colorBoxes">
<div class="colorBox" style="background-color: #F58220;">
<div class="colorBox__title padding-h-normal">
<h5>Action</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex</span> #F58220
</div>
<div class="colorBox__values__value">
<span>RGB</span> rgb(245, 130, 32)
</div>
<div class="colorBox__values__value">
<span>HSL</span> hsl(28, 91%, 54%)
</div>
</div>
</div>
<div class="colorBox" style="background-color: #FDBA12;">
<div class="colorBox__title padding-h-normal">
<h5>Light action</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex</span> #FDBA12
</div>
<div class="colorBox__values__value">
<span>RGB</span> rgb(253, 186, 18)
</div>
<div class="colorBox__values__value">
<span>HSL</span> hsl(43, 98%, 53%)
</div>
</div>
</div>
</div>
<h5>Other backgrounds and text colors</h5>
<div class="colorBoxes">
<div class="colorBox" style="background-color: #fff;">
<div class="colorBox__title padding-h-normal">
<h5>Base</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex</span> #ffffff
</div>
<div class="colorBox__values__value">
<span>RGB</span> rgb(255, 255, 255)
</div>
<div class="colorBox__values__value">
<span>HSL</span> hsl(0, 0%, 100%)
</div>
</div>
</div>
<div class="colorBox" style="background-color: #ffffff;">
<div class="colorBox__title padding-h-normal">
<h5>White</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex</span> #ffffff
</div>
<div class="colorBox__values__value">
<span>RGB</span> rgb(255, 255, 255)
</div>
<div class="colorBox__values__value">
<span>HSL</span> hsl(0, 0%, 100%)
</div>
</div>
</div>
<div class="colorBox colorBox-reverse" style="background-color: #1C2B39;">
<div class="colorBox__title padding-h-normal">
<h5>Text</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex</span> #1C2B39
</div>
<div class="colorBox__values__value">
<span>RGB</span> rgb(28, 43, 57)
</div>
<div class="colorBox__values__value">
<span>HSL</span> hsl(209, 34%, 17%)
</div>
</div>
</div>
<div class="colorBox" style="background-color: #f1f1f1;">
<div class="colorBox__title padding-h-normal">
<h5>Light</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex</span> #f1f1f1
</div>
<div class="colorBox__values__value">
<span>RGB</span> rgb(241, 241, 241)
</div>
<div class="colorBox__values__value">
<span>HSL</span> hsl(0, 0%, 95%)
</div>
</div>
</div>
<div class="colorBox colorBox-reverse" style="background-color: #1C2B39;">
<div class="colorBox__title padding-h-normal">
<h5>Dark</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex</span> #1C2B39
</div>
<div class="colorBox__values__value">
<span>RGB</span> rgb(28, 43, 57)
</div>
<div class="colorBox__values__value">
<span>HSL</span> hsl(209, 34%, 17%)
</div>
</div>
</div>
<div class="colorBox colorBox-reverse" style="background-color: #5F6369;">
<div class="colorBox__title padding-h-normal">
<h5>Gray</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex</span> #5F6369
</div>
<div class="colorBox__values__value">
<span>RGB</span> rgb(95, 99, 105)
</div>
<div class="colorBox__values__value">
<span>HSL</span> hsl(216, 5%, 39%)
</div>
</div>
</div>
<div class="colorBox" style="background-color: #C7C9C8;">
<div class="colorBox__title padding-h-normal">
<h5>Light gray</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex</span> #C7C9C8
</div>
<div class="colorBox__values__value">
<span>RGB</span> rgb(199, 201, 200)
</div>
<div class="colorBox__values__value">
<span>HSL</span> hsl(150, 2%, 78%)
</div>
</div>
</div>
</div>
<h5>Additional colors</h5>
<div class="colorBoxes">
<div class="colorBox colorBox-reverse" style="background-color: #de0606;">
<div class="colorBox__title padding-h-normal">
<h5>Danger</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex</span> #de0606
</div>
<div class="colorBox__values__value">
<span>RGB</span> rgb(222, 6, 6)
</div>
<div class="colorBox__values__value">
<span>HSL</span> hsl(0, 95%, 45%)
</div>
</div>
</div>
<div class="colorBox" style="background-color: #fff23f;">
<div class="colorBox__title padding-h-normal">
<h5>Highlight</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex</span> #fff23
</div>
<div class="colorBox__values__value">
<span>RGB</span> rgb(255, 242, 63)
</div>
<div class="colorBox__values__value">
<span>HSL</span> hsl(56, 100%, 62%)
</div>
</div>
</div>
</div>
</div>
```scss
$colors: (
'brand': #00437B,
'primary': #1C2B39,
'secondary': #1598CB,
'accent': #008145,
'accent-light': #82C341,
'light': #f1f1f1,
'white': #ffffff,
'text': #1C2B39,
'action': #F58220,
'action-light': #FDBA12,
'gray': #5F6369,
'gray-light': #C7C9C8,
'base': #fff,
'highlight': #fff23f,
'danger': #de0606
);
// Interval to get tints and shades
$color-interval: 10%;
```
*/
$colors: (
'brand': #00437B,
'primary': #1C2B39,
'secondary': #1598CB,
'accent': #008145,
'accent-light': #82C341,
'light': #f1f1f1,
'white': #ffffff,
'dark': #1C2B39,
'text': #1C2B39,
'link': #0d6cd4, // #006de4 (bright),
'action': #F58220,
'action-light': #FDBA12,
'gray': #5F6369,
'gray-light': #C7C9C8,
'base': #fff,
'highlight': #fff23f,
'danger': #de0606
) !default;
$gradients: (
'brand': #00437B #1598CB,
'accent': #008145 #82C341,
'action': #F58220 #FDBA12,
'light': #f1f1f1 #f7f7f7, // The last color is the result of `color-level('light', 50)`
'danger': #de0606 #e85151 // The last color is the result of `color-level('danger', 200)`
) !default;
// Interval to get tints and shades
$color-interval: 10% !default;
/*
---
name: Gradients
category: Foundations/Variables
tag: variables
---
Base gradients of the Bitnami styleguide.
<div class="container margin-b-bigger">
<h5>Base</h5>
<div class="colorBoxes">
<div class="colorBox colorBox-50 colorBox-reverse gradient-45-brand">
<div class="colorBox__title padding-h-normal">
<h5>Brand</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div>
<div class="colorBox__values__value">
<span>Hex (from)</span> #00437B (Brand)
</div>
</div>
<div class="colorBox__values__value">
<span>Hex (to)</span> #1598CB (Secondary)
</div>
</div>
</div>
<div class="colorBox colorBox-50 colorBox-reverse gradient-45-accent">
<div class="colorBox__title padding-h-normal">
<h5>Accent</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex (from)</span> #008145 (Accent)
</div>
<div class="colorBox__values__value">
<span>Hex (to)</span> #82C341 (Light accent)
</div>
</div>
</div>
<div class="colorBox colorBox-50 gradient-45-action">
<div class="colorBox__title padding-h-normal">
<h5>Action</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex (from)</span> #F58220 (Action)
</div>
<div class="colorBox__values__value">
<span>Hex (to)</span> #FDBA12 (Light action)
</div>
</div>
</div>
<div class="colorBox colorBox-50 gradient-45-light">
<div class="colorBox__title padding-h-normal">
<h5>Light</h5>
</div>
<div class="colorBox__values padding-h-normal padding-v-small">
<div class="colorBox__values__value">
<span>Hex (from)</span> #f1f1f1 (Light)
</div>
<div class="colorBox__values__value">
<span>Hex (to)</span> #f7f7f7 (50 Light)
</div>
</div>
</div>
</div>
</div>
```scss
$gradients: (
'brand': #00437B #1598CB,
'accent': #008145 #82C341,
'action': #F58220 #FDBA12,
'light': #f1f1f1 #f7f7f7, // The last color is the result of `color-level('light', 50)`
);
```
*/
You can’t perform that action at this time.