jqwidgets-framework/demos/Angular/src/dragdrop/defaultfunctionality/app.component.css

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

.draggable-demo-cart {
  border: 2px dashed #aaa;
  padding: 5px;
  width: 232px;
  margin: auto;
}

.draggable-demo-shop {
  border: 1px solid #666;
  width: 665px;
  padding: 5px;
}

.draggable-demo-catalog {
  position: relative;
  width: 397px;
  border: 1px solid #bbb;
  height: 457px;
  float: left;
}

.draggable-demo-product-image {
  width: 150px;
}

.draggable-demo-product {
  padding: 5px;
  border: 1px solid #888;
  width: 115px;
  height: 135px;
  background-color: #fff;
  position: absolute;
  margin: 5px;
}

  .draggable-demo-product img {
    width: 113px;
    border: 1px solid #aaa;
    border-top-width: 0px;
    outline-width: 15px;
  }

.draggable-demo-product-header {
  border: 1px solid #888;
  height: 20px;
  border-bottom-width: 0px;
  font-size: 13px;
  position: relative;
  text-align: center;
}

.draggable-demo-product-header-label {
  margin-top: 3px;
}

.draggable-demo-product-price {
  position: absolute;
  top: 124px;
  left: 6px;
  width: 113px;
  text-align: center;
  font-family: Verdana;
  font-size: 11px;
  display: none;
  height: 16px;
  border-top: 1px solid #888;
  border-bottom: 1px solid #fff;
}

.draggable-demo-title {
  font-size: 23px;
  font-family: Verdana;
  text-align: center;
  padding: 7px;
  margin: 5px;
  font-weight: bold;
  border: 1px solid #aaa;
}

.draggable-demo-cart-wrapper {
  float: right;
  border: 1px solid #aaa;
  height: 457px;
  width: 260px;
}

.draggable-demo-total {
  font-size: 17px;
  font-family: Verdana;
  margin: 6px;
  margin-top: 7px;
  padding: 7px;
}