www.reboot.css.dist.reboot.css Maven / Gradle / Ivy
The newest version!
/* normalizing styles
-----------------------------*/
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
background-color: #f8f8f8;
margin: 0;
}
main {
padding: 30px;
margin: 0;
}
main,
details,
summary {
display: block;
}
audio,
canvas,
progress,
video {
vertical-align: baseline;
}
a {
color: #478cc8;
text-decoration: none;
background: transparent;
}
a:hover {
text-decoration: underline;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
img {
border: 0;
}
hr {
box-sizing: content-box;
height: 0;
border-width: 0 0 1px 0;
border-color: #c4c4c4;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 14px;
}
ul,
ol {
list-style: none;
}
/* normalizing default styles
-----------------------------*/
b,
strong {
font-weight: 600;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* headers & font sizes
-----------------------------*/
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-weight: 600;
margin: 0 0 10px 0;
}
h1,
.h1 {
font-size: 32px;
}
h2,
.h2 {
font-size: 28px;
}
h3,
.h3 {
font-size: 22px;
}
h4,
.h4 {
font-size: 16px;
}
h5,
.h5 {
font-size: 14px;
}
h6,
.h6 {
font-size: 12px;
}
/* font weights
-----------------------------*/
.nf-light {
font-weight: 300;
}
.nf-normal {
font-weight: 400;
}
.nf-bold {
font-weight: 600;
}
/* text align options
-----------------------------*/
.txt-right {
text-align: right;
}
.txt-left {
text-align: left;
}
.txt-center,
.txt-centre {
text-align: center;
}
/* buttons
-----------------------------*/
button,
.nf-button {
margin: 5px;
font-family: inherit;
font-size: 100%;
padding: 0.5em 1em;
color: #333;
background-color: #fff;
border: 1px solid #c4c4c4;
text-decoration: none;
text-transform: none;
border-radius: 4px;
overflow: visible;
display: inline-block;
line-height: normal;
white-space: nowrap;
vertical-align: baseline;
text-align: center;
cursor: pointer;
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
.nf-btn-hover,
.nf-button:hover,
.nf-button:focus,
button:hover,
button:focus,
grouped label:hover,
grouped label:focus,
nf-group label:hover,
nf-group label:focus,
grouped input[type=radio]:checked + label,
.nf-group input[type=radio]:checked + label,
grouped input[type=checkbox]:checked + label,
.nf-group input[type=checkbox]:checked + label {
background-image: linear-gradient(transparent, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.1));
}
.nf-button-active,
.nf-button:active,
button:active,
grouped label:active,
nf-group label:active,
grouped input[type=radio]:checked + label,
.nf-group input[type=radio]:checked + label,
grouped input[type=checkbox]:checked + label,
.nf-group input[type=checkbox]:checked + label {
box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset, 0 0 6px rgba(0,0,0,0.2) inset;
}
.nf-button:focus,
button:focus {
outline: 0;
}
.nf-button[disabled],
button[disabled],
.is-disabled,
.is-disabled:hover,
.is-disabled:focus,
.is-disabled:active {
background-image: none;
opacity: 0.4;
cursor: default;
box-shadow: none;
pointer-events: none;
}
.btn-primary,
.btn-success,
.btn-error {
color: #fff !important;
border: 1px solid rgba(0,0,0,0.2) !important;
text-shadow: 0 1px 1px rgba(0,0,0,0.2) !important;
}
.btn-primary nf-icon,
.btn-success nf-icon,
.btn-error nf-icon {
color: #fff !important;
}
.btn-primary {
background-color: #478cc8 !important;
}
.btn-success {
background: #8dac71 !important;
}
.btn-classic {
background-color: #e6e6e6 !important;
}
.btn-error {
background: #b6272b !important;
}
/* grouped buttons
-----------------------------*/
grouped,
.nf-group {
display: inline-block;
margin: 5px;
vertical-align: middle;
}
grouped label,
.nf-group label {
font-family: inherit;
font-size: 100%;
padding: 0.5em 1em;
color: #333;
background-color: transparent;
border: 1px solid #c4c4c4;
text-decoration: none;
display: inline-block;
line-height: normal;
white-space: nowrap;
vertical-align: baseline;
text-align: center;
cursor: pointer;
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
grouped button,
grouped .nf-buton,
grouped label,
.nf-group button,
.nf-group .nf-buton,
.nf-group label {
border-radius: 0;
margin: 0;
float: left;
border-left-width: 0;
}
grouped button:first-child,
grouped .nf-buton:first-child,
grouped label:first-of-type,
.nf-group button:first-child,
.nf-group .nf-buton:first-child,
.nf-group label:first-of-type {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-left-width: 1px;
}
grouped button:last-child,
grouped .nf-buton:last-child,
grouped label:last-of-type,
.nf-group button:last-child,
.nf-group .nf-buton:last-child,
.nf-group label:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/* radio/checkbox buttons
-----------------------------*/
grouped input[type=radio],
.nf-group input[type=radio],
grouped input[type=checkbox],
.nf-group input[type=checkbox] {
display: none;
}
/* pills
-----------------------------*/
pill,
.nf-pill {
font-family: inherit;
font-size: 0.8em;
line-height: 0.8em;
padding: 0.3em 1em;
color: #333;
background-color: transparent;
border: 1px solid #c4c4c4;
border-radius: 6px;
text-transform: uppercase;
cursor: default;
display: inline-block;
white-space: nowrap;
vertical-align: baseline;
text-align: center;
/* this is probably a bad idea, but I'm just testing it */
-webkit-transform: translateY(-0.15em);
transform: translateY(-0.15em);
}
pill[ok],
pill.pill-ok,
.nf-pill.pill-ok,
.nf-pill[ok] {
background: #8dac71;
color: #fff;
}
pill[failed],
pill.pill-failed,
.nf-pill.pill-failed,
.nf-pill[failed] {
background: #b6272b;
color: #fff;
}
pill[marginal],
pill.pill-marginal,
.nf-pill.pill-marginal,
.nf-pill[marginal] {
background: #d2bc5e;
color: #fff;
}
pill[primary],
pill.pill-primary,
.nf-pill.pill-primary,
.nf-pill[primary] {
background-color: #478cc8;
color: #fff;
}
/* badges
-----------------------------*/
badge,
.nf-badge {
background: #fff;
color: #333;
}
badge[ok],
badge.badge-ok,
.nf-badge.badge-ok,
.nf-badge[ok] {
background: #8dac71;
color: #fff;
}
badge[marginal],
badge.badge-marginal,
.nf-badge.badge-marginal,
.nf-badge[marginal] {
background: #d2bc5e;
color: #fff;
}
badge[failed],
badge.badge-failed,
.nf-badge.badge-failed,
.nf-badge[failed] {
background: #b6272b;
color: #fff;
}
badge,
.nf-badge {
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
text-align: center;
vertical-align: middle;
}
badge,
.nf-badge {
width: 120px;
height: 120px;
border: 1px solid #c4c4c4;
border-radius: 6px;
word-break: break-all;
cursor: default;
overflow: hidden;
}
/* form
-----------------------------*/
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="week"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="color"],
input:not([type]),
select,
textarea {
margin: 7px;
vertical-align: top;
padding: 0.5em 0.6em;
display: inline-block;
border: 1px solid #d9d9d9;
border-radius: 4px;
box-sizing: border-box;
color: #6a6a6a;
font: inherit;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
input:not([type]):focus,
select:focus,
textarea:focus,
input.is-focused,
select.is-focused,
textarea.is-focused {
outline: 0;
border-color: #129fea;
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: 1px auto #129fea;
}
input[type="checkbox"],
input[type="radio"] {
margin: 0.5em 0;
padding: 0;
display: inline-block;
box-sizing: border-box;
}
input[type="text"][disabled],
input[type="password"][disabled],
input[type="email"][disabled],
input[type="url"][disabled],
input[type="date"][disabled],
input[type="month"][disabled],
input[type="time"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="week"][disabled],
input[type="number"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="color"][disabled],
select[disabled],
input:not([type])[disabled],
textarea[disabled] {
cursor: default;
background-color: #eaeded;
color: #cad2d3;
}
input[readonly],
select[readonly],
textarea[readonly] {
background: #eee;
color: #777;
border-color: #d9d9d9;
}
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid,
input[type="text"].is-invalid,
input[type="password"].is-invalid,
input[type="email"].is-invalid,
input[type="url"].is-invalid,
input[type="date"].is-invalid,
input[type="month"].is-invalid,
input[type="time"].is-invalid,
input[type="datetime"].is-invalid,
input[type="datetime-local"].is-invalid,
input[type="week"].is-invalid,
input[type="number"].is-invalid,
input[type="search"].is-invalid,
input[type="tel"].is-invalid,
input[type="color"].is-invalid,
select.is-invalid,
input:not([type]).is-invalid,
textarea.is-invalid {
color: #b94a48;
border-color: #e9322d;
}
input[type="file"]:focus:invalid:focus,
input[type="radio"]:focus:invalid:focus,
input[type="checkbox"]:focus:invalid:focus,
input[type="file"].is-invalid,
input[type="radio"].is-invalid,
input[type="checkbox"].is-invalid {
outline-color: #e9322d;
}
/* placeholder text
-----------------------------*/
input::-webkit-input-placeholder {
color: #c4c4c4;
font-weight: 300;
}
input::-moz-placeholder {
color: #c4c4c4;
font-weight: 300;
}
input:-ms-input-placeholder {
color: #c4c4c4;
font-weight: 300;
}
input::placeholder {
color: #c4c4c4;
font-weight: 300;
}
textarea::-webkit-input-placeholder {
color: #c4c4c4;
font-weight: 300;
}
textarea::-moz-placeholder {
color: #c4c4c4;
font-weight: 300;
}
textarea:-ms-input-placeholder {
color: #c4c4c4;
font-weight: 300;
}
textarea::placeholder {
color: #c4c4c4;
font-weight: 300;
}
/* normalizing default styles
-----------------------------*/
input {
line-height: normal;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
select {
text-transform: none;
border: 1px solid #d9d9d9;
background-color: #fff;
}
textarea {
overflow: auto;
}
select[multiple] {
height: auto;
}
label {
margin: 0.5em;
padding-top: 2px;
}
fieldset {
margin: 0;
padding: 0.35em 0 0.75em;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0.3em 0;
margin-bottom: 0.3em;
color: #333;
border-bottom: 1px solid #e5e5e5;
}
optgroup {
font-weight: bold;
}
/* table
-----------------------------*/
table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
border: none;
}
td,
th {
border-bottom: 1px solid #ccc;
border-width: 0 0 1px 0;
font-size: inherit;
margin: 0;
overflow: hidden;
padding: 0.8em 1em;
}
th {
font-weight: 600;
}
td {
word-break: break-all;
}
td:first-child,
th:first-child {
border-left-width: 0;
}
tr:last-child td {
border-bottom: none;
}
thead {
background: transparent;
color: #333;
font-weight: 600;
text-align: left;
vertical-align: bottom;
}
td {
background-color: transparent;
}
.is-odd td {
background-color: #f1f1f1;
}
.is-striped tr:nth-child(odd) td {
background-color: #f1f1f1;
}
/* dd
-----------------------------*/
dt {
font-weight: bold;
text-align: right;
box-sizing: border-box;
width: 25%;
margin-right: 10px;
float: left;
clear: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
dd {
margin-left: calc(25% + 10px);
}
dt,
dd {
margin-bottom: 10px;
}
/* tab generics
-----------------------------*/
nav ul,
ul.is-subnav {
list-style: none;
padding: 0;
margin: 0;
font-weight: 300;
}
nav li a,
ul.is-subnav a {
display: block;
height: 100%;
padding: 0 20px;
}
nav li a,
nav ul a:hover,
ul.is-subnav a,
ul.is-subnav a:hover {
text-decoration: none;
}
nav li,
ul.is-subnav li {
position: relative;
float: left;
font-size: 17px;
text-align: center;
line-height: 50px;
box-sizing: border-box;
height: 100%;
transition: background-color 0.2s ease;
}
nav li,
ul.is-subnav li {
padding: 0;
cursor: pointer;
}
/* nav bar
-----------------------------*/
nav {
height: 50px;
background-color: #5b5b5b;
}
nav ul {
display: block;
height: 100%;
}
nav li {
color: #fff;
}
nav li.is-selected::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background-color: #fff;
}
nav li a {
color: #fff;
}
nav .logo {
text-transform: uppercase;
font-size: 23px;
letter-spacing: 1px;
padding: 0 20px;
margin-left: 5px;
cursor: default;
}
nav .logo img {
width: 35px;
height: 35px;
position: relative;
top: 9px;
margin-right: -5px;
}
nav li:hover:not(.logo) {
background-color: #a6a6a6;
}
/* subnav
-----------------------------*/
ul.is-subnav {
display: inline-block;
height: 50px;
color: #477fc5;
vertical-align: bottom;
}
ul.is-subnav li {
font-size: 14px;
font-weight: 500;
}
ul.is-subnav li.is-selected::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background-color: #477fc5;
}
ul.is-subnav li,
ul.is-subnav a {
text-transform: uppercase;
}
/* header
-----------------------------*/
main > header,
.nf-header {
border-bottom: 1px solid #c4c4c4;
text-align: left;
margin-bottom: 30px;
}
main > header h1,
.nf-header h1 {
margin-right: 20px;
display: inline-block;
}
/* panel
-----------------------------*/
panel,
.nf-panel {
display: block;
background-color: #fff;
border: 1px solid #d9d9d9;
border-radius: 3px;
padding: 20px;
}
panel header,
.nf-panel header {
background-color: #f1f1f1;
padding: 10px 20px;
border-bottom: 1px solid #d9d9d9;
margin-left: -20px;
margin-right: -20px;
margin-top: -20px;
margin-bottom: 20px;
}
panel header h1,
.nf-panel header h1,
panel header h2,
.nf-panel header h2,
panel header h3,
.nf-panel header h3,
panel header h4,
.nf-panel header h4,
panel header h5,
.nf-panel header h5,
panel header h6,
.nf-panel header h6 {
margin-bottom: 0;
}
panel footer,
.nf-panel footer {
background-color: #f1f1f1;
padding: 10px 20px;
border-top: 1px solid #d9d9d9;
margin-left: -20px;
margin-right: -20px;
margin-top: 20px;
margin-bottom: -20px;
}
panel table,
.nf-panel table {
border-top: 1px solid #ccc;
width: calc(100% + 40px);
margin-left: -20px;
margin-bottom: -20px;
margin-top: 30px;
}
panel table[is="nf-table"] table,
.nf-panel table[is="nf-table"] table {
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
}
/* grids
-----------------------------*/
.nf-grid {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.nf-1,
.nf-2,
.nf-3,
.nf-4,
.nf-5,
.nf-6,
.nf-7,
.nf-8,
.nf-9,
.nf-10,
.nf-11,
.nf-12,
.nf-13,
.nf-14,
.nf-15,
.nf-16 {
display: inline-block;
box-sizing: border-box;
}
.nf-1 {
width: 6.25%;
}
.nf-2 {
width: 12.5%;
}
.nf-3 {
width: 18.75%;
}
.nf-4 {
width: 25%;
}
.nf-5 {
width: 31.25%;
}
.nf-6 {
width: 37.5%;
}
.nf-7 {
width: 43.75%;
}
.nf-8 {
width: 50%;
}
.nf-9 {
width: 56.25%;
}
.nf-10 {
width: 62.5%;
}
.nf-11 {
width: 68.75%;
}
.nf-12 {
width: 75%;
}
.nf-13 {
width: 81.25%;
}
.nf-14 {
width: 87.5%;
}
.nf-15 {
width: 93.75%;
}
.nf-16 {
width: 100%;
}
.nf-grid-centered {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.nf-grid-centered > * {
display: -webkit-flex;
display: flex;
}
.nf-grid-centered > * > * {
text-align: center;
margin: auto;
}
/* utilities
-----------------------------*/
.nf-right {
float: right;
}
.nf-left {
float: left;
}
.nf-inline {
display: inline;
}
.nf-clickable {
cursor: pointer;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.isHidden,
.is-hidden,
[hidden] {
display: none !important;
}