Examples Picker List Horizontal (d8dc HTML)

Example horizontal/inline attribute picker element using Drupal 8 Drupal Commerce HTML markup system.

 

 

Size

 


/* this is the div wrapper around the "purchased-entity" items - (inside) divs - field__item > #commerce-product-add-to-cart-form */
.commerce-order-item-add-to-cart-form
{
  /* just a placeholder directive */
  background: transparent;
}


/* the current theme puts a strange border box around legend elements that needs to be removed - "legend" is the name  the product attribute set "size" "color"  */
.commerce-order-item-add-to-cart-form .form-item legend
{
    border: none;
}

/* the following selector is the label aka legend for the radio button set (Size) (Color) (etc.) */
.commerce-order-item-add-to-cart-form .fieldset-legend.form-required
{
  /* basic text style resets */
  font-size: inherit;
  font-weight: normal;
  text-transform: none;  
  border-style: none;
}

.commerce-order-item-add-to-cart-form .fieldset-legend.form-required:after
{
  /* get rid of the ugly drupal default red asterisk and display text instead - this probably isn't translatable - need a better way */
  content: '(Required)';
  vertical-align: baseline;
  display: inline-block;
  background-image: none;
  background-repeat: no-repeat;
  background-size: 0 0;
}


.commerce-order-item-add-to-cart-form .fieldset-wrapper
{
  /* this is here as a place holder until this selector's usefulness is fully determined */
  background: transparent;	
}


/* div - wrapper div around the radio button input set  */

.commerce-order-item-add-to-cart-form .fieldset-wrapper .form-radios
{
  /* this is here as a place holder until this selector's usefulness is fully determined */
  background: transparent;
}


.commerce-order-item-add-to-cart-form .fieldset-wrapper .form-radios .form-type-radio
{
  background: transparent;
  /* makes the radio button set horizontal */
  display: inline-block;
}



.commerce-order-item-add-to-cart-form .fieldset-wrapper .form-radios .form-radio
{
  background: transparent;
  /* the following directives hide the visible radio button */
  position: absolute!important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
}


.commerce-order-item-add-to-cart-form .fieldset-wrapper .form-radios .form-type-radio .option
{
  background: transparent;
  /* the following styles draw the box around the item label */
  display: block;
  height: 53px;
  min-width: 53px;
  padding: 0 10px;
  overflow: hidden;
  line-height: 53px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #e9e9e9;
}


/* place a darker outline box around the active radio button item*/
/* .commerce-order-item-add-to-cart-form .fieldset-wrapper .form-radios .form-radio:focus + .option, */

.commerce-order-item-add-to-cart-form .fieldset-wrapper .form-radios .form-radio:active + .option
{
  color: #8D8D8D;
  border-color: #cccccc;
}

/* change the outline box color during hover over radio button item*/
.commerce-order-item-add-to-cart-form .fieldset-wrapper .form-radios .form-radio:hover + .option
{
  color: #444444;
  border-color: #444444;
}


/* place a darker outline box around the selected radio button item*/
.commerce-order-item-add-to-cart-form .fieldset-wrapper .form-radios .form-radio:checked + .option
{
  background: #fdfdfd;
  color: #363636;
  border-color: #999999;
}