default.assets.wondergem.stylesheets.tables.scss Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of sirius-web Show documentation

Provides a modern and scalable web server as SIRIUS module

There is a newer version: 22.2.3

/*
 * Made with all the love in the world
 * by scireum in Remshalden, Germany
 *
 * Copyright by scireum GmbH
 * http://www.scireum.de - [email protected]
 */

//
// Tables
// --------------------------------------------------

// Tables Variables
// -------------------------
$tableBackground: $white;
$tableBorder: $borderColor;


// BASE TABLES
// -----------------
table {
  border: 1px solid $tableBorder;
  background-color: $tableBackground;
}

// BASELINE STYLES
// ---------------
th,
td {
  border-bottom: 1px solid $tableBorder;
}

td {
  font-size: 85%;
}

td:first-child,
td.title {
  font-size: 100%;
}

.table > thead > tr > th {
  font-weight: 600;
  border-bottom: 1px solid #ededed;
  vertical-align: top;
}

// Table foot
tfoot {
  background-color: #e6e6e6;
}

// TABLE BACKGROUNDS
// -----------------
.table > tbody > tr {
  &.success > td {
    background-color: #dcf0ce;
  }
  &.danger > td,
  &.error > td {
    background-color: #f0ced0;
  }
  &.warning > td {
    background-color: #faedbb;
  }
  &.info > td {
    background-color: #d0e5f2;
  }
}

.table-colorized {

  tr > th:first-child {
    width: 10px;
    padding: 0px;
  }

  tr > td:first-child {
    width: 10px;
    padding: 0px;
  }

  tbody > tr {

    // Set colors for first column
    &.default > td:first-child {
      background-color: #b6b7bb;
    }
    &.success > td:first-child {
      background-color: $green;
    }
    &.danger > td:first-child {
      background-color: $red;
    }
    &.warning > td:first-child {
      background-color: $yellow;
    }
    &.info > td:first-child {
      background-color: $blue;
    }

    // Set .link colors
    // Set pre.plain colors
    &.success pre.plain {
      color: $green;
    }
    &.default .link,
    &.default pre.plain {
      color: lighten($gray, 20%);
    }
    &.danger .link,
    &.danger pre.plain {
      color: darken($red, 30%);
    }
    &.warning .link,
    &.warning pre.plain {
      color: darken($yellow, 15%);
    }
    &.info .link,
    &.info pre.plain {
      color: darken($blue, 20%);
    }
  }
}

// reset regular TABLE BACKGROUND colors
.table-colorized > tbody > tr {
  &.success > td,
  &.danger > td,
  &.error > td,
  &.warning > td,
  &.info > td {
    background-color: transparent;
  }
}


// Set Icons in Tables to fixed width to ensure proper spacing and avoid using .fa-fw everywhere
td .fa {
  width: 1.28571429em;
  text-align: center;
}

// Enhance readabilty
tr.info a {
  color: #4a697d;
}

tr.info .muted {
  color: #4a697d;
}

tr.error a {
  color: $errorText;
}

tr.info a.link-danger, tr.error a.link-danger {
  color: #EE5F5B;
}