Change color of + and - in cart.

[nativesons]

The quantity (+ and -) buttons on our cart are not high enough contrast from the background to be easily seen. How can we change this so that they are more clearly recognizable?

Site Test URL: https://native-sons-roasters-3430.myshopify.com/

Out of the Box Flex theme.

Code at Snippets/ quantity-box.liquid :

{% if settings.qty_box_style == 'stacked' %}
  {% assign icon-plus = 'up-caret' %}
  {% assign icon-minus = 'down-caret' %}
{% else %}
  {% assign icon-plus = 'plus' %}
  {% assign icon-minus = 'minus' %}
{% endif %}

{% if item.quantity %}
  {% assign value = item.quantity %}
{% else %}
  {% assign value = 1 %}
{% endif %}

<label class="label is-sr-only" for="quantity">
  {{- 'products.product.quantity' | t -}}
</label>

<div
  class="
    quantity-wrapper
    field
    has-addons
    quantity-style--{{ settings.qty_box_style }}
    {{ size }}
  "
>
  <div class="control minus-control">
    <span
      class="
        quantity-minus
        quantity-element
        button
        is-inverse
      "
      data-update-quantity="minus"
      {% if value == 1 %}
        disabled
      {% endif %}
    >
      {%
        render 'icon',
        name: icon-minus,
      %}
    </span>
  </div>

  <div
    class="
      control
      quantity-input-control
      {% unless show_payment_button %}
        quantity-input-control--fill
      {% endunless %}
    "
  >
    <input
      class="
        quantity-input
        quantity-element
        input
      "
      type="number"
      min="1"
      size="2"
      name="quantity"
      value="{{ value }}"
      {% if settings.limit_quantity and variant.inventory_management != blank and variant.inventory_policy == "deny" %}
        max="{{ variant.inventory_quantity }}"
        data-max-inventory-management
      {% endif %}
      data-line-id="{{ forloop.index }}"
    />
  </div>

  <div class="control plus-control">
    <span
      class="
        quantity-plus
        quantity-element
        button
        is-inverse
      "
      data-update-quantity="plus"
      {% if settings.limit_quantity and variant.inventory_management != blank and variant.inventory_policy == "deny" %}
        {% if variant.inventory_quantity == value %}
          disabled
        {% endif %}
      {% endif %}
    >
      {%
        render 'icon',
        name: icon-plus,
      %}
    </span>
  </div>
</div>

 Thank you

[AK_Design_Dev]

Hello @nativesons 

.ajax-cart--drawer .quantity-wrapper .icon svg{

      fill : red;

}

[nativesons]

@AK_Design_Dev Where should I post this code snippet, if I post it at the end as such: 

It does not work.

Thanks! 

[AK_Design_Dev]

please put this css in base.css file 

[AK_Design_Dev]

this css is for background 

.ajax-cart--drawer .quantity-minus.button[disabled]{

     background-color: #0000001f;

}

[nativesons]

Ok that worked great! Is there a way to make the + and - icons more bold? Just increase the stroke weight a bit.

[nativesons]

I was attempting to allow the disabled to be one color and the active to be another color and it seems that the disabled stuck, but when it is active it stays the background color. 

This is the result. I was able to adjust the plus icon, but it seems that the active minus icon did not stick.

 

I tried tagging the active as !important but it then disables the disabled tag.