Update Style/Remove Attribute

Question

I need remove style attribute of a div

Line 85 https://github.com/PolymerElements/app-layout/blob/master/app-toolbar/app-toolbar.html

::content > [condensed-title] {
        pointer-events: none;
        @apply(--layout-flex)*;
      }

*(I don't wanna apply flexbox to [condensed-title] in a espefic head component I had made)

Line 133 https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html

    --layout-flex: {
  -ms-flex: 1 1 0.000000001px;
  -webkit-flex: 1;
  flex: 1;
  -webkit-flex-basis: 0.000000001px;
  flex-basis: 0.000000001px;
};

My code

<app-toolbar>
        <div class="logo-title">
          <iron-icon icon="custom-icons:casinha"></iron-icon>
        </div>
        <div id="outAlert" condensed-title>
          <paper-icon-button icon="card-membership"></paper-icon-button>
        </div>
        <div class="sublogo-title">
          <h4>Sublogo</h4>
        </div>
      </app-toolbar>

Answer 1

I solved problem using following code:

      #outAlert{
        @apply(--layout-flex-none);
      }

Answer 2

You can achieve this in 3 three ways

• You can style #outAlert in your element and set flex: 0. This will overwrite app-layout's styling.

  #outerAlert {
      flex: 0;
  }
  

• Use inline style to overwrite flex and set it to 0

   <div id="outAlert" condensed-title style="flex:0">
  

• And lastly overwrite the --layout-flex mixin for the app-layout where you don't want flex to be there.

  app-layout {
     --layout-flex: {
        flex: 0; /* You can have any other value also. Not sure if empty mixin will work or not */
     };
  }