Git Product home page Git Product logo

Comments (5)

bartaz avatar bartaz commented on June 5, 2024

If we have SVGs for the icons, we can add those to the icon set I guess.

from vanilla-framework.

camillet16 avatar camillet16 commented on June 5, 2024

@bartaz we do have them i'll upload them onto the assets

from vanilla-framework.

bartaz avatar bartaz commented on June 5, 2024

@camillet16 for Vanilla they don't need to be in assets, as we inline them in CSS.

Are there in icons drive folder (could you link those)? Or add them to comment here, and I can use the files to add to Vanilla CSS.

from vanilla-framework.

camillet16 avatar camillet16 commented on June 5, 2024

chevron-left
chevron-right

Here they are. I'm not sure if they're on a drive somewhere.

from vanilla-framework.

jmuzina avatar jmuzina commented on June 5, 2024

Is there a reason we would need to add new SVGs to the project for left/right chevrons instead of adding new left & right classes that perform the icon rotation (upstreaming the rotation work that some projects are doing)?

VF currently uses a single SVG (pointing downward) for all chevrons:

@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M8.187 11.748l6.187-6.187-1.06-1.061-5.127 5.127L3.061 4.5 2 5.561z'/%3E%3C/svg%3E");

Then it rotates according to applied class (example is for p-icon--chevron-up):

transform: rotate(180deg);

Here's a link to a proposed change that doesn't need any SVGs to be changed:

.p-icon--chevron-up {

Otherwise, I think we'd need to re-implement the chevron icons slightly as the vf-icon-chevron-themed mixin uses the same SVG for all directions.

Edit: See comment from Lyubo - we can use rotated chevron icon instead of using a new chevron asset

from vanilla-framework.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.