/*!
* HEx - v4.0.0
*
* The HEx design system is released under the Apache-2.0 license.
* Copyright 2018 BitRock Inc. (DBA Bitnami). The Bitnami names, logos and all product names
* are trademarks of BitRock Inc.
*/
/**
* Mappy breakpoint library
*/
/**
* Variables contain the values of differents properties for the UI. Some of them
* are font families, line heights, colors...
*/
/*
---
name: Base sizing units
category: Foundations/Variables
tag: variables
---
These values defines the spacing and font size of all the framework. **Every property or mixin that
involves sizes is affected by these values**. That's the reason why most of the elements of
the foundations uses relative units like `em` and `rem`.
These base sizing units are:
* `base-type-zoom`: represents the base zoom of the page. This value is added on the `html` selector
and it allow us to grow the site proportionally. For most of the browsers, 100% font-size is equal
to 16px. Browsers that have a different value for 100% are not an issue because the site grows
correctly. This framework uses this property to decrease or increase the spacing of the site
based on media queries.
* `base-type-size`: defines the base font size of the body text. The current value refers to
the `base-type-zoom`: 100% (16px) -> 1em -> 16px body text. We use a relative units to be able to
change the base font size using `base-type-zoom`. It also allow browsers to define their own
font size based on user preferences.
* `scale`: this is the ratio of decrease or increase of the spacing unit. Combining the
`base-type-size` and the `scale`, the framework defines proportional sizes for spacing. You
can check the current proportion on [TypeScale](http://type-scale.com/?size=16&scale=1.333&text=Bitnami%20Rocks!&webfont=Source+Sans+Pro&font-family=%27Source%20Sans%20Pro%27,%20sans-serif&font-weight=400&font-family-headers=&font-weight-headers=inherit&background-color=white&font-color=%23333).
* `size-unit`: this is the base size unit for font sizes and spacing. We use this unit for spacing
and font-sizes.
```scss
// Sizing values
$base-type-zoom: 100%;
$base-type-size: 1em; // 16px
// Major Third
$scale: 1.250;
// Basic size unit
$size-unit: $base-type-size * $scale;
$su: $size-unit;
```
*/
/*
---
name: Breakpoints
category: Foundations/Variables
tag: variables
---
For managing breakpoints, we're going to use https://github.com/zellwk/mappy-breakpoints. It's a really useful library to work with Breakpoints. Also, this library uses `em` units internally and based on this [research]( https://zellwk.com/blog/media-query-units/) it's the best solution for breakpoints.
```scss
$breakpoints: (
xs: 320px,
sm: 480px,
md: 768px,
lg: 900px,
xl: 1100px,
uxl: 1300px
);
// If only one value is provided, mappy-bp will produce a min-width query.
// If a two values are provided, mappy-bp will produce a min-width and max-width query.
// If a max-width or max string is provided, mappy-bp will produce a max-width query.
$mappy-queries: (
phone-portrait: mappy-bp(max-width xs),
phone: mappy-bp(xs sm),
phone-land: mappy-bp(sm md),
tablet: mappy-bp(md lg),
desktop: mappy-bp(lg xl),
wide: mappy-bp(xl uxl),
ultrawide: mappy-bp(uxl)
);
```
*/
/*
---
name: Colors
category: Foundations/Variables
tag: variables
---
Base colors of the Bitnami styleguide.
Base
Brand
Hex #00437B
RGB rgb(0, 67, 123)
HSL hsl(207, 100%, 24%)
Primary
Hex #1C2B39
RGB rgb(28, 43, 57)
HSL hsl(209, 34%, 17%)
Secondary
Hex #1598CB
RGB rgb(21, 152, 203)
HSL hsl(197, 81%, 44%)
Accent
Accent
Hex #008145
RGB rgb(0, 129, 69)
HSL hsl(152, 100%, 25%)
Light accent
Hex #82C341
RGB rgb(130, 195, 65)
HSL hsl(90, 52%, 51%)
Action
Action
Hex #F58220
RGB rgb(245, 130, 32)
HSL hsl(28, 91%, 54%)
Light action
Hex #FDBA12
RGB rgb(253, 186, 18)
HSL hsl(43, 98%, 53%)
Other backgrounds and text colors
Base
Hex #ffffff
RGB rgb(255, 255, 255)
HSL hsl(0, 0%, 100%)
White
Hex #ffffff
RGB rgb(255, 255, 255)
HSL hsl(0, 0%, 100%)
Text
Hex #1C2B39
RGB rgb(28, 43, 57)
HSL hsl(209, 34%, 17%)
Light
Hex #f1f1f1
RGB rgb(241, 241, 241)
HSL hsl(0, 0%, 95%)
Dark
Hex #1C2B39
RGB rgb(28, 43, 57)
HSL hsl(209, 34%, 17%)
Gray
Hex #5F6369
RGB rgb(95, 99, 105)
HSL hsl(216, 5%, 39%)
Light gray
Hex #C7C9C8
RGB rgb(199, 201, 200)
HSL hsl(150, 2%, 78%)
Additional colors
Danger
Hex #de0606
RGB rgb(222, 6, 6)
HSL hsl(0, 95%, 45%)
Highlight
Hex #fff23
RGB rgb(255, 242, 63)
HSL hsl(56, 100%, 62%)
```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%;
```
*/
/*
---
name: Gradients
category: Foundations/Variables
tag: variables
---
Base gradients of the Bitnami styleguide.
Base
Brand
Hex (from) #00437B (Brand)
Hex (to) #1598CB (Secondary)
Accent
Hex (from) #008145 (Accent)
Hex (to) #82C341 (Light accent)
Action
Hex (from) #F58220 (Action)
Hex (to) #FDBA12 (Light action)
Light
Hex (from) #f1f1f1 (Light)
Hex (to) #f7f7f7 (50 Light)
```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)`
);
```
*/
/*
---
name: Grid
category: Foundations/Variables
tag: variables
---
Defines the basic values for our Grid system
```scss
// Basic values of our grid system
$grid-width: 100%;
$grid-columns: 12;
$grid-gutter: su();
```
*/
/*
---
name: Names
category: Foundations/Variables
tag: variables
---
Aliases for colors and scales.
```scss
$scale-names: (
'reset': -3,
'tiny': -2,
'small': -1,
'normal': 0,
'big': 1,
'bigger': 2,
'enormous': 3,
'giant': 4,
'huge': 5
);
$color-names: (
'bitnami': 'brand',
'light-blue': 'primary',
'dark-blue': 'secondary',
'accent': 'accent',
'accent-light': 'accent-light',
'iron': 'light',
'white': 'white',
'dark': 'text',
'text': 'text',
'action': 'action',
'action-light': 'action-light',
'gray': 'gray',
'gray-light': 'gray-light',
'white': 'base',
'highlight': 'highlight'
);
```
*/
/*
---
name: Spacing
category: Foundations/Variables
tag: variables
---
Standard spacing values.
```scss
$spacing-sizes: (
-3: 0,
-2: $su / 8,
-1: $su / 4,
0: $su / 2,
1: $su,
2: 1.5 * $su,
3: 2 * $su,
4: 3 * $su,
5: 5 * $su
);
```
*/
/*
---
name: Typography
category: Foundations/Variables
tag: variables
---
Defines all typography related variables for the project. Currently, the new selected font family
is [Interstate](https://store.typenetwork.com/foundry/fontbureau/fonts/interstate/regular).
This typography must be imported before the bitnami-ui require statement.
Interstate is a paid font family, so we need to use it through
[Typekit](https://typekit.com/fonts/interstate). If you don't want to use Interstate due
to this restrictment, you can use the fallback font families:
[Fira Sans](https://fonts.google.com/specimen/Fira+Sans) and
[Hind](https://fonts.google.com/specimen/Hind). This is an free font family and can be lodaded
from Google Fonts:
```
```
If any of these font families are available, the UI fallbacks to OS typographies.
```scss
// Font families
$type-os-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$type-headings: 'Interstate', 'Fira Sans', $type-os-fallback;
$type-body: 'Interstate', 'Hind', $type-os-fallback;
$type-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
// Fix the line-heights
$line-heights: (
-1: $size-unit,
0: $size-unit,
1: $size-unit * 1.5,
2: $size-unit * 2,
3: $size-unit * 3,
);
```
*/
/*
---
name: Z-index
category: Foundations/Variables
tag: variables
---
Instead of specifing custom Z-indexes for the different elements, these variables define five basic z-index values to position the layers of the interface.
```scss
$z-index: (
'bottom': -1,
'base': 0,
'above': 10,
'above-mean': 20,
'top': 99
);
```
*/
/**
* Helper functions to work with the Bitnami UI.
*/
/*
---
name: color(name)
category: Foundations/Mixins
tag: function
---
Get a color from the brand guide
```scss
.test {
color: color('bitnami');
background-color: color('iron');
}
```
*/
/*
---
name: color-level(name, level)
category: Foundations/Mixins
tag: function
---
Get a tint or shade of a base color. The `level` variable should be a number between 100 to 1000
in steps of one hundred. The base color is located in 500.
```scss
.test {
color: color-level('bitnami', 200);
background-color: color('iron', 700);
}
```
*/
/**
* Calculate the color level based on the given color and the level.
*
* NOTE: This is an internal method.
*/
/**
* Get the gradient pair for the given name
*
* NOTE: This is an internal method.
*/
/*
---
name: gradient(name, directionOrDegrees, firstPosition, lastPosition)
category: Foundations/Mixins
tag: function
---
Generate a proper gradient.
```scss
.test {
background: gradient('brand', 45deg);
}
```
*/
/*
---
name: button-gradient(name)
category: Foundations/Mixins
tag: function
---
Return the gradient for a button with the cut corner already added.
Inspired by [this pen](https://codepen.io/aaahollister/pen/wKwxNY). This is the simplest
approach I've found.
```scss
button-gradient('brand');
```
*/
/*
---
name: button-size(name-of-scale)
category: Foundations/Mixins
tag: function
---
Mixin to generate a class for buttons. This class will modify the size of the buttons.
```scss
@include('small');
```
*/
/**
* Grid mixins
*
* NOTE: This is an internal function. It shouldn't be documented
*/
/**
* Generate a collapse property for a given prefix
*/
/**
* Generate a collapse property for a given prefix
*/
/**
* Power operator for SASS!
*
* NOTE: This is an internal function. It shouldn't be documented
*/
/**
* Convert em to px
*/
/*
---
name: spacing(name)
category: Foundations/Mixins
tag: function
---
Get a spacing value based on the `size unity`. This method will throw an exception if the name
of the size is not valid.
```scss
.test {
margin: spacing('tiny');
}
.test2 {
padding-bottom: spacing('huge');
}
```
*/
/*
---
name: margin(name)
category: Foundations/Mixins
tag: function
---
**DEPRECATED:** see spacing(name)
Get a margin value based on the `size unity`. This method will throw an exception if the name
of the size is not valid.
```scss
.test {
margin: margin('tiny');
}
.test2 {
margin-bottom: margin('huge');
}
```
*/
/*
---
name: padding(name)
category: Foundations/Mixins
tag: function
---
**DEPRECATED:** see spacing(name)
Get a padding value based on the `size unity`. This method will throw an exception if the name
of the size is not valid.
```scss
.test {
padding: padding('tiny');
}
.test2 {
padding-top: padding('huge');
}
```
*/
/**
* Using $su allow us to set the correct vertical rhythm of the page
*/
/*
---
name: su(multiplier)
category: Foundations/Mixins
tag: function
---
Return `multiplier * $su`. This method allows us to set the correct vertical rhythm of the page.
```scss
.test {
height: su(10);
}
```
*/
/**
* Mixins that generates spacing class helpers.
*
* NOTE: These are an internal mixins. They shouldn't be documented
*/
/*
---
name: baseSizing(zoom, size, scale, lineHeight)
category: Foundations/Themes
tag: function
---
Set the values for the base sizing units. These values defines the spacing and font size of all the framework.
Every property or mixin that involves sizes is affected by these values.
You can reuse the [default values](/category/Foundations/Variables/#Base%20sizing%20units).
```scss
@include baseSizing(
100%,
1.15em,
$scale,
1.45
);
```
*/
/*
---
name: colorTheme(colors, colorInterval)
category: Foundations/Themes
tag: function
---
Update the color theme of HEx. It receives a map that will be merged with the [default one](/category/Foundations/Variables/#Colors).
```scss
@include colorTheme(
(
'brand': green,
'text': #000000
),
8%
);
```
*/
/*
---
name: gradientTheme(gradients)
category: Foundations/Themes
tag: function
---
Update the gradient theme of HEx. It receives a map that will be merged with the [default one](/category/Foundations/Variables/#Gradients).
```scss
@include gradientTheme(
(
'accent': #008145 #82C341,
'action': green blue,
)
);
```
*/
/*
---
name: fontFamilies(body, headings, code)
category: Foundations/Themes
tag: function
---
Update the font families for HEx. The default ones are [Interstate, Fira Sans and Hind](/category/Foundations/Variables/#Typography).
```scss
$body: Arial, Verdana;
@include fontFamilies(
$body,
Arial,
Consolas
);
```
*/
/*
---
name: gridConfig(width, columns, gutter)
category: Foundations/Themes
tag: function
---
Set the base values to generate the grid classes and helpers. We recommend to use 12 columns always
because the `collapse-*-on-*` helpers collapse the rows in blocks of 3, 2 and 1 elements.
You can reuse the [default values](/category/Foundations/Variables/#Grid).
```scss
@include gridConfig(
1500px,
$grid-columns,
2em
);
```
*/
/*
---
name: borderRadiusConfig(borderRadius)
category: Foundations/Themes
tag: function
---
Set the border radius for some elements like tags and avatars.
```scss
@include borderRadiusConfig(5px);
```
*/
/*
---
name: type-scale(name)
category: Foundations/Mixins
tag: function
---
Get a font-size based on the standard values. You can check
[Type scale](http://type-scale.com/?size=16&scale=1.333&text=Bitnami%20Rocks!&webfont=Source%2BSans%2BPro&font-family=%27Source%20Sans%20Pro%27%2C%20sans-serif&font-weight=400&font-family-headers=&font-weight-headers=inherit&background-color=white&font-color=%23333)
to check the current scale and size.
```scss
.test {
font-size: type-scale('huge');
}
```
*/
/*
---
name: line-height(name)
category: Foundations/Mixins
tag: function
---
Get a line-height based on the standard values.
**NOTE**: `reset`, `tiny`, `giant` and `huge` are not available.
```scss
.test {
line-height: line-height('big');
}
```
*/
/**
* Set the color for anchors in the type-color-reverse
*
* NOTE: This is an internal mixin. It shouldn't be documented
*/
/**
* Remove the unit of a length
*
* NOTE: This is an internal function. It shouldn't be documented
*/
/*
---
name: clearfix()
category: Foundations/Mixins
tag: function
---
Add clearfix code to the current selector. Clearfix is useful to prevent bad positioning of
floated elements.
```scss
.test {
@include clearfix();
}
```
*/
/*
---
name: z-index(name)
category: Foundations/Mixins
tag: function
---
Get the z-index from the available layer positions:
```scss
.base {
z-index: z-index('base');
}
.above {
z-index: z-index('above');
}
```
*/
/**
* First of all, we need to require a reset CSS file. There are several options
* for resetting. Now, we are going to select normalize.css. However,
* we can change it updating this line.
*/
/**
* This file is based on Normalize.css v5.0.0 (github.com/necolas/normalize.css).
* However, I modified the code to remove unnecesary code.
*
* Also, I included our current variables to the project.
*/
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0; }
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block; }
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main {
/* 1 */
display: block; }
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */ }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: "SFMono-Regular", Consolas, Liberation Mono, Menlo, Courier, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */ }
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0; }
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */ }
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit; }
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder; }
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: "SFMono-Regular", Consolas, Liberation Mono, Menlo, Courier, monospace;
/* 1 */
font-size: 1em;
/* 2 */ }
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic; }
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 0.8em; }
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 0.8em;
line-height: 0;
position: relative;
vertical-align: baseline; }
sub {
bottom: -0.15625em; }
sup {
top: -0.3125em; }
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block; }
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0; }
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none; }
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden; }
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
margin: 0;
/* 2 */ }
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible; }
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none; }
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */ }
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; }
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */ }
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */ }
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto; }
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */ }
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto; }
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */ }
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */ }
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details,
menu {
display: block; }
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item; }
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block; }
/**
* Add the correct display in IE.
*/
template {
display: none; }
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none; }
/**
* This file set the base of Bitnami UI. It will set the font-size, scale,
* background-color... of the body. All custom reset properties must be placed
* here.
*/
html {
font-size: 100%; }
@media all and (max-width: 47.9375em) {
html {
font-size: 95%; } }
@media all and (max-width: 29.9375em) {
html {
font-size: 90%; } }
@media all and (min-width: 81.25em) {
html {
font-size: 105%; } }
body {
font-family: "Interstate", "Hind", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
font-size: 1em;
color: #1C2B39;
line-height: 1.5;
font-weight: 400;
text-rendering: optimizeLegibility; }
/**
* Match the size of elements to the border box. This property allow us to add padding to elements
* preventing display the element outside of the container
*/
* {
box-sizing: border-box; }
/*
---
name: Anchors
category: Foundations/Anchors
tag: text
---
Buttons use the `accent` color.
```html
This is a link inside a paragraph. It's important to highlight them in the text.
```
*/
a {
color: #0d6cd4;
cursor: pointer; }
a:hover, a:active, a:focus {
color: #dd751d; }
a:hover:not(.button), a:active:not(.button), a:focus:not(.button) {
text-decoration: underline; }
p a,
ul a,
a.decoration {
text-decoration: underline; }
ul a:only-of-type,
ol a:only-of-type,
h1 a:only-of-type,
h2 a:only-of-type,
h3 a:only-of-type,
h4 a:only-of-type,
h5 a:only-of-type,
h6 a:only-of-type {
text-decoration: none; }
/*
---
name: Code
category: Foundations/Code
tag: text
---
Display an inline code element correctly.
```html
This is a code example
More code!
```
*/
pre {
background-color: #111a22;
line-height: 1.2;
margin: 0.625em 0 1.25em;
overflow: auto;
padding: 0.625em;
word-wrap: normal; }
code {
font-size: 0.8em;
padding: 0.15625em 0.3125em;
background-color: #f1f1f1;
border-radius: 3px;
border: 1px solid #d9d9d9;
color: #00743e;
vertical-align: middle; }
pre code {
background-color: inherit;
border: none;
color: #f1f1f1;
padding: 0; }
/*
---
name: Input
category: Foundations/Forms
tag: text
---
Basic inputs to build forms.
```html
```
*/
input,
select,
textarea {
border-radius: 0;
border: 1px solid #C7C9C8;
font-size: 1em;
margin: 0.3125em 0 0.625em;
padding: 0 0.625em;
width: 100%; }
input,
select,
button {
height: 2.5em;
line-height: 2.5em; }
textarea:focus,
input:focus,
select:focus {
outline: none;
border-color: #336995;
box-shadow: inset 0 1px 1px rgba(28, 43, 57, 0.05), 0 0 8px rgba(21, 152, 203, 0.3); }
/*
---
name: Select
category: Foundations/Forms
tag: text
---
Selectors are a bit different in Safari. We can't remove the gloss effect without using the
`-webkit-appareance` hack.
```html
```
*/
select {
background-color: #ffffff; }
/*
---
name: Textarea
category: Foundations/Forms
tag: text
---
```html
```
*/
textarea {
padding: 0.625em;
font-family: "Interstate", "Hind", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
resize: vertical;
min-height: 6.25em; }
/*
---
name: Labels
category: Foundations/Forms
tag: text
---
```html
```
*/
label {
color: #1C2B39;
font-size: 1em; }
label + label {
margin-left: 1.25em; }
label.checkbox, label.radio {
cursor: pointer; }
label.checkbox input:disabled + span, label.radio input:disabled + span {
opacity: .7; }
label + input,
label + select,
label + textarea {
margin-top: 0; }
/*
---
name: Checkbox
category: Foundations/Forms
tag: text
---
```html
```
*/
/*
---
name: Radio
category: Foundations/Forms
tag: text
---
```html
```
*/
input[type="checkbox"],
input[type="radio"] {
display: inline-block;
margin: 0 0.3125em 0 0;
width: auto;
height: auto;
vertical-align: 1px; }
input[type="checkbox"]:focus,
input[type="radio"]:focus {
text-decoration: none; }
/**
* This is the second part of the hack. Safari display the checkbox well so
* we need to reset the value for Safari. This only affects to Safari 7+.
* For Safari < 7, the checkbox and radio buttons will be showed 1px above the
* center.
*
* If we don't use this hack, all checkboxes and radio buttons will be misaligned
* in all versions of Firefox and Chrome. CSS is beatiful...
*/
_::-webkit-full-page-media,
_:future,
:root input[type="checkbox"],
input[type="radio"] {
vertical-align: baseline; }
/*
---
name: Buttons
category: Foundations/Forms
tag: text
---
```html
Link button
```
*/
.button {
border-radius: 0;
border: none;
box-shadow: 0 12px 10px -7px rgba(0, 0, 0, 0.2);
color: #16222e;
cursor: pointer;
display: inline-block;
font-size: 1em;
line-height: 2.5em;
vertical-align: middle;
text-decoration: none;
max-width: 100%;
overflow: hidden;
padding: 0 1.875em;
text-overflow: ellipsis;
transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
white-space: nowrap;
will-change: transform;
width: auto;
margin-top: 0;
margin-bottom: 0;
background: linear-gradient(135deg, transparent 7px, #f1f1f1 7px, #f7f7f7 100%); }
.button:hover, .button:focus {
background: linear-gradient(135deg, transparent 7px, #F58220 7px, #FDBA12 100%);
box-shadow: 0 12px 10px -7px rgba(0, 0, 0, 0.2);
color: #ffffff; }
.button:active {
transform: translateY(2px);
color: #ffffff;
box-shadow: 0 10px 10px -8px rgba(0, 0, 0, 0.2); }
.button[disabled="disabled"], .button[disabled="true"], .button[disabled] {
cursor: not-allowed;
opacity: .5; }
.button + .button,
.button + button {
margin-left: 0.3125em; }
/**
* Update the color of the placeholder due to the similarity of the normal text color
* https://github.com/bitnami/ui/issues/143
*/
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #b3b5b4;
opacity: 1;
/* Firefox */ }
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #b3b5b4; }
::-ms-input-placeholder {
/* Microsoft Edge */
color: #b3b5b4; }
/*
---
name: Headers
category: Foundations/Headers
tag: text
---
The foundations provide headers from `h1` to `h6`. Those headers vary in colors, font sizes,
font weights and font families.
```html
```
*/
ul,
ol {
padding-left: 2.5em;
margin: 0.625em 0 1.25em; }
/*
---
name: Paragraphs
category: Foundations/Paragraphs
tag: text
---
The styles of the paragraphs are pretty similar for the base style. We only reset the margins.
```html
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
And because they're built on top of Stacksmith, they're
kept up-to-date to make sure the latest language features are available and you're
building on a secure foundation.
```
*/
/*
---
name: Paragraphs with headers
category: Foundations/Paragraphs
tag: text
---
Paragraphs works pretty well with headers. The margin display both elements as a single block
of content.
```html
Rails Development Container
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
Stacksmith
The containers are built on top of Stacksmith, they're kept up-to-date to make sure the
latest language features are available and you're building on a secure foundation.
```
*/
p {
margin: 0.625em 0 1.25em; }
/*
---
name: Blockquote
category: Foundations/Quotations
tag: blocks
---
Blockquotes can be combined with anchors to display a complete quote. The `rel` property of the
anchor must be equal to "author". You can check the following
[link](https://html.spec.whatwg.org/multipage/semantics.html#link-type-author) for more information.
The quotation will inherit the width from the parent container. We recommend to use it inside a
small container `.container.container-small` for display purposes, but it will work anywhere.
You can add modifiers to change the color of the left border:
* `.action`
* `.accent`
* `.brand`
```html
Great day at my first Linux Foundation board meeting, but looking forward to seeing
everyone at #awsreinvent. On my way!
See you there!
Erica Brescia
Great day at my first Linux Foundation board meeting, but looking forward to seeing
everyone at #awsreinvent. On my way!
See you there!
Erica Brescia
Great day at my first Linux Foundation board meeting, but looking forward to seeing
everyone at #awsreinvent. On my way!
See you there!
Erica Brescia
```
*/
blockquote {
border-left: 3px solid #f1f1f1;
margin: 1.25em auto;
padding: 0.3125em 0.3125em 0.3125em 1.25em; }
blockquote a[rel="author"] {
color: #1C2B39;
display: block;
font-weight: bold;
margin-top: 1.25em; }
blockquote.accent {
border-left-color: #008145; }
blockquote.action {
border-left-color: #F58220; }
blockquote.brand {
border-left-color: #00437B; }
.bg-dark:not(.type-color-reverse-anchor-reset) blockquote a[rel=author],
.bg-brand:not(.type-color-reverse-anchor-reset) blockquote a[rel=author],
.bg-accent:not(.type-color-reverse-anchor-reset) blockquote a[rel=author],
.bg-action:not(.type-color-reverse-anchor-reset) blockquote a[rel=author],
.bg-skew:not(.type-color-reverse-anchor-reset) blockquote a[rel=author],
[class*="gradient-"][class*="-brand"]:not(.type-color-reverse-anchor-reset) blockquote a[rel=author],
[class*="gradient-"][class*="-accent"]:not(.type-color-reverse-anchor-reset) blockquote a[rel=author],
[class*="gradient-"][class*="-action"]:not(.type-color-reverse-anchor-reset) blockquote a[rel=author] {
color: #ffffff; }
/*
---
name: Outstanding blockquote
category: Foundations/Quotations
tag: blocks
---
Add more visibility for the blockquote. This style includes a big quotes on both sides of the quote.
Thsi is convenient to highlight a quote or for marketing sites.
You can combine it with the [carousel component](/category/Components/Display/#Carousel).
```html
Great day at my first Linux Foundation board meeting, but looking forward to seeing
everyone at #awsreinvent. On my way!
See you there!
Erica Brescia
```
*/
blockquote.outstanding {
border-left: none;
font-size: 1.25em;
padding: 0.3125em;
position: relative;
text-align: center; }
blockquote.outstanding:before, blockquote.outstanding:after {
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
height: 1.875em;
position: absolute;
top: 0.625em;
width: 2.5em; }
blockquote.outstanding:before {
left: 0.3125em;
transform: rotateZ(180deg); }
blockquote.outstanding:after {
right: 0.3125em; }
blockquote.outstanding a[rel="author"] {
font-size: 0.8em; }
blockquote.outstanding a[rel="author"], blockquote.outstanding a[rel="author"]:hover {
text-decoration: none; }
@media all and (min-width: 48em) {
blockquote.outstanding {
padding: 0.3125em 3.75em; }
blockquote.outstanding:before, blockquote.outstanding:after {
content: ''; } }
/*
---
name: Abbreviation
category: Foundations/Quotations
tag: text
---
`abbr` tags are useful to show more information about an abbreviation.
```html
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers
productive immediately - with all the most common tools ready to go.
```
*/
/*
---
name: Cite
category: Foundations/Quotations
tag: text
---
```html
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers
productive immediately - with all the most common tools ready to go.
```
*/
abbr,
cite {
text-decoration: none;
font-weight: bold; }
/*
---
name: Horizontal
category: Foundations/Separators
tag: blocks
---
Add an horizonal line to split the content of the page.
```html
```
*/
hr {
color: #f1f1f1;
background-color: #f1f1f1;
height: 2px;
border: 0;
margin: 0.625em auto; }
/*
---
name: Tables
category: Foundations/Tables
tag: blocks
---
Tables should follow the standard format using `thead > th` and `tbody > td` tags.
```html
ID
Name
Downloads
Stars
123
Gitlab
42343
5
321
Moodle
54312
4.5
753
Wordpress
23434
4.3
```
*/
table {
width: 100%;
margin: 0.625em 0 1.25em;
border-collapse: collapse;
text-align: left; }
table th,
table td {
padding: 0.625em; }
table th {
border-bottom: 1px solid #f1f1f1; }
table tbody > tr:hover {
background-color: #f7f7f7; }
/*
---
name: Basic
category: Foundations/Grid
tag: grid
---
A grid system is based in three main values:
* Width: it determines the total width of every row. People usually set this value to 100% and a
max-width for larger screens
* Columns: max number of columns for the grid. 12 columns is a good number because we can split
the grid in blogs of 2, 3, 4 and 6 elements per row.
* Gutter: it represents the spacing between the columns. We are going to use the site unity of
our project.
Based on this paramenter, we need to define the Container, the Row and the Column elements of our project.
_All the images comes from [this article](http://j4n.co/blog/Creating-your-own-css-grid-system)_
```html
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12
5
2
5
```
*/
.container {
width: auto;
max-width: 1300px;
margin: 0 auto;
/**
* Row definition
*/ }
@media all and (max-width: 1340px) {
.container {
padding: 0 1.25em; } }
.container .row {
display: flex;
flex-wrap: wrap;
margin: 1.25em -0.625em;
/**
* Column definition
*/ }
.container .row:first-child {
margin-top: 0; }
.container .row:last-child {
margin-bottom: 0; }
.container .row > [class^="col"] {
flex: 1;
min-height: 1px;
box-sizing: border-box;
padding: 0 0.625em; }
.container .row .col-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%; }
.container .row .col-2 {
flex: 0 0 16.66667%;
max-width: 16.66667%; }
.container .row .col-3 {
flex: 0 0 25%;
max-width: 25%; }
.container .row .col-4 {
flex: 0 0 33.33333%;
max-width: 33.33333%; }
.container .row .col-5 {
flex: 0 0 41.66667%;
max-width: 41.66667%; }
.container .row .col-6 {
flex: 0 0 50%;
max-width: 50%; }
.container .row .col-7 {
flex: 0 0 58.33333%;
max-width: 58.33333%; }
.container .row .col-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%; }
.container .row .col-9 {
flex: 0 0 75%;
max-width: 75%; }
.container .row .col-10 {
flex: 0 0 83.33333%;
max-width: 83.33333%; }
.container .row .col-11 {
flex: 0 0 91.66667%;
max-width: 91.66667%; }
.container .row .col-12 {
flex: 0 0 100%;
max-width: 100%; }
/*
---
name: Content
category: Foundations/Grid
tag: grid
---
The previous examples display boxes with a very similar context. If the content of the columns is different, by default all of them are positionated at the beginning of the row.
Content helpers allows you to change the alignment of an specific column or all the elements in a row.
```html
Align Center
A very long long long long long long long long long long long long long long long long long long long long long long long long long long long long content
Align Center
Align Center
Align Start
A very long long long long long long long long long long long long long long long long long long long long long long long long long long long long content
Align Center
Align End
Align Center
A very long long long long long long long long long long long long long long long long long long long long long long long long long long long long content
Align Start
Align Center
```
*/
.flex,
.row {
display: flex; }
.flex.align-center,
.row.align-center {
align-items: center; }
.flex.align-start,
.row.align-start {
align-items: flex-start; }
.flex.align-end,
.row.align-end {
align-items: flex-end; }
.flex .align-center,
.row .align-center {
align-self: center; }
.flex .align-start,
.row .align-start {
align-self: flex-start; }
.flex .align-end,
.row .align-end {
align-self: flex-end; }
/*
---
name: Row reverse
category: Foundations/Grid
tag: grid
---
Row reverse is a helper that will allow to exchange the order of the columns
There are layouts with content/text on the left side and images on the right side for
the first row and, for the second, the image is on the left and the content on the right. When
the layout collapses, this helper will keep the correct order.
##### Options
* `.row-reverse`: Helper used on the `.row` that will reverse the order of its columns.
```html
Bitnami has spent years perfecting the business of packaging applications. During this time,
we have built the expertise and internal tooling required to automate the process of
publishing and maintaining a catalog of applications and development environments
Bitnami has spent years perfecting the business of packaging applications. During this time,
we have built the expertise and internal tooling required to automate the process of
publishing and maintaining a catalog of applications and development environments
```
*/
.row.row-reverse {
flex-direction: row-reverse; }
/*
---
name: Responsive
category: Foundations/Grid
tag: grid
---
Classic system like bootstrap provides us responsive classes at Column level. For example, we could set the width of a column based on different media queries: `col-md-6 col-sm-3 ...`. This approach is ok, but it favors the fragmentation of the design because every column of every row can have a different behaviour.
Also, it polutes our HTML code with tons of CSS classes and sometimes it's really difficult to check the behaviour of a column.
To avoid this situation, I set the "responsive classes" at Row level. Now, we can set how the columns of the row will change across different sizes. For example, if we want to change the behaviour of the row for mobile screens we can add those classes to the row:
* `collapse-on-phone`
* `collapse-2-on-phone`
* `collapse-3-on-phone`
`collapse-2-on-phone` means that the row will display 2 columns per row on phone screens. We have the same classes for other screen names:
* `phone`
* `phone-land`
* `tablet`
* `desktop`
* `wide`
#### Below and Above
`collapse-on-x` applies the rule to an specific media query. That means the `collapse-on-tablet` class only collapses the columns when the users is between the tablet minimum and maximum.
If you want to collapse a row above or below an specific screen size, you can use the `a` and `b` prefixes:
* `collapse-a-phone`
* `collapse-a-phone-land` `collapse-b-phone-land`
* `collapse-a-tablet` `collapse-b-tablet`
* `collapse-a-desktop` `collapse-b-desktop`
* `collapse-b-wide`
```html
```
*/
@keyframes slide-in {
from {
transform: translateY(-10%);
opacity: 0; }
to {
transform: translateY(0);
opacity: 1; } }
.slide-in {
animation: slide-in .150s ease-in; }
@keyframes fade-in {
from {
opacity: 0; }
to {
opacity: 1; } }
.fade-in {
animation: fade-in .150s ease-in; }
/*
---
name: Backgrounds
category: Foundations/Helpers
tag: helpers
---
Modify the background color of the given element.
```html
```
*/
.bg-bitnami,
.bg-brand {
background-color: #00437B; }
.bg-accent,
.bg-accent {
background-color: #008145; }
.bg-action,
.bg-action {
background-color: #F58220; }
.bg-iron,
.bg-light {
background-color: #f1f1f1; }
.bg-dark,
.bg-text {
background-color: #1C2B39; }
.bg-white,
.bg-white {
background-color: #ffffff; }
/*
---
name: Box Shadows
category: Foundations/Helpers
tag: helpers
---
Apply box shadows to the class. The number in the class represents the visual height
of the box. Higher numbers will display the boxes in a higher level.
```html
.shadow-reset
.shadow-1
.shadow-2
.shadow-3
.shadow-4
.shadow-5
.elevation-reset
.elevation-1
.elevation-2
.elevation-3
.elevation-4
.elevation-5
```
*/
.shadow-1,
.elevation-1 {
box-shadow: 0 3px 6px rgba(28, 43, 57, 0.4); }
.shadow-2,
.elevation-2 {
box-shadow: 0 6px 12px rgba(28, 43, 57, 0.4); }
.shadow-3,
.elevation-3 {
box-shadow: 0 9px 18px rgba(28, 43, 57, 0.4); }
.shadow-4,
.elevation-4 {
box-shadow: 0 12px 24px rgba(28, 43, 57, 0.4); }
.shadow-5,
.elevation-5 {
box-shadow: 0 15px 30px rgba(28, 43, 57, 0.4); }
.shadow-reset,
.elevation-reset {
box-shadow: none; }
/*
---
name: Flex Align
category: Foundations/Helpers
tag: helper
---
The flex helper will allow to align content vertically. When used in the parent element, the
alignment will apply to all the child elements.
* `.flex.align-start`: Top alignment
* `.flex.align-end`: Bottom alignment
* `.flex.aling-center`: Middle alignment
If a specific child element needs a different alignment, it can be redefined using the
following classes.
* `.align-start`
* `.align-center`
* `.align-end`
```html
A very long long long long long long long long long long long long long long long long long long long long long long long long long long long long content
The element is placed in the middle of the parent element
A very long long long long long long long long long long long long long long long long long long long long long long long long long long long long content
The element is placed in the middle of the parent element
This element is not vertical aligned
```
*/
/*
---
name: Button Colors
category: Foundations/Helpers
tag: helpers
---
Modify the color of the buttons. Available classes:
* `.button-primary`
* `.button-accent`
* `.button-action`
* `.button-danger`
```html
Link buttonLink buttonLink buttonLink button
```
*/
.button-primary,
.button-accent,
.button-action,
.button-danger {
color: white; }
.button-primary {
background: linear-gradient(135deg, transparent 7px, #00437B 7px, #1598CB 100%); }
.button-accent {
background: linear-gradient(135deg, transparent 7px, #008145 7px, #82C341 100%); }
.button-action {
background: linear-gradient(135deg, transparent 7px, #F58220 7px, #FDBA12 100%); }
.button-action:hover {
background: linear-gradient(135deg, transparent 7px, #dd751d 7px, #e4a710 100%); }
.button-danger {
background: linear-gradient(135deg, transparent 7px, #de0606 7px, #e85151 100%); }
/*
---
name: Button Sizes
category: Foundations/Helpers
tag: helpers
---
Modify the size of the buttons. Available classes:
* `.button-small`
* `.button-big`
* `.button-bigger`
```html
Link buttonLink buttonLink button
```
*/
.button-small {
font-size: 0.8em; }
.button-big {
font-size: 1.25em; }
.button-bigger {
font-size: 1.5625em; }
/*
---
name: Button Dropdown
category: Foundations/Helpers
tag: helpers
---
Add a caret icon to the right of the button.
* `.button-dropdown`
* `.button-dropdown-open`
See https://css-tricks.com/snippets/css/css-triangle/.
```html
Link buttonLink buttonLink button
```
*/
.button-dropdown:after {
border: 5px solid transparent;
border-top-color: #1C2B39;
display: inline-block;
content: '';
height: 0;
margin-left: 0.3125em;
position: relative;
top: 0.07812em;
vertical-align: middle;
width: 0; }
.button-dropdown.button-action:after, .button-dropdown.button-accent:after {
border-top-color: #ffffff; }
.button-dropdown-open:after {
border-top-color: transparent;
border-bottom-color: #1C2B39;
top: -.2em; }
.button-dropdown-open.button-action:after, .button-dropdown-open.button-accent:after {
border-top-color: transparent;
border-bottom-color: #ffffff; }
/*
---
name: Form reverse
category: Foundations/Helpers
tag: helpers
---
The `form-reverse` modifier changes the form field styles inside the current container.
This is really useful for forms that are placed inside a container with a dark background.
For known dark backgrounds, the `form-reverse` modifier is added automatically.
The list of known dark backgrounds is:
* [Backgrounds](/category/Foundations/Helpers/#Backgrounds)
* [Linear Gradients](/category/Foundations/Helpers/#Linear%20Gradients)
**NOTE:** This behaviour is very opinionated and it may cause issues in some situations.
So, you can disable it using the `form-reverse-reset` class.
```html
```
*/
/**
* Enable form-reverse by default with known dark backgrounds.
* @see https://github.com/bitnami/ui/pull/45#issuecomment-353398961
* @see https://github.com/bitnami/ui/pull/45#issuecomment-353556092
*/
.bg-dark *:not(.form-reverse-reset) label,
.bg-brand *:not(.form-reverse-reset) label,
.bg-accent *:not(.form-reverse-reset) label,
.bg-action *:not(.form-reverse-reset) label,
.bg-skew *:not(.form-reverse-reset) label,
[class*="gradient-"][class*="-brand"] *:not(.form-reverse-reset) label,
[class*="gradient-"][class*="-accent"] *:not(.form-reverse-reset) label,
[class*="gradient-"][class*="-action"] *:not(.form-reverse-reset) label,
.form-reverse *:not(.form-reverse-reset) label {
color: #C7C9C8; }
.bg-dark *:not(.form-reverse-reset) label.radio, .bg-dark *:not(.form-reverse-reset) label.checkbox,
.bg-brand *:not(.form-reverse-reset) label.radio,
.bg-brand *:not(.form-reverse-reset) label.checkbox,
.bg-accent *:not(.form-reverse-reset) label.radio,
.bg-accent *:not(.form-reverse-reset) label.checkbox,
.bg-action *:not(.form-reverse-reset) label.radio,
.bg-action *:not(.form-reverse-reset) label.checkbox,
.bg-skew *:not(.form-reverse-reset) label.radio,
.bg-skew *:not(.form-reverse-reset) label.checkbox,
[class*="gradient-"][class*="-brand"] *:not(.form-reverse-reset) label.radio,
[class*="gradient-"][class*="-brand"] *:not(.form-reverse-reset) label.checkbox,
[class*="gradient-"][class*="-accent"] *:not(.form-reverse-reset) label.radio,
[class*="gradient-"][class*="-accent"] *:not(.form-reverse-reset) label.checkbox,
[class*="gradient-"][class*="-action"] *:not(.form-reverse-reset) label.radio,
[class*="gradient-"][class*="-action"] *:not(.form-reverse-reset) label.checkbox,
.form-reverse *:not(.form-reverse-reset) label.radio,
.form-reverse *:not(.form-reverse-reset) label.checkbox {
color: #ffffff; }
.bg-dark *:not(.form-reverse-reset) input, .bg-dark *:not(.form-reverse-reset) input:focus,
.bg-dark *:not(.form-reverse-reset) select,
.bg-dark *:not(.form-reverse-reset) select:focus,
.bg-dark *:not(.form-reverse-reset) textarea,
.bg-dark *:not(.form-reverse-reset) textarea:focus,
.bg-brand *:not(.form-reverse-reset) input,
.bg-brand *:not(.form-reverse-reset) input:focus,
.bg-brand *:not(.form-reverse-reset) select,
.bg-brand *:not(.form-reverse-reset) select:focus,
.bg-brand *:not(.form-reverse-reset) textarea,
.bg-brand *:not(.form-reverse-reset) textarea:focus,
.bg-accent *:not(.form-reverse-reset) input,
.bg-accent *:not(.form-reverse-reset) input:focus,
.bg-accent *:not(.form-reverse-reset) select,
.bg-accent *:not(.form-reverse-reset) select:focus,
.bg-accent *:not(.form-reverse-reset) textarea,
.bg-accent *:not(.form-reverse-reset) textarea:focus,
.bg-action *:not(.form-reverse-reset) input,
.bg-action *:not(.form-reverse-reset) input:focus,
.bg-action *:not(.form-reverse-reset) select,
.bg-action *:not(.form-reverse-reset) select:focus,
.bg-action *:not(.form-reverse-reset) textarea,
.bg-action *:not(.form-reverse-reset) textarea:focus,
.bg-skew *:not(.form-reverse-reset) input,
.bg-skew *:not(.form-reverse-reset) input:focus,
.bg-skew *:not(.form-reverse-reset) select,
.bg-skew *:not(.form-reverse-reset) select:focus,
.bg-skew *:not(.form-reverse-reset) textarea,
.bg-skew *:not(.form-reverse-reset) textarea:focus,
[class*="gradient-"][class*="-brand"] *:not(.form-reverse-reset) input,
[class*="gradient-"][class*="-brand"] *:not(.form-reverse-reset) input:focus,
[class*="gradient-"][class*="-brand"] *:not(.form-reverse-reset) select,
[class*="gradient-"][class*="-brand"] *:not(.form-reverse-reset) select:focus,
[class*="gradient-"][class*="-brand"] *:not(.form-reverse-reset) textarea,
[class*="gradient-"][class*="-brand"] *:not(.form-reverse-reset) textarea:focus,
[class*="gradient-"][class*="-accent"] *:not(.form-reverse-reset) input,
[class*="gradient-"][class*="-accent"] *:not(.form-reverse-reset) input:focus,
[class*="gradient-"][class*="-accent"] *:not(.form-reverse-reset) select,
[class*="gradient-"][class*="-accent"] *:not(.form-reverse-reset) select:focus,
[class*="gradient-"][class*="-accent"] *:not(.form-reverse-reset) textarea,
[class*="gradient-"][class*="-accent"] *:not(.form-reverse-reset) textarea:focus,
[class*="gradient-"][class*="-action"] *:not(.form-reverse-reset) input,
[class*="gradient-"][class*="-action"] *:not(.form-reverse-reset) input:focus,
[class*="gradient-"][class*="-action"] *:not(.form-reverse-reset) select,
[class*="gradient-"][class*="-action"] *:not(.form-reverse-reset) select:focus,
[class*="gradient-"][class*="-action"] *:not(.form-reverse-reset) textarea,
[class*="gradient-"][class*="-action"] *:not(.form-reverse-reset) textarea:focus,
.form-reverse *:not(.form-reverse-reset) input,
.form-reverse *:not(.form-reverse-reset) input:focus,
.form-reverse *:not(.form-reverse-reset) select,
.form-reverse *:not(.form-reverse-reset) select:focus,
.form-reverse *:not(.form-reverse-reset) textarea,
.form-reverse *:not(.form-reverse-reset) textarea:focus {
border-color: transparent; }
/*
---
name: Linear Gradients
category: Foundations/Helpers
tag: helpers
---
Add a gradient for the background of an element.
```html
The ease of Bitnami backed by the compute power of Google
```
*/
.subtitle {
font-weight: normal;
color: #44add5;
margin-top: -0.625em; }
/*
---
name: Inverse
category: Foundations/Helpers
tag: helpers
---
Use this style with dark background colors
```html
The best of both worlds
```
*/
.inverse {
color: #f7f7f7; }
/*
---
name: Responsive Images
category: Foundations/Helpers
tag: helpers
---
Responsive images are made using `.img-fluid`. It scales with the parent element because we apply
`max-width: 100%;` and `height: auto;`
SVG files will grow up to the size of the parent element and no SVG files will grow up its own size
to avoid blurry images.
```html
```
*/
.img-fluid {
max-width: 100%;
height: auto; }
svg.img-fluid {
width: 100%; }
/*
---
name: Lists without styles
category: Foundations/Helpers
tag: helpers
---
Remove the decoration (bullets) of the list.
```html
Can't find what you're looking for?
Click here for account questions
Click here for app questions
```
*/
.remove-style {
list-style: none; }
/*
---
name: Text alignment
category: Foundations/Helpers
tag: helpers
---
These classes help us to modify the default aligntment of the text in our views.
If the parent is displayed using flex, it will also work because
`justify-content: left | center | right` is applied.
```html
```
*/
.float-l {
float: left; }
.float-r {
float: right; }
.float-n {
float: none; }
/*
---
name: Clearfix
category: Foundations/Helpers
tag: helpers
---
Clear floating elements in the current container
```html
Float left
Float right
```
```html
Remove floating
```
*/
.clearfix:after {
content: '';
display: table;
clear: both; }
/*
---
name: Separator height
category: Foundations/Helpers
tag: helpers
---
Modify the height and the width of the separator.
```html
```
*/
hr.separator-small {
height: 1px; }
hr.separator-big {
height: 0.15625em; }
hr.separator-bigger {
height: 0.3125em; }
hr.separator-enormous {
height: 0.625em; }
hr.separator-15 {
width: 15%; }
hr.separator-30 {
width: 30%; }
hr.separator-50 {
width: 50%; }
hr.separator-70 {
width: 70%; }
/*
---
name: Padding
category: Foundations/Helpers
tag: helpers
---
Reduce or increase the default padding based on the base size unity.
```html
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
```
*/
@media all and (max-width: 29.9375em) {
.padding-reset-on-phone {
padding: 0; } }
@media all and (min-width: 30em) and (max-width: 47.9375em) {
.padding-reset-on-phone-land {
padding: 0; } }
@media all and (min-width: 48em) and (max-width: 56.1875em) {
.padding-reset-on-tablet {
padding: 0; } }
@media all and (min-width: 56.25em) and (max-width: 68.6875em) {
.padding-reset-on-desktop {
padding: 0; } }
@media all and (min-width: 68.75em) and (max-width: 81.1875em) {
.padding-reset-on-wide {
padding: 0; } }
@media all and (min-width: 30em) {
.padding-reset-a-phone {
padding: 0; } }
@media all and (min-width: 48em) {
.padding-reset-a-phone-land {
padding: 0; } }
@media all and (min-width: 56.25em) {
.padding-reset-a-tablet {
padding: 0; } }
@media all and (min-width: 68.75em) {
.padding-reset-a-desktop {
padding: 0; } }
@media all and (min-width: 81.25em) {
.padding-reset-a-wide {
padding: 0; } }
@media all and (max-width: 81.1875em) {
.padding-reset-b-ultrawide {
padding: 0; } }
@media all and (max-width: 68.6875em) {
.padding-reset-b-wide {
padding: 0; } }
@media all and (max-width: 56.1875em) {
.padding-reset-b-desktop {
padding: 0; } }
@media all and (max-width: 47.9375em) {
.padding-reset-b-tablet {
padding: 0; } }
@media all and (max-width: 29.9375em) {
.padding-reset-b-phone-land {
padding: 0; } }
/*
---
name: Margin
category: Foundations/Helpers
tag: helpers
---
Reduce or increase the default margin based on the base size unity.
```html
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
```
*/
@media all and (max-width: 29.9375em) {
.margin-reset-on-phone {
margin: 0; } }
@media all and (min-width: 30em) and (max-width: 47.9375em) {
.margin-reset-on-phone-land {
margin: 0; } }
@media all and (min-width: 48em) and (max-width: 56.1875em) {
.margin-reset-on-tablet {
margin: 0; } }
@media all and (min-width: 56.25em) and (max-width: 68.6875em) {
.margin-reset-on-desktop {
margin: 0; } }
@media all and (min-width: 68.75em) and (max-width: 81.1875em) {
.margin-reset-on-wide {
margin: 0; } }
@media all and (min-width: 30em) {
.margin-reset-a-phone {
margin: 0; } }
@media all and (min-width: 48em) {
.margin-reset-a-phone-land {
margin: 0; } }
@media all and (min-width: 56.25em) {
.margin-reset-a-tablet {
margin: 0; } }
@media all and (min-width: 68.75em) {
.margin-reset-a-desktop {
margin: 0; } }
@media all and (min-width: 81.25em) {
.margin-reset-a-wide {
margin: 0; } }
@media all and (max-width: 81.1875em) {
.margin-reset-b-ultrawide {
margin: 0; } }
@media all and (max-width: 68.6875em) {
.margin-reset-b-wide {
margin: 0; } }
@media all and (max-width: 56.1875em) {
.margin-reset-b-desktop {
margin: 0; } }
@media all and (max-width: 47.9375em) {
.margin-reset-b-tablet {
margin: 0; } }
@media all and (max-width: 29.9375em) {
.margin-reset-b-phone-land {
margin: 0; } }
/*
---
name: Margin - center
category: Foundations/Helpers
tag: helpers
---
Apply a margin `auto` to center elements.
```html
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB) to get developers productive immediately - with all the most
common tools ready to go.
```
*/
table.striped tr:nth-child(even) td {
background-color: #f7f7f7; }
table.striped tr:hover {
background-color: initial; }
/*
---
name: Typography size
category: Foundations/Helpers
tag: helpers
---
Reduce or increase the default `font-size` of an element.
```html
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
```
*/
.type-tiny {
font-size: 0.64em; }
.type-small {
font-size: 0.8em; }
.type-normal {
font-size: 1em; }
.type-big {
font-size: 1.25em; }
.type-bigger {
font-size: 1.5625em; }
.type-enormous {
font-size: 1.95312em; }
.type-giant {
font-size: 2.44141em; }
.type-huge {
font-size: 3.05176em; }
.type-massive {
font-size: 3.8147em; }
.type-colossal {
font-size: 4.76837em; }
/*
---
name: Typography color
category: Foundations/Helpers
tag: helpers
---
Change the default `color` of an element. If you want to use the `type-color-iron` helper,
the [reverse helper](#Typography%20color%20reverse) may interest you.
```html
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
```
*/
.type-color-bitnami,
.type-color-brand {
color: #00437B; }
.type-color-accent,
.type-color-accent {
color: #008145; }
.type-color-accent-light,
.type-color-accent-light {
color: #82C341; }
.type-color-iron,
.type-color-light {
color: #f1f1f1; }
.type-color-action,
.type-color-action {
color: #F58220; }
.type-color-white,
.type-color-white {
color: #ffffff; }
.type-color-light-blue,
.type-color-secondary {
color: #1598CB; }
/*
---
name: Typography color reverse
category: Foundations/Helpers
tag: helpers
---
The `type-color-reverse` modifier changes the color for headers, links and other text elements
inside the current container. This is really useful for text elements that are placed inside a
container with a dark background.
For known dark backgrounds, the `type-color-reverse` modifier is added automatically.
The list of known dark backgrounds is:
* [Backgrounds](/category/Foundations/Helpers/#Backgrounds)
* [Linear Gradients](/category/Foundations/Helpers/#Linear%20Gradients)
**NOTE:** This behaviour is very opinionated and it may cause issues with anchors in some situations like
headers. So, you can disable it using the `type-color-reverse-anchor-reset` class.
```html
Unknown dark background (with type-color-reverse)
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
Known flat backgrounds (no modifier required)
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
Known gradient backgrounds (no modifier required)
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
For example, our Rails Development Container includes full Rails environment and
SQL database (MariaDB).
```
*/
.type-uppercase {
text-transform: uppercase; }
/*
---
name: Typography capitalize
category: Foundations/Helpers
tag: helpers
---
Set the text to Capitalize
```html
Bitnami rocks!
```
*/
.type-capitalize {
text-transform: capitalize; }
/*
---
name: Typography weight
category: Foundations/Helpers
tag: helpers
---
By default, the weight of the text is regular (400). For certain situations, we may need to increase the
weight of the typography.
**NOTE**: Interstate is a bit special font-family. Light is represented by 400 and regular by 500.
That's the reason of the values on these helpers.
```html
You may need to change the typo weight to
light,
regular
or bold
