Tocas: Dropdown in menu

[toby3d]

Dropdown elements do not work correctly when you try to use them in the menu bar.

For example:

<nav class="ts large fluid borderless pure basic menu">
  <div class="ts narrow container">
    <a class="header item">SiteName</a>

    <div class="right menu">
      <div class="ts item dropdown">
        <div class="text"><b>toby3d</b></div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <a class="item" href="/profile">Profile</a>
          <div class="divider"></div>
          <a class="item" href="/settings">Settings</a>
          <a class="item" href="/logout">Log out</a>
        </div>
      </div>
    </div>
  </div>
</nav>

[YamiOdymel]

Dropdown in Menu

Fixed in Tocas UI 2.0.1 (Files are in the /dist folder, remember to update your tocas.js too).

Dropdown Divider

please be noticed that there's a change for .divider in Dropdown,

I removed the top, bottom margin of the .divider,

use .section.divider instead if you want to keep the margin of the divider,

please tell me when it's _Okay_, and I will close the issue,

I'm hoping for there's no more bugs ; - ;

.section.divider Preview

.divider Preview

Icon margin

I've also fixed the icon margin.

[toby3d]

@YamiOdymel All works fine, looks awesome. Thanks!

P.S.

But I'm not sure about icons fix, I mean icons with .loading class. Maybe it's a bug of icons pack (or rather their size) because some icons... Not really revolve around the center.

Try use <i class="hourglass half loading icon"></i> in any big element (label, for example) to see this problem.

[YamiOdymel]

Yeah, I confirmed that's based on the icon font problem,

even if I adjusted the transform-origin for the hourglass half icon,

it will still lose it's origin when the icon is set to .large, .big .. So I think it's cannot be fixed ; - ;

thanks btw. 😊