CartoAssets/src/scss/cdb-components/boxes.scss

// Menu styles
// ----------------------------------------------

/* SG
# Boxes/Dropdown


```
  <div class="CDB-Box-modal">&nbsp;</div>
```
*/

@import '../cdb-utilities/mixins';
@import '../cdb-variables/sizes';
@import '../cdb-variables/colors';

.CDB-Box-modal {
  border: 1px solid $cMainLine;
  border-radius: 4px;
  background: $cWhite;
  box-shadow: 0  $baseSize  $baseSize * 2 0 rgba(0, 0, 0, 0.16);
}

.CDB-Box-modalHeader {
  background: $cSecondaryBackground;
}
.CDB-Box-modalHeaderItem {
  @include display-flex();
  @include align-items(center);
  padding: $baseSize + 4 $baseSize * 2;
  border-bottom: 1px solid $cMainLine;
}

/* SG
# Boxes/Loader
```
<div class="CDB-BoxLoader">
  <ul class="CDB-BoxLoader-inner">
    <li class="CDB-BoxLoader-item">
      <div class="CDB-Shape u-rSpace--m">
        <div class="CDB-Shape-CircleItem is-green is-medium">
          <div class="CDB-Shape-tick is-medium is-green"></div>
        </div>
      </div>
      <div class="CDB-BoxLoader-info">
        <p class="CDB-Text CDB-Size-medium">Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows Query applied. Showing 2,561 rowsQuery applied. Showing 2,561 rows Query applied. Showing 2,561 rows</p>
      </div>
      <div class="CDB-BoxLoader-actions">
        <div class="CDB-Shape">
          <div class="CDB-Shape-threePoints is-small is-blue">
            <div class="CDB-Shape-threePointsItem"></div>
            <div class="CDB-Shape-threePointsItem"></div>
            <div class="CDB-Shape-threePointsItem"></div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="CDB-BoxLoader">
  <ul class="CDB-BoxLoader-inner">
    <li class="CDB-BoxLoader-item">
      <div class="CDB-Shape u-rSpace--m">
        <div class="CDB-Shape-CircleItem is-green is-medium">
          <div class="CDB-Shape-tick is-medium is-green"></div>
        </div>
      </div>
      <div class="CDB-BoxLoader-info">
        <p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p>
      </div>
    </li>
    <li class="CDB-BoxLoader-item is-working">
      <div class="CDB-LoaderIcon u-rSpace--m">
        <div class="CDB-LoaderIcon-item"></div>
      </div>
      <div class="CDB-BoxLoader-info">
        <p class="CDB-Text CDB-Size-medium">Geocoding populated_places_2 (28%)</p>
      </div>
      <div class="CDB-BoxLoader-actions">
        <div class="CDB-Shape">
          <div class="CDB-Shape-close is-blue is-large"></div>
        </div>
      </div>
    </li>
  </ul>
  <ul class="CDB-BoxLoader-inner">
    <li class="CDB-BoxLoader-item">
      <div class="CDB-Shape u-rSpace--m">
        <div class="CDB-Shape-CircleItem is-green is-medium">
          <div class="CDB-Shape-tick is-medium is-green"></div>
        </div>
      </div>
      <div class="CDB-BoxLoader-info">
        <p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p>
      </div>
    </li>
  </ul>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="CDB-BoxLoader">
  <ul class="CDB-BoxLoader-inner">
    <li class="CDB-BoxLoader-item">
      <div class="CDB-Shape u-rSpace--m">
        <div class="CDB-Shape-CircleItem is-red">
          <div class="CDB-Shape-close is-medium is-red"></div>
        </div>
      </div>
      <div class="CDB-BoxLoader-info">
        <p class="CDB-Text CDB-Size-medium">Error in query. Data might be outdated</p>
      </div>
      <div class="CDB-BoxLoader-actions">
        <div class="CDB-Shape">
          <div class="CDB-Shape-threePoints is-small is-blue">
            <div class="CDB-Shape-threePointsItem"></div>
            <div class="CDB-Shape-threePointsItem"></div>
            <div class="CDB-Shape-threePointsItem"></div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
```
*/

.CDB-BoxLoader {
  padding: 0 $baseSize * 3;
  border-top: 1px solid $cMainLine;
}


.CDB-BoxLoader-inner {
  padding: $baseSize + 4 0;
  border-top: 1px solid $cMainLine;
  &:first-child {
    border-top: 0;
  }
}

.CDB-BoxLoader-item {
  @include display-flex();
  padding: $baseSize 0;
  color: $cSecondaryText;
  &.is-working {
    color: $cAltText;
  }
}

.CDB-BoxLoader-info {
  @include flex(1);
  padding-right: $baseSize * 2;
}

/* SG
# Boxes/Info Boxes


```
<div class="CDB-InfoBox">
  <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
  <p class="CDB-Text CDB-Size-medium u-bSpace--m">He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear</p>
  <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
</div>
<br/>
<br/>
<br/>
<div class="CDB-InfoBox is-alert">
  <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
  <p class="CDB-Text CDB-Size-medium u-bSpace--m">He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear</p>
  <ul class="CDB-InfoBox-footer">
    <li class="CDB-InfoBox-footerItem">
      <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
    </li>
    <li class="CDB-InfoBox-footerItem CDB-InfoBox-footerItem--right">
      <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
        <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
      </button>
    </li>
  </ul>
</div>
```
*/

.CDB-InfoBox {
  padding: 12px 16px;
  border-radius: 4px;
  background: $cThirdBackground;
  &.is-alert {
    background: rgba($cHighlightYellow, 0.6);
  }
}

.CDB-InfoBox-footer {
  @include display-flex();
  @include align-items(center);
}

.CDB-InfoBox-footerItem {
  @include flex(1);
}

.CDB-InfoBox-footerItem--right {
  text-align: right;
}