<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/angular2-data-table/release/datatable.css" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/angular2-data-table/release/material.css" />
<link href="https://file.myfontastic.com/Jnf54BZCm7mSjGCxNRbfp3/icons.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/zone.js@0.6.23/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="https://unpkg.com/typescript@1.8.10/lib/typescript.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
body{
font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
text-align: center;
font-style: normal;
font-weight: 300;
font-size: 1.4rem;
line-height: 2rem;
letter-spacing: 0.01rem;
color: #212121;
background-color: #f5f5f5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
margin:20px
}
.datatable {
text-align: left;
width:75%;
margin:0 auto;
}
.datatable.vertical-scroll {
height:70vh;
}
.ngx-datatable .datatable-body-row.active,
.ngx-datatable .datatable-body-row.active .datatable-row-group,
.ngx-datatable .datatable-body-row.active,
.ngx-datatable .datatable-body-row.active .datatable-row-group {
background-color: #eeeeee;
}
.ngx-datatable .datatable-body-row.active:hover,
.ngx-datatable .datatable-body-row.active:hover .datatable-row-group,
.ngx-datatable .datatable-body-row.active:hover,
.ngx-datatable .datatable-body-row.active:hover .datatable-row-group {
background-color: #eeeeee;
}
# angular2-data-table basic example
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: "./src",
'@angular': 'https://unpkg.com/@angular',
'rxjs': 'https://unpkg.com/rxjs@5.0.0-beta.12',
'@swimlane/ngx-datatable': 'https://unpkg.com/@swimlane/ngx-datatable'
},
//packages defines our app package
packages: {
app: {
main: './bootstrap.ts',
defaultExtension: 'ts'
},
'@angular/core': {
main: 'bundles/core.umd.js',
defaultExtension: 'js'
},
'@angular/compiler': {
main: 'bundles/compiler.umd.js',
defaultExtension: 'js'
},
'@angular/common': {
main: 'bundles/common.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser-dynamic': {
main: 'bundles/platform-browser-dynamic.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser': {
main: 'bundles/platform-browser.umd.js',
defaultExtension: 'js'
},
'@angular/forms': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/router': {
main: 'index.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import {Component, NgModule, ViewEncapsulation} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import {
TableOptions,
TableColumn,
ColumnMode
} from '@swimlane/ngx-datatable';
@Component({
selector: 'my-app',
styleUrls: [
'material.css',
'dark.css',
'icons.css',
'app.css'
],
encapsulation: ViewEncapsulation.None,
template: `
<div>
<span (click)="selectionType = multi">multi</span>
<span (click)="selectionType = multiClick">multiClick</span> <br />
{{selectionType}}
</div>
<div *ngIf="selected && selected.length">{{selected.length}}</div>
<div>
<h3>basic</h3>
<ngx-datatable
class='material'
[rows]='rows'
[columns]='[{name:"Name"},{name:"Gender"},{name:"Company"}]'
[columnMode]='"force"'
[selected]="selected"
[selectionType]="selectionType"
[headerHeight]='50'
[footerHeight]='50'
[rowHeight]='"auto"'>
</ngx-datatable>
</div>
`
})
export class App {
multi = "multi";
multiClick = "multiClick";
selectionType = this.multi;
selected = [];
rows = [];
constructor() {
this.fetch((data) => {
this.rows.push(...data);
});
}
fetch(cb) {
const req = new XMLHttpRequest();
req.open('GET', 'https://unpkg.com/@swimlane/ngx-datatable@6.3.0/assets/data/company.json');
req.onload = () => {
cb(JSON.parse(req.response));
};
req.send();
}
}
@NgModule({
imports: [ BrowserModule, NgxDatatableModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
.ngx-datatable.material {
background: #FFF;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
/**
* Shared Styles
*/
/**
* Global Row Styles
*/
/**
* Header Styles
*/
/**
* Body Styles
*/
/**
* Footer Styles
*/ }
.ngx-datatable.material.striped .datatable-row-odd {
background: #eee; }
.ngx-datatable.material.single-selection .datatable-body-row.active,
.ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active,
.ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active,
.ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group {
background-color: #304FFE;
color: #FFF; }
.ngx-datatable.material.single-selection .datatable-body-row.active:hover,
.ngx-datatable.material.single-selection .datatable-body-row.active:hover .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active:hover,
.ngx-datatable.material.multi-selection .datatable-body-row.active:hover .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active:hover,
.ngx-datatable.material.multi-click-selection .datatable-body-row.active:hover .datatable-row-group {
background-color: #193AE4;
color: #FFF; }
.ngx-datatable.material.single-selection .datatable-body-row.active:focus,
.ngx-datatable.material.single-selection .datatable-body-row.active:focus .datatable-row-group, .ngx-datatable.material.multi-selection .datatable-body-row.active:focus,
.ngx-datatable.material.multi-selection .datatable-body-row.active:focus .datatable-row-group, .ngx-datatable.material.multi-click-selection .datatable-body-row.active:focus,
.ngx-datatable.material.multi-click-selection .datatable-body-row.active:focus .datatable-row-group {
background-color: #2041EF;
color: #FFF; }
.ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover,
.ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover .datatable-row-group {
background-color: #eee;
transition-property: background;
transition-duration: .3s;
transition-timing-function: linear; }
.ngx-datatable.material:not(.cell-selection) .datatable-body-row:focus,
.ngx-datatable.material:not(.cell-selection) .datatable-body-row:focus .datatable-row-group {
background-color: #ddd; }
.ngx-datatable.material.cell-selection .datatable-body-cell:hover,
.ngx-datatable.material.cell-selection .datatable-body-cell:hover .datatable-row-group {
background-color: #eee;
transition-property: background;
transition-duration: .3s;
transition-timing-function: linear; }
.ngx-datatable.material.cell-selection .datatable-body-cell:focus,
.ngx-datatable.material.cell-selection .datatable-body-cell:focus .datatable-row-group {
background-color: #ddd; }
.ngx-datatable.material.cell-selection .datatable-body-cell.active,
.ngx-datatable.material.cell-selection .datatable-body-cell.active .datatable-row-group {
background-color: #304FFE;
color: #FFF; }
.ngx-datatable.material.cell-selection .datatable-body-cell.active:hover,
.ngx-datatable.material.cell-selection .datatable-body-cell.active:hover .datatable-row-group {
background-color: #193AE4;
color: #FFF; }
.ngx-datatable.material.cell-selection .datatable-body-cell.active:focus,
.ngx-datatable.material.cell-selection .datatable-body-cell.active:focus .datatable-row-group {
background-color: #2041EF;
color: #FFF; }
.ngx-datatable.material .empty-row {
height: 50px;
text-align: left;
padding: .5rem 1.2rem;
vertical-align: top;
border-top: 0; }
.ngx-datatable.material .loading-row {
text-align: left;
padding: .5rem 1.2rem;
vertical-align: top;
border-top: 0; }
.ngx-datatable.material .datatable-header .datatable-row-left,
.ngx-datatable.material .datatable-body .datatable-row-left {
background-color: #FFF;
background-position: 100% 0;
background-repeat: repeat-y;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQIHWPSkNeSBmJhTQVtbiDNCgASagIIuJX8OgAAAABJRU5ErkJggg==); }
.ngx-datatable.material .datatable-header .datatable-row-right,
.ngx-datatable.material .datatable-body .datatable-row-right {
background-position: 0 0;
background-color: #fff;
background-repeat: repeat-y;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQI12PQkNdi1VTQ5gbSwkAsDQARLAIGtOSFUAAAAABJRU5ErkJggg==); }
.ngx-datatable.material .datatable-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.ngx-datatable.material .datatable-header .datatable-header-cell {
text-align: left;
padding: .9rem 1.2rem;
font-weight: 400;
color: rgba(0, 0, 0, 0.54);
vertical-align: bottom;
font-size: 12px;
font-weight: 500; }
.ngx-datatable.material .datatable-header .datatable-header-cell .datatable-header-cell-wrapper {
position: relative; }
.ngx-datatable.material .datatable-header .datatable-header-cell.longpress .draggable::after {
transition: transform 400ms ease, opacity 400ms ease;
opacity: .5;
transform: scale(1); }
.ngx-datatable.material .datatable-header .datatable-header-cell .draggable::after {
content: " ";
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -30px;
height: 60px;
width: 60px;
background: #eee;
border-radius: 100%;
opacity: 1;
filter: none;
transform: scale(0);
z-index: 9999;
pointer-events: none; }
.ngx-datatable.material .datatable-header .datatable-header-cell.dragging .resize-handle {
border-right: none; }
.ngx-datatable.material .datatable-header .resize-handle {
border-right: solid 1px #eee; }
.ngx-datatable.material .datatable-body .datatable-row-detail {
background: #f5f5f5;
padding: 10px; }
.ngx-datatable.material .datatable-body .datatable-group-header {
background: #f5f5f5;
border-bottom: solid 1px #D9D8D9;
border-top: solid 1px #D9D8D9; }
.ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell {
text-align: left;
padding: .9rem 1.2rem;
vertical-align: top;
border-top: 0;
color: rgba(0, 0, 0, 0.87);
transition: width 0.3s ease;
font-size: 14px;
font-weight: 400; }
.ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-group-cell {
text-align: left;
padding: .9rem 1.2rem;
vertical-align: top;
border-top: 0;
color: rgba(0, 0, 0, 0.87);
transition: width 0.3s ease;
font-size: 14px;
font-weight: 400; }
.ngx-datatable.material .datatable-body .progress-linear {
display: block;
position: relative;
width: 100%;
height: 5px;
padding: 0;
margin: 0;
position: absolute; }
.ngx-datatable.material .datatable-body .progress-linear .container {
display: block;
position: relative;
overflow: hidden;
width: 100%;
height: 5px;
-webkit-transform: translate(0, 0) scale(1, 1);
transform: translate(0, 0) scale(1, 1);
background-color: #aad1f9; }
.ngx-datatable.material .datatable-body .progress-linear .container .bar {
transition: all .2s linear;
-webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
transition: -webkit-transform .2s linear;
transition: transform .2s linear;
background-color: #106cc8;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
height: 5px; }
.ngx-datatable.material .datatable-footer {
border-top: 1px solid rgba(0, 0, 0, 0.12);
font-size: 12px;
font-weight: 400;
color: rgba(0, 0, 0, 0.54); }
.ngx-datatable.material .datatable-footer .page-count {
line-height: 50px;
height: 50px;
padding: 0 1.2rem; }
.ngx-datatable.material .datatable-footer .datatable-pager {
margin: 0 10px; }
.ngx-datatable.material .datatable-footer .datatable-pager li {
vertical-align: middle; }
.ngx-datatable.material .datatable-footer .datatable-pager li.disabled a {
color: rgba(0, 0, 0, 0.26) !important;
background-color: transparent !important; }
.ngx-datatable.material .datatable-footer .datatable-pager li.active a {
background-color: rgba(158, 158, 158, 0.2);
font-weight: bold; }
.ngx-datatable.material .datatable-footer .datatable-pager a {
height: 22px;
min-width: 24px;
line-height: 22px;
padding: 0 6px;
border-radius: 3px;
margin: 6px 3px;
text-align: center;
vertical-align: top;
color: rgba(0, 0, 0, 0.54);
text-decoration: none;
vertical-align: bottom; }
.ngx-datatable.material .datatable-footer .datatable-pager a:hover {
color: rgba(0, 0, 0, 0.75);
background-color: rgba(158, 158, 158, 0.2); }
.ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-left,
.ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-skip,
.ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-right,
.ngx-datatable.material .datatable-footer .datatable-pager .datatable-icon-prev {
font-size: 20px;
line-height: 20px;
padding: 0 3px; }
/**
* Checkboxes
**/
.datatable-checkbox {
position: relative;
margin: 0;
cursor: pointer;
vertical-align: middle;
display: inline-block;
box-sizing: border-box;
padding: 10px 0; }
.datatable-checkbox input[type='checkbox'] {
position: relative;
margin: 0 1rem 0 0;
cursor: pointer;
outline: none; }
.datatable-checkbox input[type='checkbox']:before {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
content: "";
position: absolute;
left: 0;
z-index: 1;
width: 1rem;
height: 1rem;
border: 2px solid #f2f2f2; }
.datatable-checkbox input[type='checkbox']:checked:before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
height: .5rem;
border-color: #009688;
border-top-style: none;
border-right-style: none; }
.datatable-checkbox input[type='checkbox']:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1rem;
height: 1rem;
background: #fff;
cursor: pointer; }
/**
* Progress bar animations
*/
@keyframes query {
0% {
opacity: 1;
transform: translateX(35%) scale(0.3, 1); }
100% {
opacity: 0;
transform: translateX(-50%) scale(0, 1); } }
.ngx-datatable.dark {
box-shadow: none;
background: #1b1e27;
border: 1px solid #2f3646;
color: #fff;
font-size: 13px; }
.ngx-datatable.dark .datatable-header {
background: #181b24;
color: #72809b; }
.ngx-datatable.dark .datatable-header .datatable-header-cell {
text-align: left;
padding: .5rem 1.2rem;
font-weight: bold; }
.ngx-datatable.dark .datatable-header .datatable-header-cell .datatable-header-cell-label {
line-height: 24px; }
.ngx-datatable.dark .datatable-body {
background: #1a1e28; }
.ngx-datatable.dark .datatable-body .datatable-body-row {
border-top: 1px solid #2f3646; }
.ngx-datatable.dark .datatable-body .datatable-body-row .datatable-body-cell {
text-align: left;
padding: .5rem 1.2rem;
vertical-align: top; }
.ngx-datatable.dark .datatable-body .datatable-body-row:hover {
background: #171b24;
transition-property: background;
transition-duration: .3s;
transition-timing-function: linear; }
.ngx-datatable.dark .datatable-body .datatable-body-row:focus {
background-color: #232837; }
.ngx-datatable.dark .datatable-body .datatable-body-row.active {
background-color: #1483ff;
color: #FFF; }
.ngx-datatable.dark .datatable-footer {
background: #232837;
color: #72809b;
margin-top: -1px; }
.ngx-datatable.dark .datatable-footer .page-count {
line-height: 50px;
height: 50px;
padding: 0 1.2rem; }
.ngx-datatable.dark .datatable-footer .datatable-pager {
margin: 0 10px;
vertical-align: top; }
.ngx-datatable.dark .datatable-footer .datatable-pager ul li {
margin: 10px 0px; }
.ngx-datatable.dark .datatable-footer .datatable-pager ul li:not(.disabled).active a,
.ngx-datatable.dark .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
background-color: #455066;
font-weight: bold; }
.ngx-datatable.dark .datatable-footer .datatable-pager a {
height: 22px;
min-width: 24px;
line-height: 22px;
padding: 0;
border-radius: 3px;
margin: 0 3px;
text-align: center;
vertical-align: top;
text-decoration: none;
vertical-align: bottom;
color: #72809b; }
.ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-left,
.ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-skip,
.ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-right,
.ngx-datatable.dark .datatable-footer .datatable-pager .datatable-icon-prev {
font-size: 18px;
line-height: 27px;
padding: 0 3px; }
@charset "UTF-8";
@font-face {
font-family: "data-table";
src:url("fonts/data-table.eot");
src:url("fonts/data-table.eot?#iefix") format("embedded-opentype"),
url("fonts/data-table.woff") format("woff"),
url("fonts/data-table.ttf") format("truetype"),
url("fonts/data-table.svg#data-table") format("svg");
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: "data-table" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="datatable-icon-"]:before,
[class*=" datatable-icon-"]:before {
font-family: "data-table" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.datatable-icon-filter:before {
content: "\62";
}
.datatable-icon-collapse:before {
content: "\61";
}
.datatable-icon-expand:before {
content: "\63";
}
.datatable-icon-close:before {
content: "\64";
}
.datatable-icon-up:before {
content: "\65";
}
.datatable-icon-down:before {
content: "\66";
}
.datatable-icon-sort:before {
content: "\67";
}
.datatable-icon-done:before {
content: "\68";
}
.datatable-icon-done-all:before {
content: "\69";
}
.datatable-icon-search:before {
content: "\6a";
}
.datatable-icon-pin:before {
content: "\6b";
}
.datatable-icon-add:before {
content: "\6d";
}
.datatable-icon-left:before {
content: "\6f";
}
.datatable-icon-right:before {
content: "\70";
}
.datatable-icon-skip:before {
content: "\71";
}
.datatable-icon-prev:before {
content: "\72";
}
body {
font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
text-align: left;
font-style: normal;
font-weight: 300;
font-size: 16px;
line-height: 2rem;
letter-spacing: 0.01rem;
color: #212121;
background-color: #fafafa;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
margin: 0;
position: relative;
}
.ngx-datatable,
.info {
text-align: left;
width: 75%;
margin: 0 auto;
}
.info {
box-sizing: border-box;
padding: 0 1em;
border: solid 1px #ccc;
background: white;
font-size: .8em;
margin-bottom: 1em;
}
.ngx-datatable.scroll-vertical {
height: 70vh;
}
.selected-column {
background: #FFF;
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
}
.group {
position: relative;
margin-bottom: 45px;
}
input[type=text] {
font-size: 14px;
display: block;
background: transparent;
width: 100%;
border: none;
border-bottom: 1px solid #5264AE;
}
textarea {
font-size: 14px;
font-family: sans-serif;
display: block;
background: transparent;
width: 100%;
border: none;
border-bottom: 1px solid #5264AE;
resize: vertical;
}
input:focus {
outline: none;
}
a {
color: grey;
text-decoration: none;
}
.expander-btn {
margin-top:8px;
display:block;
}
h3 {
background: #1f89ff;
margin: 0 0 30px 0;
color: #FFF;
text-align: left;
padding: 10px;
overflow: hidden;
height: 32px;
}
h3 a {
color: #ccc;
}
h3 small {
margin-left: 10px;
font-size: .8rem;
}
.fullscreen {
position: absolute !important;
height: auto !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}
.selection-cell .datatable-body-cell.active{
background: #0829e0 !important;
color: #FFF !important;
}
.selected-column {
float: right;
width: 20%;
margin-right: 20px;
text-align: left;
}
.selected-column h4 {
text-align: center;
margin: 10px 0 0 0;
padding: 0;
}
ul, li {
padding:0;
margin:0;
list-style:none;
}
ul {
margin: 10px;
}
li {
padding: 3px 5px;
}
nav {
background: #FFF;
z-index: 99;
top:0;
left:0;
height: 100%;
width: 200px;
position: absolute;
min-height: 1700px;
font-size:14px;
box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
}
nav ul {
margin: 0 8px !important;
}
nav li {
padding: 0;
}
nav h3 {
font-size: 14px;
margin:0 0 10px 0;
}
nav h4 {
margin: 7px 0 0 0;
}
nav h4 a {
color:#000;
}
content {
margin-left: 200px;
min-height: 100vh;
display:block;
position: relative;
padding-bottom: 20px;
}
content h3 {
padding-left: 35px;
}
.main-ul {
margin-left: 15px !important;
display: block;
}
.github-button-wrap {
position: absolute;
top: 10px;
right: 10px;
}
nav h3 small{
font-size: .7rem;
display: inline-block;
margin-left: 0;
}
select {
width: 100%;
height: 30px;
margin: 5px 0;
}
.age-is-ten {
background: #ffc91f;
}
.is-gender {
background: blue;
color: white;
}
.is-female {
background: pink;
}
.dark {
background: #181B24;
}
.dark nav {
background: #232837;
}
.dark nav a {
color:#fff;
}
.dark nav h4 {
color: #72809b;
}
.expectedpayment + label:before {
border: 1px solid #7f83a2;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 16px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 16px;
}
.expectedpayment2 + label:before {
border: 1px solid #7f83a2;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 16px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 16px;
}
.expectedpayment3 + label:before {
border: 1px solid #7f83a2;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 16px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 16px;
}
.expectedpayment:checked + label:before{
color: #EEE;
content: "\2713";
text-align: center;
font-weight: bold;
background-color:#66bb6a;
}
.expectedpayment2:checked + label:before{
color: #EEE;
content: "\2716";
text-align: center;
font-weight: bold;
background-color: #ff1744;
}
.expectedpayment3:checked + label:before {
color: #EEE;
content: "\003F";
text-align: center;
font-weight: bold;
background-color: #ffeb3b;
}