Files
Stephen Abello f095f93326 N°4684 - Align portal default theme with backoffice one (#702)
* Prepare SCSS files and move nav menu / main wrapper from Bootstrap positioning

* Small work on navigation menu

* Split bootstrap theme file into multiple files inside themes/

* Fix unit test missing css/ import path

* Better display for usercard

* Upload precompiled portal stylesheets to fix unit test based on portal.css

* Polish menu

* Stylize home tiles

* Stylize home tiles and layout pages

* Stylize home tiles and layout pages

* Stylize home tiles and layout pages

* Stylize home tiles and layout pages

* Define default font in a more elegant way

* Small implementation for open/close navigation_menu

* Fix navigation menu dropdown menu not working

* Fix menu colors

* Set  <html> lang attribute

* Add accessibility attributes to menu toggler

* Fix bricks / page title dot spacing

* new look adaptation

* Fix padding in manage brick

* Fix menu entries font size and color

* Change manage export color

* Fix icon size in tiles

* Add style to manage brick panels

* Redesign browse brick mosaic view

* Fix variable name collision

* - Set templates cache in dev mode to 1s
- Implements components classes JS
- Move navigations layouts outside the global layout
- Update tiles

* Fix tile description font size

* Redesign browse brick tree mode

* Tweak navigation menu css

* - use custom elements for js components
- adjust layouts

* Modify forms/modals

* Modify method name following code review

* Add a dropdown element to replace bootstrap one

* improvement to dropdown

* datatable prevent column sort icon to wrap

* update composer json file.
Without classmap-authoritative flag, classmap are not generated
There is no test folder

* remove colored circle in manage brick tile titles

* remove white span between title and title additional part in brick layout

* convert navigation menu js to custom element

* navigation menu (WIP)

* Improvement to dropdown

* Fix some caselog classes

* Improvement to dropdown

* Improvement to dropdown

* navigation menu (WIP)

* portal ui version  2025

* datatable sort icon issue on link sets

* portal ui settings

* Fix dropdown for browse brick

* add portal scss colors

* add alerts scss=

* Buttons improvement

* Correction list table action issue

* responsive adjustments

* restore ben-j erased stephen

* ipb-button integration

* remove table header bottom border

* remove brick page ipb-page--main-header duplicate

* Adjust button styel

* Fix browse brick buttons

* Correctly overload approot and fix scsss imports

* Fix treeview expand buttons, fix mosaic first display glitch and add animation to each mosaic tile drawn

* Fix treeview toolbar

* remove wrap from ipb-button-groups

* Fix hover and clickable space in mosaics

* Clean dropdown css

* Fix dropdown menu content for a better display

* Align pagination buttons with theme buttons

* Align pagination buttons with theme buttons

* Fix drowdown

* Add precompiled stylesheets for merge to main branch

---------

Co-authored-by: Benjamin Dalsass <95754414+bdalsass@users.noreply.github.com>
2025-03-05 14:31:00 +01:00

2.1 KiB

fa5-power-transforms-css

Font Awesome 5 "Power Transform" like functionality using straight CSS

What is this?

Font Awesome 5 provides some really neat functionality they call Power Transforms. Power Transforms allow you to shrink icons, rotate icons, and layer icons in endless ways.

The problem is, Power Transforms are only available to users of the SVG + JS version of Font Awesome. At this time, I prefer the web fonts version for performance reasons.

This project attempts to recreate some of the key Power Transform features in straight CSS.

Which data-fa-transform options are recreated?

rotate-n

  • Rotates the icon by a given number of degrees.
  • Supports whole numbers only, multiples of 5, -355 to 355.

flip-h, flip-h

  • Flips an icon horizontally, vertically, or both.

shrink-n, grow-n

  • Reduces the size, or increases the size.
  • Supports whole numbers from 1 to 16.

.fa-layers only

The Web Fonts version does offer stacking using the .fa-stack class, but the .fa-layers class is far more powerful.

Unlike the Font Awesome 5 implementation, the following options are only available to icons inside a .fa-layers container.

up-n, down-n, left-n, right-n

  • Supports whole numbers from 1 to 8.

Background Color Magic

Note that the following attributes may require updated the CSS for your template.

data-fa-mask=""

  • Slightly different than the Font Awesome 5 specification.
  • The existence of this attribute will attempt to set the icon's color to that of the background.

data-fa-glow=""

  • Adds an outline to the icon for some really fancy layering.
  • Defaults to white, with some Bootstrap 3 background color options.
  • Include a value of black, danger, warning, info, or success to force a specific glow color.
  • Defaults to an outline width of 4px.
    • Include a value of 1px, 2px, or 3px for a thinner width (or no width in IE).
    • Include a value from 5px to 9px for a thicker width. (Not supported by IE.)

I want to see it in action!

See the examples