ornamentum/prebuilt-themes/dropdown/dark.theme.css

Angular Toolkit

.ng-dropdown {
  position: relative; }
  .ng-dropdown *::before, .ng-dropdown *::after {
    box-sizing: border-box; }
  .ng-dropdown .ng-dropdown-input-group-btn {
    height: 1.3em;
    position: absolute;
    right: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.3em;
    z-index: 2; }
    .ng-dropdown .ng-dropdown-input-group-btn .ng-dropdown-delete-button {
      background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23d32f2f%22%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3C%2Fsvg%3E");
      background-size: contain;
      color: #d32f2f;
      cursor: pointer;
      height: 100%;
      width: 100%; }
  .ng-dropdown .ng-dropdown-down-arrow {
    background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23cacaca%22%20%20d%3D%22M16.6%208.6L12%2013.2%207.4%208.6%206%2010l6%206%206-6z%22%2F%3E%3C%2Fsvg%3E");
    background-size: contain;
    cursor: pointer;
    height: 1.5em;
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5em;
    z-index: 1; }
  .ng-dropdown .ng-dropdown-loading {
    position: absolute;
    right: 0;
    top: -0.1rem;
    z-index: 10; }
    .ng-dropdown .ng-dropdown-loading .ng-dropdown-loading-animation {
      background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20enable-background%3D%22new%200%200%200%200%22%20version%3D%221.1%22%20viewBox%3D%220%200%20100%20100%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m73%2050c0-12.7-10.3-23-23-23s-23%2010.3-23%2023m3.9%200c0-10.5%208.5-19.1%2019.1-19.1s19.1%208.6%2019.1%2019.1%22%20fill%3D%22%23eaeaea%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20attributeType%3D%22XML%22%20dur%3D%221s%22%20from%3D%220%2050%2050%22%20repeatCount%3D%22indefinite%22%20to%3D%22360%2050%2050%22%20type%3D%22rotate%22%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
      height: 2rem;
      width: 2rem; }
  .ng-dropdown .ng-dropdown-toggle {
    background: #444;
    border: 0.05rem solid #333;
    border-radius: 0;
    color: #cacaca;
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    outline: 0;
    padding: 0.2rem 3rem 0.2rem 0.5rem;
    position: relative;
    text-align: left;
    width: 100%; }
    .ng-dropdown .ng-dropdown-toggle.disabled {
      cursor: not-allowed;
      opacity: 0.6;
      pointer-events: none; }
    .ng-dropdown .ng-dropdown-toggle .ng-dropdown-selected-option,
    .ng-dropdown .ng-dropdown-toggle .ng-dropdown-selected-placeholder {
      font-family: inherit;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .ng-dropdown .ng-dropdown-toggle .ng-dropdown-selected-value {
      background: #333;
      color: #f5f5f5;
      display: inline-block;
      margin: 0 0.2rem 0 0.1rem;
      overflow: hidden;
      padding: 0 0.5rem;
      position: relative;
      text-overflow: ellipsis;
      white-space: nowrap; }
      .ng-dropdown .ng-dropdown-toggle .ng-dropdown-selected-value.ng-dropdown-option-close-enabled {
        padding: 0 1.5rem 0 0.5rem; }
      .ng-dropdown .ng-dropdown-toggle .ng-dropdown-selected-value .ng-dropdown-remove-selected-value {
        background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23d32f2f%22%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3C%2Fsvg%3E");
        background-size: contain;
        content: '';
        cursor: pointer;
        height: 1.2em;
        position: absolute;
        right: 0.3em;
        top: 50%;
        transform: translateY(-50%);
        width: 1.2em; }

.ng-dropdown-search *::before, .ng-dropdown-search *::after {
  box-sizing: border-box; }

.ng-dropdown-search .ng-dropdown-input-group {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 100%; }
  .ng-dropdown-search .ng-dropdown-input-group .ng-dropdown-input-group-addon {
    align-items: center;
    background: #424040;
    border: 0;
    border-radius: 0;
    display: flex;
    margin-bottom: 0;
    padding: 0.25rem 0.5rem;
    text-align: center;
    white-space: nowrap;
    width: 2em; }
    .ng-dropdown-search .ng-dropdown-input-group .ng-dropdown-input-group-addon::after {
      background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23cacaca%22%20d%3D%22M15.5%2014h-.79l-.28-.27C15.41%2012.59%2016%2011.11%2016%209.5%2016%205.91%2013.09%203%209.5%203S3%205.91%203%209.5%205.91%2016%209.5%2016c1.61%200%203.09-.59%204.23-1.57l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z%22%2F%3E%3C%2Fsvg%3E");
      background-size: contain;
      content: '';
      cursor: pointer;
      height: 1.7em;
      left: 0.2em;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 1.7em; }
  .ng-dropdown-search .ng-dropdown-input-group .ng-dropdown-input {
    align-items: center;
    background: #313335;
    border: 0.05rem solid #3e3e3e;
    border-radius: 0;
    color: #cacaca;
    display: flex;
    flex: 1 1 auto;
    margin-bottom: 0;
    outline: none;
    padding: 0.25rem 1.5rem 0.25rem 0.5rem;
    position: relative;
    width: 1%;
    z-index: 2; }

.ng-dropdown-search .ng-dropdown-input-group-btn {
  height: 1.7em;
  position: absolute;
  right: 0.3em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.7em;
  z-index: 2; }
  .ng-dropdown-search .ng-dropdown-input-group-btn .ng-dropdown-delete-button {
    background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23d32f2f%22%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3C%2Fsvg%3E");
    background-size: contain;
    border: 0;
    cursor: pointer;
    height: 100%;
    outline: none;
    width: 100%; }

.ng-dropdown-menu-wrapper {
  background-clip: padding-box;
  background-color: #333;
  border: 0.05rem solid #333;
  border-radius: 0;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  color: #cacaca;
  display: block;
  height: 250px;
  list-style: none;
  margin: 0;
  padding: 1rem;
  position: absolute;
  text-align: left;
  width: 100%;
  z-index: 10001; }
  .ng-dropdown-menu-wrapper *::before, .ng-dropdown-menu-wrapper *::after {
    box-sizing: border-box; }
  .ng-dropdown-menu-wrapper .ng-dropdown-divider {
    border-top: 1px solid #333;
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    padding: 0; }
  .ng-dropdown-menu-wrapper .ng-dropdown-option-container-wrapper {
    -webkit-overflow-scrolling: touch;
    border: 0.07rem solid #222;
    border-radius: 0;
    height: 100%;
    overflow-y: auto; }
    .ng-dropdown-menu-wrapper .ng-dropdown-option-container-wrapper .ng-dropdown-option-container {
      height: 100%;
      list-style-type: none;
      margin: 0;
      padding: 0; }
      .ng-dropdown-menu-wrapper .ng-dropdown-option-container-wrapper .ng-dropdown-option-container .ng-dropdown-no-data {
        align-items: center;
        color: #cacaca;
        display: flex;
        height: 100%;
        justify-content: center; }
        .ng-dropdown-menu-wrapper .ng-dropdown-option-container-wrapper .ng-dropdown-option-container .ng-dropdown-no-data:hover {
          background: none; }
      .ng-dropdown-menu-wrapper .ng-dropdown-option-container-wrapper .ng-dropdown-option-container li {
        background: #444;
        border-bottom: 0.05rem solid #353535;
        cursor: pointer;
        overflow: hidden;
        padding: 0.25rem 0.5rem;
        text-overflow: ellipsis;
        white-space: nowrap; }
        .ng-dropdown-menu-wrapper .ng-dropdown-option-container-wrapper .ng-dropdown-option-container li span {
          color: #cacaca; }
        .ng-dropdown-menu-wrapper .ng-dropdown-option-container-wrapper .ng-dropdown-option-container li:hover {
          background: #555; }
          .ng-dropdown-menu-wrapper .ng-dropdown-option-container-wrapper .ng-dropdown-option-container li:hover span {
            color: #cacaca; }
        .ng-dropdown-menu-wrapper .ng-dropdown-option-container-wrapper .ng-dropdown-option-container li.disabled {
          opacity: 0.6;
          pointer-events: none; }
        .ng-dropdown-menu-wrapper .ng-dropdown-option-container-wrapper .ng-dropdown-option-container li.ng-option-selected {
          background: #5d5c5c; }
          .ng-dropdown-menu-wrapper .ng-dropdown-option-container-wrapper .ng-dropdown-option-container li.ng-option-selected span {
            color: #cacaca; }
          .ng-dropdown-menu-wrapper .ng-dropdown-option-container-wrapper .ng-dropdown-option-container li.ng-option-selected:hover {
            background: #333; }
        .ng-dropdown-menu-wrapper .ng-dropdown-option-container-wrapper .ng-dropdown-option-container li.ng-dropdown-group-heading {
          background: #222;
          border-bottom: 0.05rem solid;
          border-color: #222;
          color: #cacaca;
          cursor: default;
          padding: 0.3rem; }
          .ng-dropdown-menu-wrapper .ng-dropdown-option-container-wrapper .ng-dropdown-option-container li.ng-dropdown-group-heading:hover {
            background: #222;
            border-color: #222;
            color: #cacaca; }
        .ng-dropdown-menu-wrapper .ng-dropdown-option-container-wrapper .ng-dropdown-option-container li span {
          padding-left: 0.5rem; }
  .ng-dropdown-menu-wrapper .ng-dropdown-filter-wrapper {
    height: 3rem; }
    .ng-dropdown-menu-wrapper .ng-dropdown-filter-wrapper + .ng-dropdown-option-container-wrapper {
      height: calc(100% - 3rem); }

/*# sourceMappingURL=dark.theme.css.map */