@bitnami/hex-core
Version:
HEx Design System core elements: design tokens, mixins and foundations
2,058 lines (1,905 loc) • 142 kB
CSS
/*!
* 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.
<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%;
```
*/
/*
---
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)`
);
```
*/
/*
---
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:
```
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,700|Hind:300,400,700" rel="stylesheet">
```
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 <a href="/category/Foundations/Mixins/#spacing(name)">spacing(name)</a>
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 <a href="/category/Foundations/Mixins/#spacing(name)">spacing(name)</a>
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
<p>This is a <a>link</a> inside a paragraph. It's important to highlight them in the <a>text</a>.</p>
```
*/
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
<p>This is a <code>code example</code></p>
<pre><code>More code!</code></pre>
```
*/
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 name="test" placeholder="This is a test" />
```
*/
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 name="test">
<option>Select one element</option>
<option>Option 1</option>
<option>Option 2</option>
<option disabled>Option 3</option>
</select>
```
*/
select {
background-color: #ffffff; }
/*
---
name: Textarea
category: Foundations/Forms
tag: text
---
```html
<textarea>
This is a test
</textarea>
```
*/
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 for="test">Label for input</label>
<input name="check" id="test" placeholder="test" />
```
*/
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
<label for="check1" class="checkbox">
<input type="checkbox" name="check1" id="check1" />
<span>Test</span>
</label>
<label for="check2" class="checkbox">
<input type="checkbox" name="check2" id="check2" disabled />
<span>Disabled</span>
</label>
```
*/
/*
---
name: Radio
category: Foundations/Forms
tag: text
---
```html
<label for="test1" class="radio">
<input type="radio" name="test" id="test1"/>
<span>Test 1</span>
</label>
<label for="test2" class="radio">
<input type="radio" name="test" id="test2"/>
<span>Test 2</span>
</label>
<label for="test3" class="radio">
<input type="radio" name="test" id="test3"/>
<span>Test 3</span>
</label>
<label for="test4" class="radio">
<input type="radio" name="test" id="test4" disabled/>
<span>Disabled</span>
</label>
```
*/
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
<a class="button" href="#">Link button</a>
<button class="button">Submit</button>
<input type="submit" value="Input Submit" class="button"/>
<button class="button" disabled="disabled">Disabled</button>
<button class="button" disabled>Disabled too</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
<h1>Bitnami rocks!</h1>
<h2>Bitnami rocks!</h2>
<h3>Bitnami rocks!</h3>
<h4>Bitnami rocks!</h4>
<h5>Bitnami rocks!</h5>
<h6>Bitnami rocks!</h6>
<!-- With anchors -->
<h1><a href="#">Bitnami rocks!</a></h1>
<h2><a href="#">Bitnami rocks!</a></h2>
<h3><a href="#">Bitnami rocks!</a></h3>
```
*/
h1,
h2,
h3,
h4,
h5,
h6 {
color: #1C2B39;
font-weight: normal;
font-family: "Interstate", "Fira Sans", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
margin: 0.625em 0 0.3125em; }
h1 a,
h1 a:hover,
h1 a:active,
h2 a,
h2 a:hover,
h2 a:active,
h3 a,
h3 a:hover,
h3 a:active,
h4 a,
h4 a:hover,
h4 a:active,
h5 a,
h5 a:hover,
h5 a:active,
h6 a,
h6 a:hover,
h6 a:active {
color: inherit; }
h1 {
font-size: 2.44141em; }
h2 {
font-size: 1.95312em; }
h3 {
font-size: 1.5625em; }
h4 {
font-size: 1.25em;
font-weight: 500;
text-transform: uppercase; }
h5,
h6 {
font-size: 1.25em;
font-weight: bold; }
/*
---
name: Unordered lists
category: Foundations/Lists
tag: blocks
---
List are very similar to the base style. We only improved the margin and padding
```html
<ul>
<li>Can't find what you're looking for?</li>
<li>Click here for account questions</li>
<li>Click here for app questions</li>
</ul>
```
*/
/*
---
name: Ordered lists
category: Foundations/Lists
tag: blocks
---
```html
<ol>
<li>Can't find what you're looking for?</li>
<li>Click here for account questions</li>
<li>Click here for app questions</li>
</ol>
```
*/
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
<p>
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.
<p/>
<p>
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.
</p>
```
*/
/*
---
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
<h1>Rails Development Container</h1>
<p>
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.
<p/>
<h3>Stacksmith</h3>
<p>
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>
```
*/
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
<div class="container container-small">
<blockquote cite="https://twitter.com/ericabrescia/status/803775698297036801">
Great day at my first Linux Foundation board meeting, but looking forward to seeing
everyone at #awsreinvent. On my way!
</br>
See you there!
<a href="https://twitter.com/ericabrescia/" rel="author">Erica Brescia</a>
</blockquote>
<blockquote class="accent" cite="https://twitter.com/ericabrescia/status/803775698297036801">
Great day at my first Linux Foundation board meeting, but looking forward to seeing
everyone at #awsreinvent. On my way!
</br>
See you there!
<a href="https://twitter.com/ericabrescia/" rel="author">Erica Brescia</a>
</blockquote>
<blockquote class="brand" cite="https://twitter.com/ericabrescia/status/803775698297036801">
Great day at my first Linux Foundation board meeting, but looking forward to seeing
everyone at #awsreinvent. On my way!
</br>
See you there!
<a href="https://twitter.com/ericabrescia/" rel="author">Erica Brescia</a>
</blockquote>
</div>
```
*/
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
<div class="container container-small">
<blockquote class="outstanding" cite="https://twitter.com/ericabrescia/status/803775698297036801">
Great day at my first Linux Foundation board meeting, but looking forward to seeing
everyone at #awsreinvent. On my way!
</br>
See you there!
<a href="https://twitter.com/ericabrescia/" rel="author">Erica Brescia</a>
</blockquote>
</div>
```
*/
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,<svg width='68' height='49' viewBox='0 0 68 49' xmlns='http://www.w3.org/2000/svg'><title>Fill 1</title><path d='M30.769 21.522c0 19.627-11.1 26.936-28.521 27.478L0 39.119c9.413-1.083 14.05-5.415 13.769-12.724H3.372V0h27.397v21.522zm37.231 0C68 41.15 57.041 48.458 39.48 49l-2.108-9.881c9.413-1.083 14.05-5.415 13.628-12.724H40.603V0H68v21.522z' fill='rgb(126, 211, 33)' fill-rule='evenodd'/></svg>");
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
<abbr title="Structured Query Language">SQL</abbr> 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
<abbr title="Structured Query Language">SQL</abbr> 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 />
```
*/
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
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Downloads</th>
<th>Stars</th>
</tr>
</thead>
<body>
<tr>
<td>123</td>
<td>Gitlab</td>
<td>42343</td>
<td>5</td>
</tr>
<tr>
<td>321</td>
<td>Moodle</td>
<td>54312</td>
<td>4.5</td>
</tr>
<tr>
<td>753</td>
<td>Wordpress</td>
<td>23434</td>
<td>4.3</td>
</tr>
</body>
</table>
```
*/
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-bott