Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rightscale-design/designkit-datatable
A sass module for datatables used at RightScale
https://github.com/rightscale-design/designkit-datatable
css datatable sass theme
Last synced: 10 days ago
JSON representation
A sass module for datatables used at RightScale
- Host: GitHub
- URL: https://github.com/rightscale-design/designkit-datatable
- Owner: rightscale-design
- License: mit
- Created: 2017-12-04T23:34:20.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-21T00:33:39.000Z (over 6 years ago)
- Last Synced: 2024-10-25T22:45:27.017Z (26 days ago)
- Topics: css, datatable, sass, theme
- Language: CSS
- Size: 73.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# designkit-datatable
1.0.7
A Sass module for datatables used in RightScale apps.
## Install
```
npm i --save designkit-datatable
```
## CSS
```css
.ag-theme-designkit {
position: relative;
}
.ag-theme-designkit .ag-root {
border-width: 0;
}
.ag-theme-designkit.loading {
height: 100%;
}
.ag-theme-designkit .ag-header {
background-color: #fff;
border-bottom: 1px solid #D1D6DC;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.ag-theme-designkit .ag-header .ag-header-cell {
font-size: 11px;
font-weight: 600;
line-height: 28px;
color: #0A83F6;
border-right: 1px solid #eef0f2;
}
.ag-theme-designkit .ag-header .ag-header-cell:focus, .ag-theme-designkit .ag-header .ag-header-cell:hover {
color: #0769c6;
cursor: pointer;
}
.ag-theme-designkit .ag-header .ag-header-cell:first-of-type:focus, .ag-theme-designkit .ag-header .ag-header-cell:first-of-type:hover {
color: #0769c6;
cursor: default;
}
.ag-theme-designkit .ag-header .ag-header-cell.align-right .ag-header-cell-label {
padding: 4px 12px 4px 4px;
}
.ag-theme-designkit .ag-header .ag-header-cell.align-right .ag-header-cell-menu-button {
float: left;
margin-left: 16px;
}
.ag-theme-designkit .ag-header .ag-header-cell .ag-header-cell-resize {
transition: background-color 250ms ease;
}
.ag-theme-designkit .ag-header .ag-header-cell .ag-header-cell-resize:hover {
background-color: #6db5fa;
}
.ag-theme-designkit .ag-header .ag-header-cell .ag-header-cell-resize:active, .ag-theme-designkit .ag-header .ag-header-cell .ag-header-cell-resize:focus {
background-color: #3c9cf8;
}
.ag-theme-designkit .ag-header .ag-header-cell .ag-header-cell-menu-button {
float: right;
margin-right: 16px;
}
.ag-theme-designkit .ag-header .ag-header-cell-label {
position: relative;
padding: 4px 20px;
}
.ag-theme-designkit .ag-header .ag-icon-none {
vertical-align: middle;
background-size: 6px 9.8px;
background-position-y: 1px;
opacity: 1;
}
.ag-theme-designkit .ag-header .ag-icon-asc {
background-position: 2px 3px;
background-size: 6px 6px;
opacity: 1;
}
.ag-theme-designkit .ag-header .ag-icon-desc {
background-position: 2px 7px;
background-size: 6px 6px;
opacity: 1;
}
.ag-theme-designkit .ag-header .ag-icon-menu {
margin-top: 12px;
background-size: 10px;
opacity: 0.6;
}
.ag-theme-designkit .ag-pinned-left-header {
position: relative;
}
.ag-theme-designkit .ag-pinned-left-header:after {
position: absolute;
top: 0;
left: auto;
right: 0;
bottom: 0;
width: 4px;
height: 100%;
content: '';
background-color: rgba(209, 214, 220, 0.3);
}
.ag-theme-designkit .ag-pinned-right-header {
position: relative;
}
.ag-theme-designkit .ag-pinned-right-header:after {
position: absolute;
top: 0;
right: auto;
left: 0;
bottom: 0;
width: 3px;
height: 100%;
content: '';
background-color: rgba(209, 214, 220, 0.3);
}
.ag-theme-designkit .ag-body .ag-cell-not-inline-editing {
padding: 4px 20px;
}
.ag-theme-designkit .ag-body .ag-row {
border-bottom: 1px solid #e2e5e9;
}
.ag-theme-designkit .ag-body .ag-row a.label:hover:focus {
color: #fff;
text-decoration: none;
}
.ag-theme-designkit .ag-body .ag-row.ag-row-hover {
background-color: #FAFAFA;
}
.ag-theme-designkit .ag-body .ag-row:first-of-type {
border-top: 0 none;
}
.ag-theme-designkit .ag-body .ag-row.ag-row-selected .ag-cell {
background: #F4F5F7;
}
.ag-theme-designkit .ag-body .ag-row.ag-row-selected .ag-cell a.label {
text-decoration: none;
}
.ag-theme-designkit .ag-body .ag-cell {
line-height: 24px;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
.ag-theme-designkit .ag-body .ag-cell.ag-cell-no-focus {
border-right: 1px solid #f4f5f6;
}
.ag-theme-designkit .ag-body .ag-cell.ag-cell-not-inline-editing:focus {
outline: none;
}
.ag-theme-designkit .ag-body .ag-cell.checkbox-cell {
padding-right: 0;
}
.ag-theme-designkit .ag-body .ag-cell.savings-cell {
text-align: right;
}
.ag-theme-designkit .ag-body .ag-cell.actions-cell {
padding-right: 24px;
text-align: right;
}
.ag-theme-designkit .ag-body .ag-group-expanded span,
.ag-theme-designkit .ag-body .ag-group-contracted span {
position: relative;
top: 2px;
margin-right: 12px;
}
.ag-theme-designkit .ag-body .ag-row .ag-row-group-indent-1 {
padding-left: 2.4rem;
}
.ag-theme-designkit .ag-body .ag-row .ag-row-group-indent-2 {
padding-left: 4.8rem;
}
.ag-theme-designkit .ag-body .ag-row .ag-row-group-indent-3 {
padding-left: 7.2rem;
}
.ag-theme-designkit .ag-body .ag-row .ag-row-group-indent-4 {
padding-left: 9.6rem;
}
.ag-theme-designkit .ag-body .ag-row .ag-row-group-indent-5 {
padding-left: 12rem;
}
.ag-theme-designkit .ag-body .ag-row .ag-row-group-indent-6 {
padding-left: 14.4rem;
}
.ag-theme-designkit .ag-body .ag-row .ag-row-group-indent-7 {
padding-left: 16.8rem;
}
.ag-theme-designkit .ag-body .ag-row .ag-row-group-indent-8 {
padding-left: 19.2rem;
}
.ag-theme-designkit .ag-body .ag-row .ag-row-group-indent-9 {
padding-left: 21.6rem;
}
.ag-theme-designkit .ag-body .ag-icon-expanded {
background-size: contain;
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
-webkit-transform-origin: center center;
transform-origin: center center;
}
.ag-theme-designkit .ag-body .ag-icon-contracted {
background-size: contain;
-webkit-transform: rotate3d(0, 0, 1, -180deg);
transform: rotate3d(0, 0, 1, -180deg);
-webkit-transform-origin: center center;
transform-origin: center center;
}
.ag-theme-designkit .ag-body .ag-group-child-count {
margin-left: .4rem;
}
.ag-theme-designkit .ag-body .ag-cell-focus {
outline: initial;
box-shadow: 0 0 0 1px #0A83F6 inset;
}
.ag-theme-designkit .ag-body .ag-cell-range-selected-1:not(.ag-cell-focus) {
color: #fff;
background-color: rgba(35, 144, 247, 0.9);
}
.ag-theme-designkit .ag-body .ag-pinned-left-cols-container {
position: relative;
}
.ag-theme-designkit .ag-body .ag-pinned-left-cols-container:after {
position: absolute;
top: 0;
right: 0;
left: auto;
bottom: 0;
width: 4px;
height: 100%;
content: '';
background-color: rgba(209, 214, 220, 0.3);
}
.ag-theme-designkit .ag-body .ag-pinned-right-cols-container {
position: relative;
}
.ag-theme-designkit .ag-body .ag-pinned-right-cols-container:after {
position: absolute;
top: 0;
right: auto;
left: 0;
bottom: 0;
width: 3px;
height: 100%;
content: '';
background-color: rgba(209, 214, 220, 0.3);
}
.ag-theme-designkit .ag-header-cell-moving {
background-color: rgba(226, 229, 233, 0.35);
}
.ag-theme-designkit .ag-menu {
z-index: 5;
padding: 4px;
padding: 0;
background: #fff;
border: 1px solid #D1D6DC;
border-bottom: 1px solid #c8ced5;
border-radius: 2px;
box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);
}
.ag-theme-designkit .ag-menu .ag-tab-header {
width: 100%;
min-width: 220px;
background-color: #f4f5f7;
box-shadow: 0 -1px 0 0 #D1D6DC inset;
}
.ag-theme-designkit .ag-menu .ag-tab-header .ag-tab {
display: inline-block;
height: 16px;
box-sizing: initial;
padding: 4px 8px;
margin: 4px;
margin-bottom: 0;
text-align: center;
vertical-align: middle;
border: 1px solid transparent;
border-bottom: 2px solid transparent;
}
.ag-theme-designkit .ag-menu .ag-tab-header .ag-tab.ag-tab-selected {
background-color: #fff;
border-color: #D1D6DC;
border-bottom: 2px solid #fff !important;
}
.ag-theme-designkit .ag-menu .ag-tab-header .ag-tab .ag-icon-menu {
background-size: 10px;
}
.ag-theme-designkit .ag-menu .ag-tab-body {
padding: 4px 0;
}
.ag-theme-designkit .ag-menu .ag-tab-body .ag-menu-list {
margin-top: 0;
margin-bottom: 0;
}
.ag-theme-designkit .ag-menu .ag-menu-list {
display: table;
width: 100%;
margin-top: 4px;
margin-bottom: 4px;
cursor: default;
border-collapse: collapse;
}
.ag-theme-designkit .ag-menu .ag-menu-option {
display: table-row;
padding-right: 8px;
padding-left: 8px;
line-height: 24px;
}
.ag-theme-designkit .ag-menu .ag-menu-option > span {
display: table-cell;
vertical-align: middle;
}
.ag-theme-designkit .ag-menu .ag-menu-option .ag-menu-option-icon {
padding-right: 4px;
padding-left: 4px;
}
.ag-theme-designkit .ag-menu .ag-menu-option .ag-menu-option-shortcut {
padding-left: 8px;
}
.ag-theme-designkit .ag-menu .ag-menu-option .ag-menu-option-popup-pointer {
width: 20px;
}
.ag-theme-designkit .ag-menu .ag-menu-option .ag-menu-option-text {
color: #0A83F6;
}
.ag-theme-designkit .ag-menu .ag-menu-separator {
border-top: 0 none;
}
.ag-theme-designkit .ag-menu .ag-menu-separator > span {
height: 8px;
background-image: url("data:image/svg+xml;utf8, ");
}
.ag-theme-designkit .ag-menu .ag-menu-separator-cell {
display: table-cell;
}
.ag-theme-designkit .ag-menu .ag-menu-option-active {
background: #F4F5F7;
}
.ag-theme-designkit .ag-column-select-panel .ag-column-select-column .ag-column-select-checkbox {
margin-right: 4px;
vertical-align: middle;
}
.ag-theme-designkit .ag-tool-panel {
background-color: #fff;
}
.ag-theme-designkit .ag-tool-panel .ag-column-panel {
border-left: 1px solid #D1D6DC;
}
.ag-theme-designkit .ag-tool-panel .ag-column-select-panel {
margin-top: 10px;
}
.ag-theme-designkit .ag-tool-panel .ag-pivot-mode {
height: 25px;
box-sizing: border-box;
line-height: 25px;
border-bottom: 1px solid #e2e5e9;
}
.ag-theme-designkit .ag-tool-panel .ag-pivot-mode .ag-pivot-mode-select {
margin-left: 4px;
}
.ag-theme-designkit .ag-tool-panel .ag-column-drop {
padding: 4px 0;
padding-bottom: 8px;
overflow: auto;
clear: both;
border-bottom: 1px solid #e2e5e9;
}
.ag-theme-designkit .ag-tool-panel .ag-column-drop .ag-column-drop-title {
float: left;
width: calc(100% - 20px);
height: 20px;
clear: right;
line-height: 20px;
}
.ag-theme-designkit .ag-tool-panel .ag-column-drop .ag-column-drop-empty-message {
padding-right: 4px;
padding-left: 21px;
clear: both;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1;
color: rgba(118, 137, 154, 0.8);
}
.ag-theme-designkit .ag-tool-panel .ag-column-drop .ag-icon {
float: left;
height: 20px;
margin: 0 4px;
}
.ag-theme-designkit .ag-tool-panel .ag-side-buttons {
display: none;
width: 0;
}
.ag-theme-designkit .ag-icon-menu {
background-image: url("data:image/svg+xml;utf8,");
}
.ag-theme-designkit .ag-icon-none {
background-image: url("data:image/svg+xml;utf8,");
}
.ag-theme-designkit .ag-icon-asc {
background-image: url("data:image/svg+xml;utf8,");
}
.ag-theme-designkit .ag-icon-desc {
background-image: url("data:image/svg+xml;utf8,");
}
.ag-theme-designkit .ag-icon-expanded {
background-image: url("data:image/svg+xml;utf8,Path 5");
}
.ag-theme-designkit .ag-icon-contracted {
background-image: url("data:image/svg+xml;utf8,Path 5");
}
.ag-theme-designkit .ag-icon-columns {
background-image: url("data:image/svg+xml;utf8,");
}
.ag-theme-designkit .ag-icon-pin {
background-image: url("data:image/svg+xml;utf8,");
}
.ag-theme-designkit .ag-icon-small-right {
background-image: url("data:image/svg+xml;utf8,");
}
.ag-theme-designkit .ag-icon-tick {
background-image: url("data:image/svg+xml;utf8,");
}
.ag-theme-designkit .ag-icon-arrows {
background-image: url("data:image/svg+xml;utf8,");
}
.ag-theme-designkit .ag-icon-checkbox-unchecked {
background-image: url("data:image/svg+xml;utf8,");
}
.ag-theme-designkit .ag-icon-checkbox-checked {
background-image: url("data:image/svg+xml;utf8,");
}
.ag-theme-designkit .ag-icon-checkbox-unchecked-readonly {
background-image: url("data:image/svg+xml;utf8,");
}
.ag-theme-designkit .ag-icon-checkbox-checked-readonly {
background-image: url("data:image/svg+xml;utf8,");
}
.ag-theme-designkit .ag-icon-group {
background-image: url("data:image/svg+xml;utf8,");
}
.ag-theme-designkit .ag-icon-aggregation {
background-image: url("data:image/svg+xml;utf8,");
}
.ag-theme-designkit .ag-icon-pivot {
background-image: url("data:image/svg+xml;utf8,");
}
.ag-theme-designkit .ag-icon-filter {
background-image: url("data:image/svg+xml;utf8,");
}
.ag-dnd-ghost.ag-fresh {
z-index: 5;
height: 25px !important;
padding: 4px;
padding: 0 8px;
margin: 0;
font: 700 12px "Helvetica Neue", sans-serif;
line-height: 25px;
color: #57626C;
background: #f4f5f6;
border: 1px solid #D1D6DC;
border-bottom: 1px solid #c8ced5;
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-webkit-transform: translatey(8px);
transform: translatey(8px);
}
.ag-dnd-ghost.ag-fresh span,
.ag-dnd-ghost.ag-fresh div {
float: left;
height: 100%;
padding: 0;
margin: 0;
}
.ag-dnd-ghost.ag-fresh .ag-dnd-ghost-icon {
display: inline-block;
float: left;
padding: 2px;
margin-right: 4px;
opacity: 1;
}
.ag-dnd-ghost.ag-fresh .ag-dnd-ghost-icon .ag-icon-arrows {
background: transparent url("data:image/svg+xml;utf8,") center no-repeat;
background-size: 12px 12px;
}
.ag-dnd-ghost.ag-fresh .ag-dnd-ghost-icon .ag-icon-pin {
background: url("data:image/svg+xml;utf8,") center no-repeat;
background-size: 12px 12px;
}
.ag-dnd-ghost.ag-fresh .ag-dnd-ghost-icon .ag-icon-eye-slash {
background: transparent url("data:image/svg+xml;utf8,") center no-repeat;
background-size: 12px 12px;
}
.ag-dnd-ghost.ag-fresh .ag-dnd-ghost-icon .ag-icon-right {
background: transparent url("data:image/svg+xml;utf8,") center no-repeat;
background-size: 12px 12px;
}
```
## Author
Jason Melgoza
## License
MIT