@adobe/coral-spectrum/coral-component-columnview/src/styles/index.css

Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns.

/**
 * Copyright 2019 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
._coral-AssetList {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}
._coral-AssetList-item {
  position: relative;

  display: -ms-flexbox;

  display: flex;
  box-sizing: border-box;
  -ms-flex-align: center;
      align-items: center;

  width: 272px;
  height: 40px;

  padding: 0 16px 0 16px;
  margin: 0 0 4px 0;

  border-radius: 4px;

  transition: background-color 130ms ease-in-out;

  font-size: 14px;
  font-weight: 400;
  font-style: normal;

  cursor: pointer;

  outline: none;
}
._coral-AssetList-item::before {
    content: '';

    position: absolute;
    left: 0;
    right: 0;

    height: 40px;

    background-color: transparent;

    border-radius: 4px;
  }
._coral-AssetList-item.is-selectable ._coral-Checkbox, ._coral-AssetList-item.is-selected ._coral-Checkbox, ._coral-AssetList-item:hover ._coral-Checkbox, ._coral-AssetList-item:focus ._coral-Checkbox {
      display: -ms-inline-flexbox;
      display: inline-flex;
    }
._coral-AssetList-item.is-branch ._coral-AssetList-itemChildIndicator {
      display: block;
    }
._coral-AssetList-item ._coral-AssetList-itemThumbnail {
    border-style: none;

    width: 24px;
    height: 24px;
    margin-left: 8px;
    vertical-align: middle;
  }
._coral-AssetList-itemSelector {
  display: none;
  margin: 0;
}
._coral-AssetList-itemChildIndicator {
  display: none;
  transition: transform ease 130ms;
}
._coral-AssetList-itemLabel {
  -ms-flex: 1;
      flex: 1;
  padding-left: 8px;

  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.coral--large ._coral-AssetList-item {

  width: 272px;
  height: 40px;

  padding: 0 16px 0 16px;
  margin: 0 0 4px 0;

  border-radius: 4px;

  transition: background-color 130ms ease-in-out;

  font-size: 17px;
  font-weight: 400;
}
.coral--large ._coral-AssetList-item::before {

    height: 40px;

    border-radius: 4px;
  }
.coral--large ._coral-AssetList-item ._coral-AssetList-itemThumbnail {

    width: 24px;
    height: 24px;
    margin-left: 8px;
  }
.coral--large ._coral-AssetList-itemSelector {
  margin: 0;
}
.coral--large ._coral-AssetList-itemChildIndicator {
  transition: transform ease 130ms;
}
.coral--large ._coral-AssetList-itemLabel {
  padding-left: 8px;
}

.coral--light ._coral-AssetList-item:hover {
    background-color: rgb(234, 234, 234);
  }
.coral--light ._coral-AssetList-item:focus.focus-ring,
.coral--light ._coral-AssetList-item:focus.is-focused {
      background-color: rgb(234, 234, 234);
    }
.coral--light ._coral-AssetList-item:focus.focus-ring::before,
.coral--light ._coral-AssetList-item:focus.is-focused::before {
        box-shadow: 0px 0px 0px 2px rgb(38, 128, 235) inset;
      }
.coral--light ._coral-AssetList-item.is-navigated {
    background-color: rgb(225, 225, 225);
  }
.coral--light ._coral-AssetList-item.is-navigated:hover,
.coral--light ._coral-AssetList-item.is-navigated:focus {
      background-color: rgb(225, 225, 225);
    }
.coral--light ._coral-AssetList-item.is-selected {
    background-color: rgba(20,115,230,0.1);
  }
.coral--light ._coral-AssetList-item.is-selected:hover,
.coral--light ._coral-AssetList-item.is-selected:focus {
      background-color: rgba(20,115,230,0.2);
    }

.coral--lightest ._coral-AssetList-item:hover {
    background-color: rgb(244, 244, 244);
  }
.coral--lightest ._coral-AssetList-item:focus.focus-ring,
.coral--lightest ._coral-AssetList-item:focus.is-focused {
      background-color: rgb(244, 244, 244);
    }
.coral--lightest ._coral-AssetList-item:focus.focus-ring::before,
.coral--lightest ._coral-AssetList-item:focus.is-focused::before {
        box-shadow: 0px 0px 0px 2px rgb(55, 142, 240) inset;
      }
.coral--lightest ._coral-AssetList-item.is-navigated {
    background-color: rgb(234, 234, 234);
  }
.coral--lightest ._coral-AssetList-item.is-navigated:hover,
.coral--lightest ._coral-AssetList-item.is-navigated:focus {
      background-color: rgb(234, 234, 234);
    }
.coral--lightest ._coral-AssetList-item.is-selected {
    background-color: rgba(38,128,235,0.1);
  }
.coral--lightest ._coral-AssetList-item.is-selected:hover,
.coral--lightest ._coral-AssetList-item.is-selected:focus {
      background-color: rgba(38,128,235,0.2);
    }

.coral--dark ._coral-AssetList-item:hover {
    background-color: rgb(62, 62, 62);
  }
.coral--dark ._coral-AssetList-item:focus.focus-ring,
.coral--dark ._coral-AssetList-item:focus.is-focused {
      background-color: rgb(62, 62, 62);
    }
.coral--dark ._coral-AssetList-item:focus.focus-ring::before,
.coral--dark ._coral-AssetList-item:focus.is-focused::before {
        box-shadow: 0px 0px 0px 2px rgb(38, 128, 235) inset;
      }
.coral--dark ._coral-AssetList-item.is-navigated {
    background-color: rgb(74, 74, 74);
  }
.coral--dark ._coral-AssetList-item.is-navigated:hover,
.coral--dark ._coral-AssetList-item.is-navigated:focus {
      background-color: rgb(74, 74, 74);
    }
.coral--dark ._coral-AssetList-item.is-selected {
    background-color: rgba(55,142,240,0.1);
  }
.coral--dark ._coral-AssetList-item.is-selected:hover,
.coral--dark ._coral-AssetList-item.is-selected:focus {
      background-color: rgba(55,142,240,0.2);
    }

.coral--darkest ._coral-AssetList-item:hover {
    background-color: rgb(44, 44, 44);
  }
.coral--darkest ._coral-AssetList-item:focus.focus-ring,
.coral--darkest ._coral-AssetList-item:focus.is-focused {
      background-color: rgb(44, 44, 44);
    }
.coral--darkest ._coral-AssetList-item:focus.focus-ring::before,
.coral--darkest ._coral-AssetList-item:focus.is-focused::before {
        box-shadow: 0px 0px 0px 2px rgb(20, 115, 230) inset;
      }
.coral--darkest ._coral-AssetList-item.is-navigated {
    background-color: rgb(57, 57, 57);
  }
.coral--darkest ._coral-AssetList-item.is-navigated:hover,
.coral--darkest ._coral-AssetList-item.is-navigated:focus {
      background-color: rgb(57, 57, 57);
    }
.coral--darkest ._coral-AssetList-item.is-selected {
    background-color: rgba(38,128,235,0.1);
  }
.coral--darkest ._coral-AssetList-item.is-selected:hover,
.coral--darkest ._coral-AssetList-item.is-selected:focus {
      background-color: rgba(38,128,235,0.2);
    }

._coral-MillerColumns {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 8px 0;
}
._coral-MillerColumns-item {
  display: inline-block;
  width: 272px;
  vertical-align: top;
  outline: none;
  margin: 0;
  padding: 0;
  margin-right: 8px;
  overflow: auto;
  height: 100%;
}
._coral-MillerColumns-item:first-child {
    margin-left: 8px;
  }

._coral-MillerColumns {
  display: block;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  outline: none;
  box-sizing: border-box;
}
._coral-MillerColumns-item.is-collapsing {
  transition: width 190ms cubic-bezier(.45, 0, .40, 1);
}
._coral-AssetList-item:not(.is-selectable) [coral-columnview-itemselect] {
  display: none;
}
._coral-AssetList-item.is-selectable coral-checkbox[coral-columnview-itemselect] {
  margin-right: 0;
}
._coral-AssetList-item [coral-interactive] {
  position: relative;
  z-index: 1;
}
._coral-AssetList-itemThumbnail {
  text-align: center;
}
._coral-AssetList-itemThumbnail > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._coral-AssetList-itemThumbnail > coral-icon {
  vertical-align: middle;
}
@media (max-width: 320px) {
  ._coral-AssetList-item {
    width: 100vw;
  }
}
coral-columnview-preview._coral-MillerColumns-item {
  padding-bottom: 2px;
}
coral-columnview-preview-asset {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 13px;
  margin-bottom: 15px;
  min-height: 160px;
}
coral-columnview-preview-asset > coral-icon {
  margin-top: 62px;
  margin-bottom: 62px;
}
coral-columnview-preview-asset > img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
coral-columnview-preview-label,
coral-columnview-preview-value {
  display: block;
}
coral-columnview-preview-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  width: 50%;
  padding-right: 12px;
  text-align: right;
  float: left;
  font-weight: bold;
}
coral-columnview-preview-value {
  overflow: auto;
  white-space: normal;
  padding-left: 12px;
  max-width: 150px;
}
coral-columnview-preview-value > coral-icon {
  margin-right: 5px;
}
coral-columnview-preview-value:focus {
  outline: 0;
}
coral-columnview-preview-value:focus.focus-ring {
  margin-bottom: -2px;
  border-bottom-style: solid;
  border-bottom-width: 2px;
}
coral-columnview-preview-separator {
  display: block;
  height: 15px;
}
coral-columnview-column-content,
coral-columnview-preview-content {
  display: block;
  height: 100%;
  overflow-y: auto;
}
coral-columnview-preview-content.coral-Body--small {
  margin-bottom: 0;
  padding-bottom: 2px;
}
[coral-columnview-itemselect] ._coral-Checkbox-input {
  z-index: auto;
}
@media (max-width: 320px) {
  ._coral-MillerColumns {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  ._coral-MillerColumns-item {
    width: 100vw;
    scroll-snap-align: start;
  }
}
.coral--light coral-columnview-preview-value:focus.focus-ring {
  border-color: rgb(38, 128, 235);
}
.coral--lightest coral-columnview-preview-value:focus.focus-ring {
  border-color: rgb(55, 142, 240);
}
.coral--dark coral-columnview-preview-value:focus.focus-ring {
  border-color: rgb(38, 128, 235);
}
.coral--darkest coral-columnview-preview-value:focus.focus-ring {
  border-color: rgb(20, 115, 230);
}