composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-13 07:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°4684 - Align portal default theme with backoffice one (#702)

Browse Source 
* 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>
This commit is contained in:
Stephen Abello
2025-03-05 14:31:00 +01:00
committed by GitHub
parent c9c3b6c108
commit f095f93326
113 changed files with 17510 additions and 7731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
node_modules/.package-lock.json generated vendored
View File

@@ -3,6 +3,11 @@
"lockfileVersion": 3,
"requires": true,
"packages": {
"node_modules/@cityssm/fa5-power-transforms-css": {
"version": "1.0.0",
"resolved": "git+ssh://git@github.com/cityssm/fa5-power-transforms-css.git#e48348a40907d7f32310d1c7e22392c1db48d6ac",
"license": "MIT"
},
"node_modules/@fontsource/raleway": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/@fontsource/raleway/-/raleway-4.5.0.tgz",

2
node_modules/@cityssm/fa5-power-transforms-css/.gitattributes generated vendored Normal file
View File

@@ -0,0 +1,2 @@
# Auto detect text files and perform LF normalization
* text=auto

21
node_modules/@cityssm/fa5-power-transforms-css/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2020 The Corporation of the City of Sault Ste. Marie
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

58
node_modules/@cityssm/fa5-power-transforms-css/README.md generated vendored Normal file
View File

@@ -0,0 +1,58 @@
# 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/)

1
node_modules/@cityssm/fa5-power-transforms-css/fa5-power-transforms.min.css generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

389
node_modules/@cityssm/fa5-power-transforms-css/fa5-power-transforms.scss generated vendored Normal file
View File

@@ -0,0 +1,389 @@
$base-width: 1.25em;
$base-width-half: $base-width / 2;
/*
* BACKGROUND COLORS
* For glow and masking effects
*/
$bg-default-color: #fff;
$bg-default-active-color: #f5f5f5;
$bg-danger-color: #f2dede;
$bg-danger-active-color: #ebcccc;
$bg-warning-color: #fcf8e3;
$bg-warning-active-color: #faf2cc;
$bg-success-color: #dff0d8;
$bg-success-active-color: #d0e9c6;
$bg-info-color: #d9edf7;
$bg-info-active-color: #c4e3f3;
$bg-btn-default-hover-color: #e6e6e6;
$bg-btn-default-active-color: #d4d4d4;
$bg-btn-success-color: #5cb85c;
$bg-btn-success-hover-color: #449d44;
$bg-btn-success-active-color: #398439;
$bg-btn-warning-color: #f0ad4e;
$bg-btn-warning-hover-color: #ec971f;
$bg-btn-warning-active-color: #d58512;
$bg-nav-pills-hover-color: #eeeeee;
$bg-nav-pills-active-color: #337ab7;
/**
* fa-layers
* - supports up, down, left, right
*/
.fa-layers {
position: relative;
display: inline-block;
width: $base-width;
height: $base-width;
line-height: $base-width;
text-align: center;
vertical-align: middle;
&.fa-fw > * {
width: 100%;
height: 100%;
}
& > .fa,
& > .fa-layers-text,
& > .fab,
& > .fad,
& > .fal,
& > .far,
& > .fas {
position: absolute;
left: 0;
width: 100%;
line-height: inherit;
text-align: center;
}
/*
* SHIFTING
*/
@for $i from 1 through 8 {
& [data-fa-transform*='up-#{$i}'] {
top: -($i / 8 * 50%);
}
}
@for $i from 1 through 8 {
& [data-fa-transform*='down-#{$i}'] {
top: ($i / 8 * 50%);
}
}
@for $i from 1 through 8 {
& [data-fa-transform*='right-#{$i}'] {
left: ($i / 8 * 50%);
}
}
@for $i from 1 through 8 {
& [data-fa-transform*='left-#{$i}'] {
left: -($i / 8 * 50%);
}
}
}
.fa,
.fa-layers-text,
.fab,
.fad,
.fal,
.far,
.fas {
/*
* ROTATE
*/
@for $i from 1 through 71 {
&[data-fa-transform*='rotate-#{$i * 5}'],
&[data-fa-transform*='rotate-#{$i * 5 - 360}'] {
transform: rotate(5deg * $i);
}
}
/*
* FLIP
*/
&[data-fa-transform*='flip-h'] {
transform: scale(-1, 1);
}
&[data-fa-transform*='flip-v'] {
transform: scale(1, -1);
}
&[data-fa-transform*='flip-h'][data-fa-transform*='flip-v'] {
transform: scale(-1, -1);
}
/*
* SHRINK
*/
@for $i from 1 through 16 {
&[data-fa-transform*='shrink-#{$i}'] {
font-size: 1em - $i / 16;
}
}
/*
* GROW
*/
@for $i from 1 through 16 {
&[data-fa-transform*='grow-#{$i}'] {
font-size: 1em + $i / 16;
}
}
/*
* MASKING
*/
&[data-fa-mask] {
color: $bg-default-color;
a.list-group-item:hover &,
a.list-group-item:focus &,
button.list-group-item:hover &,
button.list-group-item:focus & {
color: $bg-default-active-color;
}
.alert-danger &,
.bg-danger &,
.list-group-item-danger &,
tr.danger &,
td.danger & {
color: $bg-danger-color;
}
a.list-group-item-danger:hover &,
a.list-group-item-danger:focus &,
button.list-group-item-danger:hover &,
button.list-group-item-danger:focus & {
color: $bg-danger-active-color;
}
.alert-warning &,
.bg-warning &,
.list-group-item-warning &,
tr.warning &,
td.warning & {
color: $bg-warning-color;
}
a.list-group-item-warning:hover &,
a.list-group-item-warning:focus &,
button.list-group-item-warning:hover &,
button.list-group-item-warning:focus & {
color: $bg-warning-active-color;
}
.alert-success &,
.bg-success &,
.list-group-item-success &,
tr.success &,
td.success & {
color: $bg-success-color;
}
a.list-group-item-success:hover &,
a.list-group-item-success:focus &,
button.list-group-item-success:hover &,
button.list-group-item-success:focus & {
color: $bg-success-active-color;
}
.alert-info &,
.bg-info &,
.list-group-item-info &,
tr.info &,
td.info & {
color: $bg-info-color;
}
a.list-group-item-info:hover &,
a.list-group-item-info:focus &,
button.list-group-item-info:hover &,
button.list-group-item-info:focus & {
color: $bg-info-active-color;
}
}
/*
* GLOWING
*/
&[data-fa-glow] {
text-shadow: -2px 0 0 $bg-default-color, 2px 0 $bg-default-color, 0 2px 0 $bg-default-color, 0 -2px 0 $bg-default-color, 1.5px 1.5px 0 $bg-default-color, -1.5px -1.5px 0 $bg-default-color, -1.5px 1.5px 0 $bg-default-color, 1.5px -1.5px 0 $bg-default-color;
-webkit-text-stroke-width: 4px;
-webkit-text-stroke-color: $bg-default-color;
paint-order: stroke fill;
@for $i from 1 through 9 {
&[data-fa-glow*='#{$i}px'] {
-webkit-text-stroke-width: #{$i}px;
}
}
a.list-group-item:hover &,
a.list-group-item:focus &,
button.list-group-item:hover &,
button.list-group-item:focus & {
text-shadow: -2px 0 0 $bg-default-active-color, 2px 0 $bg-default-active-color, 0 2px 0 $bg-default-active-color, 0 -2px 0 $bg-default-active-color, 1.5px 1.5px 0 $bg-default-active-color, -1.5px -1.5px 0 $bg-default-active-color, -1.5px 1.5px 0 $bg-default-active-color, 1.5px -1.5px 0 $bg-default-active-color;
-webkit-text-stroke-color: $bg-default-active-color;
}
.alert-danger &,
.bg-danger &,
.list-group-item-danger &,
tr.danger &,
td.danger &,
&[data-fa-glow*='danger'] {
text-shadow: -2px 0 0 $bg-danger-color, 2px 0 $bg-danger-color, 0 2px 0 $bg-danger-color, 0 -2px 0 $bg-danger-color, 1.5px 1.5px 0 $bg-danger-color, -1.5px -1.5px 0 $bg-danger-color, -1.5px 1.5px 0 $bg-danger-color, 1.5px -1.5px 0 $bg-danger-color;
-webkit-text-stroke-color: $bg-danger-color;
}
a.list-group-item-danger:hover &,
a.list-group-item-danger:focus &,
button.list-group-item-danger:hover &,
button.list-group-item-danger:focus & {
text-shadow: -2px 0 0 $bg-danger-active-color, 2px 0 $bg-danger-active-color, 0 2px 0 $bg-danger-active-color, 0 -2px 0 $bg-danger-active-color, 1.5px 1.5px 0 $bg-danger-active-color, -1.5px -1.5px 0 $bg-danger-active-color, -1.5px 1.5px 0 $bg-danger-active-color, 1.5px -1.5px 0 $bg-danger-active-color;
-webkit-text-stroke-color: $bg-danger-active-color;
}
.alert-warning &,
.bg-warning &,
.list-group-item-warning &,
tr.warning &,
td.warning &,
&[data-fa-glow*='warning'] {
text-shadow: -2px 0 0 $bg-warning-color, 2px 0 $bg-warning-color, 0 2px 0 $bg-warning-color, 0 -2px 0 $bg-warning-color, 1.5px 1.5px 0 $bg-warning-color, -1.5px -1.5px 0 $bg-warning-color, -1.5px 1.5px 0 $bg-warning-color, 1.5px -1.5px 0 $bg-warning-color;
-webkit-text-stroke-color: $bg-warning-color;
}
a.list-group-item-warning:hover &,
a.list-group-item-warning:focus &,
button.list-group-item-warning:hover &,
button.list-group-item-warning:focus & {
text-shadow: -2px 0 0 $bg-warning-active-color, 2px 0 $bg-warning-active-color, 0 2px 0 $bg-warning-active-color, 0 -2px 0 $bg-warning-active-color, 1.5px 1.5px 0 $bg-warning-active-color, -1.5px -1.5px 0 $bg-warning-active-color, -1.5px 1.5px 0 $bg-warning-active-color, 1.5px -1.5px 0 $bg-warning-active-color;
-webkit-text-stroke-color: $bg-warning-active-color;
}
.alert-success &,
.bg-success &,
.list-group-item-success &,
tr.success &,
td.success &,
&[data-fa-glow*='success'] {
text-shadow: -2px 0 0 $bg-success-color, 2px 0 $bg-success-color, 0 2px 0 $bg-success-color, 0 -2px 0 $bg-success-color, 1.5px 1.5px 0 $bg-success-color, -1.5px -1.5px 0 $bg-success-color, -1.5px 1.5px 0 $bg-success-color, 1.5px -1.5px 0 $bg-success-color;
-webkit-text-stroke-color: $bg-success-color;
}
a.list-group-item-success:hover &,
a.list-group-item-success:focus &,
button.list-group-item-success:hover &,
button.list-group-item-success:focus & {
text-shadow: -2px 0 0 $bg-success-active-color, 2px 0 $bg-success-active-color, 0 2px 0 $bg-success-active-color, 0 -2px 0 $bg-success-active-color, 1.5px 1.5px 0 $bg-success-active-color, -1.5px -1.5px 0 $bg-success-active-color, -1.5px 1.5px 0 $bg-success-active-color, 1.5px -1.5px 0 $bg-success-active-color;
-webkit-text-stroke-color: $bg-success-active-color;
}
.alert-info &,
.bg-info &,
.list-group-item-info &,
tr.info &,
td.info &,
&[data-fa-glow*='info'] {
text-shadow: -2px 0 0 $bg-info-color, 2px 0 $bg-info-color, 0 2px 0 $bg-info-color, 0 -2px 0 $bg-info-color, 1.5px 1.5px 0 $bg-info-color, -1.5px -1.5px 0 $bg-info-color, -1.5px 1.5px 0 $bg-info-color, 1.5px -1.5px 0 $bg-info-color;
-webkit-text-stroke-color: $bg-info-color;
}
a.list-group-item-info:hover &,
a.list-group-item-info:focus &,
button.list-group-item-info:hover &,
button.list-group-item-info:focus & {
text-shadow: -2px 0 0 $bg-info-active-color, 2px 0 $bg-info-active-color, 0 2px 0 $bg-info-active-color, 0 -2px 0 $bg-info-active-color, 1.5px 1.5px 0 $bg-info-active-color, -1.5px -1.5px 0 $bg-info-active-color, -1.5px 1.5px 0 $bg-info-active-color, 1.5px -1.5px 0 $bg-info-active-color;
-webkit-text-stroke-color: $bg-info-active-color;
}
.btn-default:hover &,
.btn-default:focus &,
.btn-default:active & {
text-shadow: -2px 0 0 $bg-btn-default-hover-color, 2px 0 $bg-btn-default-hover-color, 0 2px 0 $bg-btn-default-hover-color, 0 -2px 0 $bg-btn-default-hover-color, 1.5px 1.5px 0 $bg-btn-default-hover-color, -1.5px -1.5px 0 $bg-btn-default-hover-color, -1.5px 1.5px 0 $bg-btn-default-hover-color, 1.5px -1.5px 0 $bg-btn-default-hover-color;
-webkit-text-stroke-color: $bg-btn-default-hover-color;
}
.btn-default:active:hover &,
.btn-default:active:focus & {
text-shadow: -2px 0 0 $bg-btn-default-active-color, 2px 0 $bg-btn-default-active-color, 0 2px 0 $bg-btn-default-active-color, 0 -2px 0 $bg-btn-default-active-color, 1.5px 1.5px 0 $bg-btn-default-active-color, -1.5px -1.5px 0 $bg-btn-default-active-color, -1.5px 1.5px 0 $bg-btn-default-active-color, 1.5px -1.5px 0 $bg-btn-default-active-color;
-webkit-text-stroke-color: $bg-btn-default-active-color;
}
.btn-success & {
text-shadow: -2px 0 0 $bg-btn-success-color, 2px 0 $bg-btn-success-color, 0 2px 0 $bg-btn-success-color, 0 -2px 0 $bg-btn-success-color, 1.5px 1.5px 0 $bg-btn-success-color, -1.5px -1.5px 0 $bg-btn-success-color, -1.5px 1.5px 0 $bg-btn-success-color, 1.5px -1.5px 0 $bg-btn-success-color;
-webkit-text-stroke-color: $bg-btn-success-color;
}
.btn-success:hover &,
.btn-success:focus &,
.btn-success:active & {
text-shadow: -2px 0 0 $bg-btn-success-hover-color, 2px 0 $bg-btn-success-hover-color, 0 2px 0 $bg-btn-success-hover-color, 0 -2px 0 $bg-btn-success-hover-color, 1.5px 1.5px 0 $bg-btn-success-hover-color, -1.5px -1.5px 0 $bg-btn-success-hover-color, -1.5px 1.5px 0 $bg-btn-success-hover-color, 1.5px -1.5px 0 $bg-btn-success-hover-color;
-webkit-text-stroke-color: $bg-btn-success-hover-color;
}
.btn-success:active:hover &,
.btn-success:active:focus & {
text-shadow: -2px 0 0 $bg-btn-success-active-color, 2px 0 $bg-btn-success-active-color, 0 2px 0 $bg-btn-success-active-color, 0 -2px 0 $bg-btn-success-active-color, 1.5px 1.5px 0 $bg-btn-success-active-color, -1.5px -1.5px 0 $bg-btn-success-active-color, -1.5px 1.5px 0 $bg-btn-success-active-color, 1.5px -1.5px 0 $bg-btn-success-active-color;
-webkit-text-stroke-color: $bg-btn-success-active-color;
}
.btn-warning & {
text-shadow: -2px 0 0 $bg-btn-warning-color, 2px 0 $bg-btn-warning-color, 0 2px 0 $bg-btn-warning-color, 0 -2px 0 $bg-btn-warning-color, 1.5px 1.5px 0 $bg-btn-warning-color, -1.5px -1.5px 0 $bg-btn-warning-color, -1.5px 1.5px 0 $bg-btn-warning-color, 1.5px -1.5px 0 $bg-btn-warning-color;
-webkit-text-stroke-color: $bg-btn-warning-color;
}
.btn-warning:hover &,
.btn-warning:focus &,
.btn-warning:active & {
text-shadow: -2px 0 0 $bg-btn-warning-hover-color, 2px 0 $bg-btn-warning-hover-color, 0 2px 0 $bg-btn-warning-hover-color, 0 -2px 0 $bg-btn-warning-hover-color, 1.5px 1.5px 0 $bg-btn-warning-hover-color, -1.5px -1.5px 0 $bg-btn-warning-hover-color, -1.5px 1.5px 0 $bg-btn-warning-hover-color, 1.5px -1.5px 0 $bg-btn-warning-hover-color;
-webkit-text-stroke-color: $bg-btn-warning-hover-color;
}
.btn-warning:active:hover &,
.btn-warning:active:focus & {
text-shadow: -2px 0 0 $bg-btn-warning-active-color, 2px 0 $bg-btn-warning-active-color, 0 2px 0 $bg-btn-warning-active-color, 0 -2px 0 $bg-btn-warning-active-color, 1.5px 1.5px 0 $bg-btn-warning-active-color, -1.5px -1.5px 0 $bg-btn-warning-active-color, -1.5px 1.5px 0 $bg-btn-warning-active-color, 1.5px -1.5px 0 $bg-btn-warning-active-color;
-webkit-text-stroke-color: $bg-btn-warning-active-color;
}
.nav-pills [data-toggle='tab']:hover &,
.nav-pills [data-toggle='tab']:focus & {
text-shadow: -2px 0 0 $bg-nav-pills-hover-color, 2px 0 $bg-nav-pills-hover-color, 0 2px 0 $bg-nav-pills-hover-color, 0 -2px 0 $bg-nav-pills-hover-color, 1.5px 1.5px 0 $bg-nav-pills-hover-color, -1.5px -1.5px 0 $bg-nav-pills-hover-color, -1.5px 1.5px 0 $bg-nav-pills-hover-color, 1.5px -1.5px 0 $bg-nav-pills-hover-color;
-webkit-text-stroke-color: $bg-nav-pills-hover-color;
}
.nav-pills > .active > [data-toggle='tab'] & {
text-shadow: -2px 0 0 $bg-nav-pills-active-color, 2px 0 $bg-nav-pills-active-color, 0 2px 0 $bg-nav-pills-active-color, 0 -2px 0 $bg-nav-pills-active-color, 1.5px 1.5px 0 $bg-nav-pills-active-color, -1.5px -1.5px 0 $bg-nav-pills-active-color, -1.5px 1.5px 0 $bg-nav-pills-active-color, 1.5px -1.5px 0 $bg-nav-pills-active-color;
-webkit-text-stroke-color: $bg-nav-pills-active-color;
}
&[data-fa-glow*='black'] {
text-shadow: -2px 0 0 #000, 2px 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1.5px 1.5px 0 #000, -1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px -1.5px 0 #000;
-webkit-text-stroke-color: #000;
}
&[data-fa-glow*='1px'],
&[data-fa-glow*='2px'],
&[data-fa-glow*='3px'] {
text-shadow: none;
}
}
}

446
node_modules/@cityssm/fa5-power-transforms-css/index.htm generated vendored Normal file
View File

@@ -0,0 +1,446 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>fa5-power-transforms-css - Test Page</title>
<meta name="description" content="A CSS implementation of the Power Transform functionality in Font Awesome 5">
<meta name="keywords" content="Font Awesome 5, Power Transforms, CSS, Bootstrap 3">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="fa5-power-transforms.min.css">
</head>
<body>
<div class="container">
<h1>fa5-power-transforms-css Test Page</h1>
<a href="https://github.com/cityssm/fa5-power-transforms-css"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
<div class="alert alert-success">
<span class="fa-7x fa-layers fa-pull-right" style="color:#000">
<i class="fas fa-circle" data-fa-transform="shrink-3 up-3" style="color:#ff0"></i>
<i class="far fa-grin-beam" data-fa-transform="shrink-3 up-3"></i>
<i class="fas fa-thumbs-up" data-fa-transform="shrink-10 right-4 down-1 rotate--20" data-fa-glow="black 8px" style="color:#ff0"></i>
<i class="fas fa-thumbs-up" data-fa-transform="shrink-10 right-4 down-1 rotate--20" style="color:#ff0"></i>
<i class="fas fa-thumbs-down" data-fa-transform="shrink-10 left-4 down-1 rotate-200" data-fa-glow="black 8px" style="color:#ff0"></i>
<i class="fas fa-thumbs-down" data-fa-transform="shrink-10 left-4 down-1 rotate-200" style="color:#ff0"></i>
</span>
<p>
Font Awesome 5 introduces a feature called Power Transforms,
which opens developers up to limitless customizations of their icons.
The problem is, these features are only available to users of the SVG + JS version.
What about the Web Fonts users?
</p>
<p>
This project attempts to recreate the key features of Font Awesome 5 Power Transforms using straight CSS,
while keeping the same syntax as Font Awesome 5. Just drop in a little extra CSS and enjoy!
</p>
</div>
<hr />
<h2>Rotating and Flipping</h2>
<p>
<a href="https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms#rotating">Compare with the Font Awesome SVG + JS Examples</a>
</p>
<p class="alert alert-info">
<strong>Difference:</strong>
Font Awesome 5 Power Transforms rotations do not rotate the background.
In the CSS solution, the background is rotated as well, as seen in the 30 degree rotations.
</p>
<div class="fa-4x">
<i class="fas fa-magic" data-fa-transform="rotate-90" style="background:MistyRose"></i>
<i class="fas fa-magic" data-fa-transform="rotate-180" style="background:MistyRose"></i>
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i>
<i class="fas fa-magic" data-fa-transform="rotate-30" style="background:MistyRose"></i>
<i class="fas fa-magic" data-fa-transform="rotate--30" style="background:MistyRose"></i>
<i class="fas fa-magic" data-fa-transform="flip-v" style="background:MistyRose"></i>
<i class="fas fa-magic" data-fa-transform="flip-h" style="background:MistyRose"></i>
<i class="fas fa-magic" data-fa-transform="flip-v flip-h" style="background:MistyRose"></i>
</div>
<br />
<pre><code>
&lt;!-- HTML same as Font Awesome 5 --&gt;
&lt;div class="fa-4x"&gt;
&lt;i class="fas fa-magic" data-fa-transform="rotate-90" style="background:MistyRose"&gt;&lt;/i&gt;
&lt;i class="fas fa-magic" data-fa-transform="rotate-180" style="background:MistyRose"&gt;&lt;/i&gt;
&lt;i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"&gt;&lt;/i&gt;
&lt;i class="fas fa-magic" data-fa-transform="rotate-30" style="background:MistyRose"&gt;&lt;/i&gt;
&lt;i class="fas fa-magic" data-fa-transform="rotate--30" style="background:MistyRose"&gt;&lt;/i&gt;
&lt;i class="fas fa-magic" data-fa-transform="flip-v" style="background:MistyRose"&gt;&lt;/i&gt;
&lt;i class="fas fa-magic" data-fa-transform="flip-h" style="background:MistyRose"&gt;&lt;/i&gt;
&lt;i class="fas fa-magic" data-fa-transform="flip-v flip-h" style="background:MistyRose"&gt;&lt;/i&gt;
&lt;/div&gt;
</code></pre>
<hr />
<h2>Layering, Text, & Counters</h2>
<p>
<a href="https://fontawesome.com/how-to-use/on-the-web/styling/layering">Compare with the Font Awesome SVG + JS Examples</a>
</p>
<p class="alert alert-info">
<strong>Difference:</strong>
Font Awesome 5 Power Transforms support decimals in the
<code>shrink</code>, <code>up</code>, <code>down</code>, <code>left</code>, and <code>right</code>
Power Transforms. In the CSS solution, the decimal portions are ignored.
</p>
<div class="fa-4x">
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-circle" style="color:Tomato"></i>
<i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-bookmark"></i>
<i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
<i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
<i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
<i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-calendar"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-certificate"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
</span>
</div>
<br />
<pre><code>
&lt;!-- HTML same as Font Awesome 5 --&gt;
&lt;div class="fa-4x"&gt;
&lt;span class="fa-layers fa-fw" style="background:MistyRose"&gt;
&lt;i class="fas fa-circle" style="color:Tomato"&gt;&lt;/i&gt;
&lt;i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;span class="fa-layers fa-fw" style="background:MistyRose"&gt;
&lt;i class="fas fa-bookmark"&gt;&lt;/i&gt;
&lt;i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;span class="fa-layers fa-fw" style="background:MistyRose"&gt;
&lt;i class="fas fa-play" data-fa-transform="rotate--90 grow-2"&gt;&lt;/i&gt;
&lt;i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"&gt;&lt;/i&gt;
&lt;i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"&gt;&lt;/i&gt;
&lt;i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;span class="fa-layers fa-fw" style="background:MistyRose"&gt;
&lt;i class="fas fa-calendar"&gt;&lt/i&gt;
&lt;span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900"&gt;27&lt;/span&gt;
&lt;/span&gt;
&lt;span class="fa-layers fa-fw" style="background:MistyRose"&gt;
&lt;i class="fas fa-certificate"&gt;&lt;/i&gt;
&lt;span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900"&gt;NEW&lt;/span&gt;
&lt;/span&gt;
&lt;/div&gt;
</code></pre>
<hr />
<h2>Layering with <code>data-fa-glow</code></h2>
<p class="alert alert-success">
<strong>Unique to this CSS solution</strong>, a special <code>data-fa-glow</code> attribute has been added to outline icons.
The outline colour defaults to white, but also takes into account some Bootstrap 3 background classes on parent elements.
You can also set the value to <code>black</code>, <code>danger</code>, <code>warning</code>, <code>success</code>, or <code>info</code> to set the glow colour.
<strong>You may need to edit the colour options depending on your template.</strong>
</p>
<p class="alert alert-warning">
<strong>Warning:</strong>
The <code>paint-order</code> CSS property is not supported by Chrome which can cause display issues for `glow` icons.
Doubling up the icon declaration, with a glow version on the bottom can solve the problem.
</p>
<div class="row">
<div class="col-sm-3">
<p class="text-center">
<span class="fa-layers fa-fw fa-4x">
<i class="fas fa-file-alt"></i>
<i class="fas fa-search" data-fa-transform="shrink-10 right-6 down-5" data-fa-glow></i>
<i class="fas fa-search" data-fa-transform="shrink-10 right-6 down-5"></i>
</span>
</p>
</div>
<div class="col-sm-3">
<p class="text-center">
<span class="fa-layers fa-fw fa-4x">
<i class="fas fa-file-alt"></i>
<i class="fas fa-lock" data-fa-transform="shrink-10 right-6 down-5" data-fa-glow></i>
<i class="fas fa-lock" data-fa-transform="shrink-10 right-6 down-5"></i>
</span>
</p>
</div>
<div class="col-sm-3">
<p class="text-center">
<span class="fa-layers fa-fw fa-4x">
<i class="fas fa-file-alt"></i>
<i class="fas fa-hand-point-up" data-fa-transform="shrink-8 right-3 down-5" data-fa-glow></i>
<i class="fas fa-hand-point-up" data-fa-transform="shrink-8 right-3 down-5"></i>
</span>
</p>
</div>
<div class="col-sm-3">
<p class="text-center">
<span class="fa-layers fa-fw fa-4x">
<i class="fas fa-file-alt"></i>
<i class="fas fa-sync-alt" data-fa-transform="shrink-10 right-6 down-5" data-fa-glow></i>
<i class="fas fa-sync-alt" data-fa-transform="shrink-10 right-6 down-5"></i>
</span>
</p>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<p class="alert alert-success text-center">
<span class="fa-layers fa-fw fa-4x">
<i class="fas fa-file-alt"></i>
<i class="fas fa-plus" data-fa-transform="shrink-10 right-6 down-5" data-fa-glow></i>
<i class="fas fa-plus" data-fa-transform="shrink-10 right-6 down-5"></i>
</span>
</p>
</div>
<div class="col-sm-3">
<p class="alert alert-warning text-center">
<span class="fa-layers fa-fw fa-4x">
<i class="fas fa-file-alt"></i>
<i class="fas fa-save" data-fa-transform="shrink-10 right-6 down-5" data-fa-glow></i>
<i class="fas fa-save" data-fa-transform="shrink-10 right-6 down-5"></i>
</span>
</p>
</div>
<div class="col-sm-3">
<p class="alert alert-danger text-center">
<span class="fa-layers fa-fw fa-4x">
<i class="fas fa-file-alt"></i>
<i class="fas fa-trash" data-fa-transform="shrink-10 right-6 down-5" data-fa-glow></i>
<i class="fas fa-trash" data-fa-transform="shrink-10 right-6 down-5"></i>
</span>
</p>
</div>
<div class="col-sm-3">
<p class="alert alert-info text-center">
<span class="fa-layers fa-fw fa-4x">
<i class="fas fa-file-alt"></i>
<i class="fas fa-info-circle" data-fa-transform="shrink-10 right-6 down-5" data-fa-glow></i>
<i class="fas fa-info-circle" data-fa-transform="shrink-10 right-6 down-5"></i>
</span>
</p>
</div>
</div>
<br />
<pre><code>
&lt;!-- data-fa-glow is unique to fa5-power-transforms-css --&gt;
&lt;p class="alert alert-info text-center"&gt;
&lt;span class="fa-layers fa-fw fa-4x"&gt;
&lt;i class="fas fa-file-alt"&gt;&lt;/i&gt;
&lt;i class="fas fa-info-circle" data-fa-transform="shrink-10 right-6 down-5" data-fa-glow&gt;&lt;/i&gt;
&lt;i class="fas fa-info-circle" data-fa-transform="shrink-10 right-6 down-5"&gt;&lt;/i&gt; &lt;!-- Chrome workaround --&gt;
&lt;/span&gt;
&lt;/p>
</code></pre>
<hr />
<h2>Masking</h2>
<p class="alert alert-warning">
<strong>Difference:</strong>
Recreating <a href="https://fontawesome.com/how-to-use/on-the-web/styling/masking">masking using the exact Font Awesome 5 syntax</a> in CSS would be huge.
Every icon class would have to be considered. It's not feasable.
Instead, similar functionality is provided with the <code>.fa-layers</code> class.
If the <code>data-fa-mask</code> attribute is present (regardless of what the attribute value is), the icon will be coloured the same colour as the background.
</p>
<div class="row">
<div class="col-sm-4 text-center">
<span class="fa-layers fa-5x fa-fw bg-success">
<i class="fas fa-comment"></i>
<i class="fas fa-pencil-alt" data-fa-transform="shrink-10" data-fa-mask></i>
</span>
</div>
<div class="col-sm-4 text-center">
<span class="fa-layers fa-5x fa-fw bg-danger">
<i class="fas fa-circle"></i>
<i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle"></i>
</span>
</div>
<div class="col-sm-4 text-center">
<span class="fa-layers fa-5x fa-fw bg-info">
<i class="fas fa-square"></i>
<i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square"></i>
</span>
</div>
</div>
<br />
<pre><code>
&lt;!-- Note that an .fa-layers class wrapper is needed --&gt;
&lt;span class="fa-layers fa-5x fa-fw bg-info"&gt;
&lt;i class="fas fa-square"&gt;&lt;/i&gt;
&lt;i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square"&gt;&lt;/i&gt;
&lt;/span&gt;
</code></pre>
<h2>More Examples</h2>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading text-center">
Hover Effects
</div>
<div class="list-group">
<button class="list-group-item list-group-item-success" type="button">
<span class="fa-layers fa-fw fa-4x fa-pull-left">
<i class="fas fa-file-alt"></i>
<i class="fas fa-plus" data-fa-transform="shrink-10 right-5 down-5" data-fa-glow></i>
<i class="fas fa-plus" data-fa-transform="shrink-10 right-5 down-5"></i>
</span>
<strong>New File</strong><br />
Note the <code>data-fa-glow</code> effect changes colour on hover.
</button>
<button class="list-group-item list-group-item-info" type="button">
<span class="fa-layers fa-fw fa-4x fa-pull-left">
<i class="fas fa-file"></i>
<i class="fas fa-circle" data-fa-transform="shrink-12 left-1 down-1" data-fa-mask></i>
<i class="fas fa-search" data-fa-transform="shrink-10 down-1" data-fa-glow></i>
<i class="fas fa-search" data-fa-transform="shrink-10 down-1"></i>
</span>
<strong>Find a File</strong><br />
Note the <code>data-fa-mask</code> effect changes colour on hover.
</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading text-center">
<a href="https://stackoverflow.com/questions/49769790/font-awesomes-js-5-fill-empty-parts-on-stacked-icons">StackOverflow post</a>
</div>
<div class="panel-body">
<div class="text-center">
<span class="fa-layers fa-4x">
<i class="far fa-calendar-alt"></i>
<i class="fas fa-circle" style="color:white" data-fa-transform="shrink-6 down-6 right-6"></i>
<i class="far fa-clock" data-fa-transform="shrink-6 down-6 right-6"></i>
</span>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading text-center">
Coloured circles for background colours in layers
</div>
<div class="panel-body">
<div class="text-center fa-4x">
<span class="fa-layers fa-fw">
<i class="fas fa-circle" style="color:#3cf;"></i>
<i class="far fa-question-circle"></i>
</span>
<span class="fa-layers fa-fw">
<i class="fas fa-circle" style="color:#f99;"></i>
<i class="far fa-angry"></i>
</span>
<span class="fa-layers fa-fw">
<i class="fas fa-circle" style="color:#9f9;"></i>
<i class="far fa-play-circle"></i>
</span>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading text-center">
Using <code>data-fa-glow="black"</code>
</div>
<div class="panel-body">
<div class="text-center">
<span class="fa-layers fa-fw fa-4x">
<i class="fas fa-play" data-fa-transform="rotate-30 shrink-1" data-fa-glow="black 6px" style="color:#ff6"></i>
<i class="fas fa-play" data-fa-transform="rotate-30 shrink-1" style="color:#ff6"></i>
<i class="fas fa-exclamation" data-fa-transform="shrink-10 left-1 up-1"></i>
</span>
<span class="fa-layers fa-fw fa-4x">
<i class="fas fa-truck-monster" data-fa-transform="up-1" data-fa-glow="black" style="color:#0f3"></i>
<i class="fas fa-truck-monster" data-fa-transform="up-1" style="color:#0f3"></i>
<i class="fas fa-circle" data-fa-transform="shrink-7 down-2 left-4" style="color:#000;"></i>
<i class="fas fa-cog fa-spin" data-fa-transform="shrink-7 down-2 left-4" data-fa-glow="black" style="color:#333"></i>
<i class="fas fa-cog fa-spin" data-fa-transform="shrink-7 down-2 left-4" style="color:#333"></i>
<i class="fas fa-circle" data-fa-transform="shrink-7 down-2 right-4" style="color:#000;"></i>
<i class="fas fa-cog fa-spin" data-fa-transform="shrink-7 down-2 right-4" data-fa-glow="black" style="color:#333"></i>
<i class="fas fa-cog fa-spin" data-fa-transform="shrink-7 down-2 right-4" style="color:#333"></i>
</span>
<span class="fa-layers fa-fw fa-4x">
<i class="fas fa-location-arrow" data-fa-transform="rotate-135 shrink-8 down-2" data-fa-glow="black" style="color:brown"></i>
<i class="fas fa-location-arrow" data-fa-transform="rotate-135 shrink-8 down-2" style="color:brown"></i>
<i class="fas fa-poop" data-fa-transform="shrink-6 up-3" data-fa-glow="black" style="color:white"></i>
<i class="fas fa-poop" data-fa-transform="shrink-6 up-3" style="color:white"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-info" style="padding:1em 0">
<div class="container">
<div class="row">
<div class="col-sm-6">
<strong>Resources</strong>
<ul class="list-unstyled">
<li><a href="https://fontawesome.com/">Font Awesome 5</a></li>
<li><a href="http://getbootstrap.com/docs/3.3/">Bootstrap 3</a></li>
</ul>
</div>
<div class="col-sm-6">
<strong>Links</strong>
<ul class="list-unstyled">
<li><a href="https://github.com/cityssm/fa5-power-transforms-css">Grab the CSS on GitHub</a></li>
<li><a href="http://saultstemarie.ca/">A project by the City of Sault Ste. Marie</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

25
node_modules/@cityssm/fa5-power-transforms-css/package.json generated vendored Normal file
View File

@@ -0,0 +1,25 @@
{
"name": "@cityssm/fa5-power-transforms-css",
"version": "1.0.0",
"description": "Font Awesome 5 \"Power Transform\" like functionality using straight CSS",
"main": "fa5-power-transforms.min.css",
"scripts": {
"test": "index.htm"
},
"repository": {
"type": "git",
"url": "git+https://github.com/cityssm/fa5-power-transforms-css.git"
},
"author": "The Corporation of the City of Sault Ste. Marie",
"license": "MIT",
"bugs": {
"url": "https://github.com/cityssm/fa5-power-transforms-css/issues"
},
"homepage": "https://github.com/cityssm/fa5-power-transforms-css#readme",
"keywords": [
"font-awesome-5",
"css",
"html",
"power-transforms"
]
}

30
node_modules/web.config generated vendored
View File

@@ -1,30 +0,0 @@
<?xml version="1.0" encoding="utf-8" ?>
<!-- Allow only static resources files -->
<!-- - HTML not allowed as there could be some test pages calling server scripts or executing JS scripts -->
<!-- - PHP not allowed as they should not be publicly accessible -->
<configuration>
<system.webServer>
<security>
<requestFiltering>
<fileExtensions applyToWebDAV="false" allowUnlisted="false" >
<add fileExtension=".css" allowed="true" />
<add fileExtension=".scss" allowed="true" />
<add fileExtension=".js" allowed="true" />
<add fileExtension=".map" allowed="true" />
<add fileExtension=".png" allowed="true" />
<add fileExtension=".bmp" allowed="true" />
<add fileExtension=".gif" allowed="true" />
<add fileExtension=".jpeg" allowed="true" />
<add fileExtension=".jpg" allowed="true" />
<add fileExtension=".svg" allowed="true" />
<add fileExtension=".tiff" allowed="true" />
<add fileExtension=".woff" allowed="true" />
<add fileExtension=".woff2" allowed="true" />
<add fileExtension=".ttf" allowed="true" />
<add fileExtension=".eot" allowed="true" />
</fileExtensions>
</requestFiltering>
</security>
</system.webServer>
</configuration>