com.phloxui/styles/component/phlox-component.less

PhloxUI Ng2+ Framework

// 7-column grid
@media (min-width: 768px) {
  .seven-cols .col-lg-1,
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1 {
    width: 100%;
    *width: 100%;
  }
}
@media (min-width: 992px) {
  .seven-cols .col-lg-1,
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}
/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */
@media (min-width: 1200px) {
  .seven-cols .col-lg-1,
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}
/** overide a href style **/
a {
  color: @CLR_BRAND;

  &:focus,
  &:hover {
    color: extract(@CLR_BRAND_HUE, 4);
  }
}
/** remove highlight when click btn from chrome **/
.ua-chrome {
  button:focus {
    outline: 0 !important;
  }
}
/* Default Phlox Component <input> styles */
[class^="phx-"],
[class*=" phx-"] {
  // All <input>s within phx-* components.
  input {
    // <input type="text | password">
    &[type="text"],
    &[type="password"] {
      &.form-control {
        .phlox-transition();
        border-color: @CLR_BORDER_COLOR;
        padding: 0;
        margin: 0;

        &.dirty {
          font-style: italic;
        }

        &.success {
          border-color: @BORDER_COLOR_SUCCESS;
        }

        &.warning {
          border-color: @BORDER_COLOR_WARNING;
        }

        &.error {
          border-color: @BORDER_COLOR_ERROR;
        }
      }
    }
  }

  textarea {
    &.form-control {
      .phlox-transition();
      border-color: @CLR_BORDER_COLOR;
      padding: 0;
      margin: 0;

      &.dirty {
        font-style: italic;
      }

      &.success {
        border-color: @BORDER_COLOR_SUCCESS;
      }

      &.warning {
        border-color: @BORDER_COLOR_WARNING;
      }

      &.error {
        border-color: @BORDER_COLOR_ERROR;
      }
    }
  }

  .help {
    .phlox-transition();
    .FC0L();
    font-style: italic;
    color: @FORM_CONTROL_FONT_COLOR_HELP;
  }

  .validation {
    .phlox-transition();
    .FC0L();
    color: @FORM_CONTROL_FONT_COLOR_NORMAL;

    &.success {
      color: @FORM_CONTROL_FONT_COLOR_SUCCESS;
    }

    &.warning {
      color: @FORM_CONTROL_FONT_COLOR_WARNING;
    }

    &.error {
      color: @FORM_CONTROL_FONT_COLOR_ERROR;
    }
  }
}
/* Default style for help*/
.help {
  display: none;
}

.show-help {
  .help {
    display: block;
  }
}
/* Default "disabled" style */
.disabled {
  .no-select();
  position: relative;
  -moz-filter: @DISABLED_FILTER;
  -ms-filter: @DISABLED_FILTER;
  -o-filter: @DISABLED_FILTER;
  -webkit-filter: @DISABLED_FILTER;
  filter: @DISABLED_FILTER;

  * {
    cursor: default;
  }
  /* Disabled Overlay style */
  > .disabled-overlay {
    .no-select();
    -moz-filter: @DISABLED_FILTER;
    -ms-filter: @DISABLED_FILTER;
    -o-filter: @DISABLED_FILTER;
    -webkit-filter: @DISABLED_FILTER;
    filter: @DISABLED_FILTER;

    &:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 99999;
      background: @DISABLED_OVERLAY_BG;
    }
  }
}

.textCircle {
  border-radius: @TEXT_CIRCLE_RADIUS;
  width: @TEXT_CIRCLE_WIDTH;
  height: @TEXT_CIRCLE_HEIGHT;
  background: extract(@CLR_1, 9);
  border: @TEXT_BORDER_WIDTH solid @CLR_BORDER_COLOR;
  text-align: center;
}
/* view style */
.page-info {
  // width: @APP_PANE_WIDTH - @APP_PANE_HEIGHT;
  height: @APP_PANE_HEIGHT;
  color: @CLR_BRAND_FONT;
  padding-top: 19pt;
  padding-left: 10pt;
  .FC0L();

  &-wrapper {
    // position: absolute;
    // left: 0;
    float: left;
  }
}

.page-action {
  &-wrapper {
    // position: absolute;
    // right: 0;
    float: right;
  }
}

.page-action {
  .nav();
  .navbar-nav();
}

.page-separate {
  width: 2pt;
  height: 30pt;
  margin-top: 12pt;
  border-right: 0.25pt solid rgba(255, 255, 255, 0.5);
}

.action-button-group {
  .nav();
  .navbar-nav();
  padding-top: 0;
  padding-right: 2pt;
}

.view-button-group {
  .nav();
  .navbar-nav();
  padding-top: 0;
}

.phlox-button {
  .phlox-ripple();
  background-color: @CLR_BRAND;
  display: inline-block !important;
  color: extract(@CLR_1, 9);
  margin-left: @PHLOX_BUTTON_MARGIN_LEFT;
  margin-right: @PHLOX_BUTTON_MARGIN_RIGHT;
  width: @PHLOX_BUTTON_WIDTH;
  height: @PHLOX_BUTTON_HEIGHT;
  line-height: @PHLOX_BUTTON_HEIGHT; // same as height
  border-radius: @PHLOX_BUTTON_BORDER_RADIUS;
  cursor: pointer;
}

.down-triangle {
  .FC0();
  color: inherit;
  font-family: "PhloxGlyphicons";

  &:before {
    content: "t";
  }
}

.left-triangle {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-right: 10px solid #000000;
  border-bottom: 5px solid transparent;
}

.right-triangle {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 10px solid #000000;
  border-bottom: 5px solid transparent;
}

.left-angle {
  .FC1();
  color: inherit;
  font-family: "PhloxGlyphicons";

  &:before {
    content: "B";
  }
}

.right-angle {
  .FC1();
  color: inherit;
  font-family: "PhloxGlyphicons";

  &:before {
    content: "C";
  }
}

.up-angle {
  color: inherit;
  font-size: large;

  &:before {
    content: " \002303";
  }
}

.icon-arrow-down {
  font-family: "PhloxGlyphicons";

  &:before {
    content: "k";
  }
}

.down-angle {
  color: inherit;
  font-size: large;

  &:before {
    content: " \002304";
  }
}

.heavy-check-mark {
  color: inherit;
  font-size: large;

  &:before {
    content: " \002714";
  }
}

.cross-icon {
  color: inherit;
  font-weight: bolder;
  cursor: default;
  font-size: 150%;

  &:before {
    content: "\00d7";
  }
}

.list-icon {
  color: inherit;
  font-weight: bolder;
  cursor: default;
  font-size: 150%;

  &:before {
    content: "\002630";
  }
}

/* TAB */
.tab-add-button {
  .phlox-ripple();
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: xx-large;
  padding-top: @TAB_ADD_BUTTON_PADDING_TOP;
  color: @CLR_BRAND;
  font-weight: bolder;
  border-right: @MENU_TOP_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
  cursor: pointer;

  &:before {
    // color: @CLR_BRAND;
    color: extract(@CLR_BRAND_HUE, 3);
    content: "+";
  }
}

.tab-vertical-ellipsis {
  color: inherit;
  font-size: x-large;
  font-weight: bolder;
  cursor: pointer;

  &:before {
    content: "\0022EE";
  }
}

.row-vertical-ellipsis {
  color: inherit;
  font-size: x-large;
  font-weight: bolder;
  cursor: pointer;

  &:before {
    content: "\0022EE";
  }
}

.vertical-ellipsis {
  color: inherit;
  font-size: x-large;
  font-weight: bolder;
  cursor: pointer;

  &:before {
    content: "\0022EE";
  }
}

.circle-bullet {
  &:before {
    content: "•";
  }
}
/* data-form */
data-form {
  display: block;
}

.data-form {
  > .header {
    height: 90pt;
    border-bottom: @MENU_TOP_BORDER_THICKNESS solid @CLR_BORDER_COLOR;

    > .left {
      width: 50%;
      float: left;

      > div {
        width: 100%;
        padding-left: 15pt;
      }

      .title {
        font-size: 16pt;
      }

      .subtitle {
        color: @CLR_BRAND_FONT;
      }
    }

    > .right {
      width: 50%;
      float: left;
      text-align: right;

      > div {
        width: 100%;
        padding-right: 15pt;
      }

      .title {
        color: extract(@CLR_0, 1);
        font-size: 12pt;
      }

      .subtitle {
        color: @CLR_BRAND_FONT;
      }
    }
  }

  > .body {
    color: extract(@CLR_S, 6);
    padding-top: 15pt;

    > .body-container {
      margin: 2% 10%;

      > div {
        padding-bottom: 15pt;
      }
    }
  }
}
/* menu */
phlox-menu {
  display: block;
}

record-data-view-wrapper {
  & + * {
    display: none;
  }

  &.dirty + * {
    font-style: italic;
  }

  &.active + * {
    display: block;
  }
}
/* table record view */
.phlox-table {
  thead > tr > th {
    color: extract(@CLR_S, 6);
    border-bottom: @PHLOX_TABLE_THEAD_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
    text-align: center;
    font-weight: normal;
  }

  thead > tr > th:first-child {
    border-right: @PHLOX_TABLE_THEAD_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
  }

  thead > tr > th:last-child {
    width: 20pt;
  }

  tbody > tr > td:first-child {
    border-right: @PHLOX_TABLE_THEAD_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
    text-align: center;
  }

  tbody > tr > td {
    border-color: @CLR_BRAND_HUE_LEFT;
    border-bottom: @PHLOX_TABLE_THEAD_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
    vertical-align: middle;

    &.center {
      text-align: center;
    }

    &.right {
      text-align: right;
    }

    &.left {
      text-align: left;
    }
  }

  tbody > tr > td:last-child {
    text-align: center;
  }

  tbody > tr:hover {
    background-color: extract(@CLR_1, 7);
  }
}
/* switch */
.table-wrapper {
  display: table;
  height: 100%;
  word-break: break-all;

  &.fluid {
    width: 100%;
  }
}

.table-row-wrapper {
  display: table-row;
}

.table-cell-wrapper {
  display: table-cell;

  &.middle {
    vertical-align: middle;
  }

  &.top {
    vertical-align: top;
  }

  &.bottom {
    vertical-align: bottom;
  }
}

status-exclamation-sign {
  component-popover {
    position: fixed;

    > .component-popover {
      color: black;
      width: 200px;
      height: 100px;
    }
  }
}

.status-exclamation-sign {
  display: inline-block;

  > .textCircle {
    width: @EXCLAMATION_CIRCLE_WIDTH;
    height: @EXCLAMATION_CIRCLE_HEIGHT;
    background: @CLR_BRAND;
    color: extract(@CLR_1, 9);
    border: 0;
  }
}
// phlox app page bar container

.phlox-app-bar-container {
  .phlox-transition();
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 1040;
  display: none;

  .show {
    display: block;
  }
}
// badge for shortcut

.badge {
  &.scService {
    .phlox-transition();
    .phlox-box-shadow(@SC_SERVICE_HINT_SHADOW_HLEN, @SC_SERVICE_HINT_SHADOW_VLEN, @SC_SERVICE_HINT_SHADOW_BLUR, @SC_SERVICE_HINT_SHADOW_SPREAD, @SC_SERVICE_HINT_SHADOW_COLOR, @SC_SERVICE_HINT_SHADOW_OPACITY);
    background-color: @SC_SERVICE_HINT_BRAND_BG;
    color: @CLR_BRAND_FONT;
    font-weight: normal;
    word-wrap: break-word;
    border-radius: @SC_SERVICE_HINT_SHADOW_RADIUS;
    padding: @SC_SERVICE_HINT_TEXT_PADDING;

    &.fadeout {
      opacity: 0;
    }
  }
}
/* animate */
@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
// text blink animate
@keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-o-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-moz-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-webkit-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.animate-flicker {
  -webkit-animation: flickerAnimation 2s infinite;
  -moz-animation: flickerAnimation 2s infinite;
  -o-animation: flickerAnimation 2s infinite;
  animation: flickerAnimation 2s infinite;
}