No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    CSS cursors for fun and profit

    Useful Tips (NEW)
    1
    1
    883
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • qyloxe
      qyloxe last edited by

      Recently I needed to change cursor for drag’n’drop. In Quasar there is only css class - cursor-pointer:
      https://quasar.dev/style/other-helper-classes#Mouse-Related

      So I found this thread on SO:
      https://stackoverflow.com/questions/5697067/css-for-grabbing-cursors-drag-drop

      And converted the nice list of CSS cursors to Quasar style:

      .cursor-alias
          cursor: alias
      .cursor-all-scroll
          cursor: all-scroll
      .cursor-auto
          cursor: auto
      .cursor-cell
          cursor: cell
      .cursor-context-menu
          cursor: context-menu
      .cursor-col-resize
          cursor: col-resize
      .cursor-copy
          cursor: copy
      .cursor-crosshair
          cursor: crosshair
      .cursor-default
          cursor: default
      .cursor-e-resize
          cursor: e-resize
      .cursor-ew-resize
          cursor: ew-resize
      .cursor-grab
          cursor: grab
      .cursor-grabbing
          cursor: grabbing
      .cursor-help
          cursor: help
      .cursor-move
          cursor: move
      .cursor-n-resize
          cursor: n-resize
      .cursor-ne-resize
          cursor: ne-resize
      .cursor-nesw-resize
          cursor: nesw-resize
      .cursor-ns-resize
          cursor: ns-resize
      .cursor-nw-resize
          cursor: nw-resize
      .cursor-nwse-resize
          cursor: nwse-resize
      .cursor-no-drop
          cursor: no-drop
      // .cursor-none
      //     cursor: none
      // .cursor-not-allowed
      //     cursor: not-allowed
      // .cursor-pointer
      //     cursor: pointer
      .cursor-progress
          cursor: progress
      .cursor-row-resize
          cursor: row-resize
      .cursor-s-resize
          cursor: s-resize
      .cursor-se-resize
          cursor: se-resize
      .cursor-sw-resize
          cursor: sw-resize
      .cursor-text
          cursor: text
      // .cursor-url
      //     cursor: url(https://www.w3schools.com/cssref/myBall.cur),auto
      .cursor-w-resize
          cursor: w-resize
      .cursor-wait
          cursor: wait
      .cursor-zoom-in
          cursor: zoom-in
      .cursor-zoom-out
          cursor: zoom-out
      
      

      The ones already present in Quasar are commented, the URL one also, because it is an example of your own cursor.

      1 Reply Last reply Reply Quote 1
      • First post
        Last post