mirror of
https://github.com/Combodo/iTop.git
synced 2026-02-13 07:24:13 +01:00
f095f93326
* 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>
59 lines
2.1 KiB
Markdown
59 lines
2.1 KiB
Markdown
# 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](https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons) 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](https://cityssm.github.io/fa5-power-transforms-css/)
|