amazeui/less/panel.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:                     Panel
//
// Description:              Define style for panel
//
// Component:                `.am-panel`
//
// Sub-objects:              `.am-thumbnail-caption`
//
// Modifiers:                ``
//
// =============================================================================


// Panel mixin
// =============================================================================

.panel-variant(@border; @hd-text-color; @hd-bg-color; @hd-border) {
  border-color: @border;

  & > .@{ns}panel-hd {
    color: @hd-text-color;
    background-color: @hd-bg-color;
    border-color: @hd-border;

    + .@{ns}panel-collapse > .@{ns}panel-bd {
      border-top-color: @border;
    }
  }

  & > .@{ns}panel-footer {
    + .@{ns}panel-collapse > .@{ns}panel-bd {
      border-bottom-color: @border;
    }
  }
}


/* ==========================================================================
   Component: Panel
 ============================================================================ */

.@{ns}panel {
  margin-bottom: 20px;
  background-color: @panel-bg;
  border: 1px solid transparent;
  border-radius: @panel-border-radius;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  .hook-panel;
}


/* Panel header */

.@{ns}panel-hd {
  padding: @panel-hd-padding;
  border-bottom: 1px solid transparent;
  .border-top-radius(@panel-border-radius);
  .hook-panel-hd;
}


/* Panel content */

.@{ns}panel-bd {
  padding: @panel-bd-padding;
  .hook-panel-bd;
}

// Panel hds(h1 - h6)
.@{ns}panel-title {
  margin: 0;
  font-size: 100%;
  color: inherit;

  > a {
    color: inherit;
  }
}


/* Panel footer */

.@{ns}panel-footer {
  padding: @panel-footer-padding;
  background-color: @panel-footer-bg;
  border-top: 1px solid @panel-inner-border;
  .border-bottom-radius(@panel-border-radius);
  .hook-panel-footer;
}


// Modifiers
// =============================================================================

.@{ns}panel-default {
  .panel-variant(@panel-default-bd; @panel-default-text; @panel-default-hd-bg; @panel-default-bd);
  .hook-panel-default;
}

.@{ns}panel-primary {
  .panel-variant(@panel-primary-bd; @panel-primary-text; @panel-primary-hd-bg; @panel-primary-bd);
  .hook-panel-primary;
}

.@{ns}panel-secondary {
  .panel-variant(@panel-secondary-bd; @panel-secondary-text; @panel-secondary-hd-bg; @panel-secondary-bd);
  .hook-panel-secondary;
}

.@{ns}panel-success {
  .panel-variant(@panel-success-bd; @panel-success-text; @panel-success-hd-bg; @panel-success-bd);
  .hook-panel-success;
}

.@{ns}panel-warning {
  .panel-variant(@panel-warning-bd; @panel-warning-text; @panel-warning-hd-bg; @panel-warning-bd);
  .hook-panel-warning;
}

.@{ns}panel-danger {
  .panel-variant(@panel-danger-bd; @panel-danger-text; @panel-danger-hd-bg; @panel-danger-bd);
  .hook-panel-danger;
}


// Table in panel
// A non-bordered `.@{ns}table` in a panel
// =============================================================================

.@{ns}panel {
  > .@{ns}table {
    margin-bottom: 0;
  }

  // Border top radius for first one
  > .@{ns}table:first-child {
    .border-top-radius(@panel-border-radius);

    > thead:first-child,
    > tbody:first-child {
      > tr:first-child {
        td:first-child,
        th:first-child {
          border-top-left-radius: (@panel-border-radius);
        }

        td:last-child,
        th:last-child {
          border-top-right-radius: (@panel-border-radius);
        }
      }
    }
  }

  // Border bottom radius for last one
  > .@{ns}table:last-child {
    .border-bottom-radius(@panel-border-radius);

    > tbody:last-child,
    > tfoot:last-child {
      > tr:last-child {
        td:first-child,
        th:first-child {
          border-bottom-left-radius: (@panel-border-radius);
        }

        td:last-child,
        th:last-child {
          border-bottom-right-radius: (@panel-border-radius);
        }
      }
    }
  }

  > .@{ns}panel-bd + .@{ns}table {
    border-top: 1px solid @table-border-color;
  }

  > .@{ns}table > tbody:first-child > tr:first-child th,
  > .@{ns}table > tbody:first-child > tr:first-child td {
    border-top: 0;
  }

  > .@{ns}table-bd {
    border: 0;
    > thead,
    > tbody,
    > tfoot {
      > tr {
        > th:first-child,
        > td:first-child {
          border-left: 0;
        }

        > th:last-child,
        > td:last-child {
          border-right: 0;
        }
      }
    }

    > thead,
    > tbody {
      > tr:first-child {
        > td,
        > th {
          border-bottom: 0;
        }
      }
    }

    > tbody,
    > tfoot {
      > tr:last-child {
        > td,
        > th {
          border-bottom: 0;
        }
      }
    }
  }
}


/* Wrap list */

.@{ns}panel {
  > .@{ns}list {
    margin: 0;
    > li > a {
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }

  > .@{ns}list-static li {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


/* Panel group */

.@{ns}panel-group {
  margin-bottom: @line-height-computed;

  .@{ns}panel {
    margin-bottom: 0;
    border-radius: @panel-border-radius;
    + .@{ns}panel {
      margin-top: 6px;
    }
  }

  .@{ns}panel-hd {
    border-bottom: 0;
    + .@{ns}panel-collapse .@{ns}panel-bd {
      border-top: 1px solid @panel-inner-border;
    }
  }

  .@{ns}panel-footer {
    border-top: 0;
    + .@{ns}panel-collapse .@{ns}panel-bd {
      border-bottom: 1px solid @panel-inner-border;
    }
  }
  .hook-panel-group;
}


// Hooks
// =============================================================================

.hook-panel() {}
.hook-panel-hd() {}
.hook-panel-bd() {}
.hook-panel-footer() {}
.hook-panel-group() {}
.hook-panel-default() {}
.hook-panel-primary() {}
.hook-panel-secondary() {}
.hook-panel-success() {}
.hook-panel-warning() {}
.hook-panel-danger() {}