@coroborsystems/angular-theme

corobor-theme

This project contains the theme for corobor angular applications.

Install

copy corobor-theme-secret in your project root

// Install fontawesome dependencies
npm install @fortawesome/angular-fontawesome --save
npm install @fortawesome/fontawesome-svg-core --save
npm install @fortawesome/free-brands-svg-icons --save
npm install @fortawesome/free-regular-svg-icons --save
npm install @fortawesome/free-solid-svg-icons --save
// Install corobor theme and icons
npm install @coroborsystems/angular-theme --save

In styles.scss

@import '~@coroborsystems/angular-theme/corobor-theme.scss';

In angular.json

Replace index.html from angular template by index.html from theme

In section : projects.PROJECT_NAME.architect.build.option

  "index": "./node_modules/@coroborsystems/angular-theme/index.html",

Use

Corobor systems Icons can be used with official implementation of angular-fontawesome as a fontawesome icons. documentation

All features supported with fontawesome icons are supported with Corobor Systems icons.

In template

<fa-icon [icon]="faMonoIcon"></fa-icon>
...
<fa-duoton-icon [icon]="faDuoIcon"></fa-duoton-icon>

In the template, prefer to used business name. prefixed by fa for convention.

By example, prefer faRemveStation instead faTimes in the template

Of course in controller you have to expose faTimes as faRemveStation;

In controller

    import {csTideGauge} from '@coroborsystems/angular-theme/duo';
    import {csAcorn} from '@coroborsystems/angular-theme/mono';

    ...

    faMonoIcon = csAcorn; 
    faDuoIcon = csTideGauge; 

Additional feature

Color theme

You can used theme color instead color code. Like this.

<fa-icon [icon]="faMonoIcon" color="primary/accent/warn"></fa-icon>
...
<fa-duoton-icon [icon]="faDuoIcon" primaryColor="primary/accent/warn" secondaryColor="primary/accent/warn"></fa-duoton-icon>

Remember, don't use dirrectly colors in your components. Use theming behavior theming your components

Shake Animation

<fa-icon [icon]="faMonoIcon" shake="true"></fa-icon>
...
<fa-duoton-icon [icon]="faDuoIcon" shake="true"></fa-duoton-icon>

Custom styles

--fa-animation-delay: 0;  
--fa-animation-direction: normal;
--fa-animation-duration: 1s;
--fa-animation-iteration-count: infinite;
--fa-animation-timing: linear;

Beat Animation

<fa-icon [icon]="faMonoIcon" beat="true"></fa-icon>
...
<fa-duoton-icon [icon]="faDuoIcon" beat="true"></fa-duoton-icon>

Custom styles

--fa-animation-delay: 0;  
--fa-animation-direction: normal;
--fa-animation-duration: 1s;
--fa-animation-iteration-count: infinite;
--fa-animation-timing: ease-in-out;

Fade Animation

<fa-icon [icon]="faMonoIcon" fade="true"></fa-icon>
...
<fa-duoton-icon [icon]="faDuoIcon" fade="true"></fa-duoton-icon>

Custom styles

--fa-animation-delay: 0ms;
--fa-animation-direction: normal;
--fa-animation-duration: 1s;
--fa-animation-iteration-count: infinite;
--fa-animation-timing: cubic-bezier(.4,0,.6,1);

Beat-fade Animation

<fa-icon [icon]="faMonoIcon" beat-fade="true"></fa-icon>
...
<fa-duoton-icon [icon]="faDuoIcon" beat-fade="true"></fa-duoton-icon>

Custom styles

--fa-animation-iteration-count: infinite;
--fa-animation-timing: cubic-bezier(.4,0,.6,1);
--fa-animation-delay: 0ms;
--fa-animation-direction: normal;
--fa-animation-duration: 1s;

ICONS

icons-duo	import	icons-duo	import
	import {csAirportClient} from '@coroborsystems/angular-theme/duo';		import {csAirport} from '@coroborsystems/angular-theme/duo';
	import {csAngleLeft} from '@coroborsystems/angular-theme/duo';		import {csAngleRight} from '@coroborsystems/angular-theme/duo';
	import {csArchive} from '@coroborsystems/angular-theme/duo';		import {csArrivalAirport} from '@coroborsystems/angular-theme/duo';
	import {csAwos} from '@coroborsystems/angular-theme/duo';		import {csBackward} from '@coroborsystems/angular-theme/duo';
	import {csBadgeDollar} from '@coroborsystems/angular-theme/duo';		import {csBatteryBolt} from '@coroborsystems/angular-theme/duo';
	import {csBatteryEmpty} from '@coroborsystems/angular-theme/duo';		import {csBatteryExclamation} from '@coroborsystems/angular-theme/duo';
	import {csBatteryFull} from '@coroborsystems/angular-theme/duo';		import {csBatteryHalf} from '@coroborsystems/angular-theme/duo';
	import {csBatteryLevel} from '@coroborsystems/angular-theme/duo';		import {csBatteryQuarter} from '@coroborsystems/angular-theme/duo';
	import {csBatteryQuestion} from '@coroborsystems/angular-theme/duo';		import {csBatterySlash} from '@coroborsystems/angular-theme/duo';
	import {csBatteryThreeQuarters} from '@coroborsystems/angular-theme/duo';		import {csBell} from '@coroborsystems/angular-theme/duo';
	import {csBinoculars} from '@coroborsystems/angular-theme/duo';		import {csCalendarCheck} from '@coroborsystems/angular-theme/duo';
	import {csCameraMovie} from '@coroborsystems/angular-theme/duo';		import {csCap} from '@coroborsystems/angular-theme/duo';
	import {csCarBattery} from '@coroborsystems/angular-theme/duo';		import {csChargingRule} from '@coroborsystems/angular-theme/duo';
	import {csChevronDoubleLeft} from '@coroborsystems/angular-theme/duo';		import {csChevronDoubleRight} from '@coroborsystems/angular-theme/duo';
	import {csChevronLeft} from '@coroborsystems/angular-theme/duo';		import {csChevronRight} from '@coroborsystems/angular-theme/duo';
	import {csClipboardListCheck} from '@coroborsystems/angular-theme/duo';		import {csControlTower} from '@coroborsystems/angular-theme/duo';
	import {csCoroborLogo} from '@coroborsystems/angular-theme/duo';		import {csDailyWeather} from '@coroborsystems/angular-theme/duo';
	import {csDataLoggerAlt} from '@coroborsystems/angular-theme/duo';		import {csDataLogger} from '@coroborsystems/angular-theme/duo';
	import {csDatabase} from '@coroborsystems/angular-theme/duo';		import {csDepartureAirport} from '@coroborsystems/angular-theme/duo';
	import {csEnvelopeCheck} from '@coroborsystems/angular-theme/duo';		import {csEnvelopeTimes} from '@coroborsystems/angular-theme/duo';
	import {csFastBackward} from '@coroborsystems/angular-theme/duo';		import {csFastForward} from '@coroborsystems/angular-theme/duo';
	import {csFighterJet} from '@coroborsystems/angular-theme/duo';		import {csFileInvoice} from '@coroborsystems/angular-theme/duo';
	import {csFileIonvoiceDollar} from '@coroborsystems/angular-theme/duo';		import {csFileSearch} from '@coroborsystems/angular-theme/duo';
	import {csFlightFolder} from '@coroborsystems/angular-theme/duo';		import {csFlightTime} from '@coroborsystems/angular-theme/duo';
	import {csFolderOpen} from '@coroborsystems/angular-theme/duo';		import {csFolderTree} from '@coroborsystems/angular-theme/duo';
	import {csFolder} from '@coroborsystems/angular-theme/duo';		import {csForecastDual} from '@coroborsystems/angular-theme/duo';
	import {csForward} from '@coroborsystems/angular-theme/duo';		import {csHandshake} from '@coroborsystems/angular-theme/duo';
	import {csHouseFlood} from '@coroborsystems/angular-theme/duo';		import {csIoc} from '@coroborsystems/angular-theme/duo';
	import {csLayerGroup} from '@coroborsystems/angular-theme/duo';		import {csLayerMinus} from '@coroborsystems/angular-theme/duo';
	import {csLayerPlus} from '@coroborsystems/angular-theme/duo';		import {csLowVisibility} from '@coroborsystems/angular-theme/duo';
	import {csMap} from '@coroborsystems/angular-theme/duo';		import {csMeasures} from '@coroborsystems/angular-theme/duo';
	import {csNeo} from '@coroborsystems/angular-theme/duo';		import {csOctagon} from '@coroborsystems/angular-theme/duo';
	import {csPhotoVideo} from '@coroborsystems/angular-theme/duo';		import {csPlaneAlt} from '@coroborsystems/angular-theme/duo';
	import {csPlaneArrival} from '@coroborsystems/angular-theme/duo';		import {csPlaneDeparture} from '@coroborsystems/angular-theme/duo';
	import {csPlane} from '@coroborsystems/angular-theme/duo';		import {csPlay} from '@coroborsystems/angular-theme/duo';
	import {csPresentWeather} from '@coroborsystems/angular-theme/duo';		import {csPrintMedia} from '@coroborsystems/angular-theme/duo';
	import {csRecipients} from '@coroborsystems/angular-theme/duo';		import {csRepeat} from '@coroborsystems/angular-theme/duo';
	import {csRoad} from '@coroborsystems/angular-theme/duo';		import {csServer} from '@coroborsystems/angular-theme/duo';
	import {csSliderH} from '@coroborsystems/angular-theme/duo';		import {csSolarPanel} from '@coroborsystems/angular-theme/duo';
	import {csStepBackward} from '@coroborsystems/angular-theme/duo';		import {csStepForward} from '@coroborsystems/angular-theme/duo';
	import {csStopwatch} from '@coroborsystems/angular-theme/duo';		import {csTideGaugeBis} from '@coroborsystems/angular-theme/duo';
	import {csTideGauge} from '@coroborsystems/angular-theme/duo';		import {csTowerStation} from '@coroborsystems/angular-theme/duo';
	import {csWaitingForFlight} from '@coroborsystems/angular-theme/duo';		import {csWaterLevel} from '@coroborsystems/angular-theme/duo';
	import {csWaterLevel2} from '@coroborsystems/angular-theme/duo';		import {csWaterPressureLevel} from '@coroborsystems/angular-theme/duo';
	import {csWeatherMeasure} from '@coroborsystems/angular-theme/duo';		import {csWindRose} from '@coroborsystems/angular-theme/duo';

icons-mono	import	icons-mono	import
	import {csAcorn} from '@coroborsystems/angular-theme/mono';		import {csAdWarning} from '@coroborsystems/angular-theme/mono';
	import {csAirportDownStairs} from '@coroborsystems/angular-theme/mono';		import {csAirportTowerAlt} from '@coroborsystems/angular-theme/mono';
	import {csAirportTower} from '@coroborsystems/angular-theme/mono';		import {csCapAvalanche} from '@coroborsystems/angular-theme/mono';
	import {csCapExtremeCold} from '@coroborsystems/angular-theme/mono';		import {csCapFlood} from '@coroborsystems/angular-theme/mono';
	import {csCapHeatWave} from '@coroborsystems/angular-theme/mono';		import {csCapSandstorm} from '@coroborsystems/angular-theme/mono';
	import {csCapSnowAndIce} from '@coroborsystems/angular-theme/mono';		import {csCapStrongWind} from '@coroborsystems/angular-theme/mono';
	import {csCapThunderstorm} from '@coroborsystems/angular-theme/mono';		import {csCapTropicalCyclone} from '@coroborsystems/angular-theme/mono';
	import {csCapWaves} from '@coroborsystems/angular-theme/mono';		import {csClockLight} from '@coroborsystems/angular-theme/mono';
	import {csCloudAmount} from '@coroborsystems/angular-theme/mono';		import {csClouds} from '@coroborsystems/angular-theme/mono';
	import {csCompass} from '@coroborsystems/angular-theme/mono';		import {csControlTower} from '@coroborsystems/angular-theme/mono';
	import {csCrown} from '@coroborsystems/angular-theme/mono';		import {csDeparturesAirport} from '@coroborsystems/angular-theme/mono';
	import {csForecastMono} from '@coroborsystems/angular-theme/mono';		import {csFreetext} from '@coroborsystems/angular-theme/mono';
	import {csGrassHopper} from '@coroborsystems/angular-theme/mono';		import {csGust} from '@coroborsystems/angular-theme/mono';
	import {csHail} from '@coroborsystems/angular-theme/mono';		import {csHeavyRainWarning} from '@coroborsystems/angular-theme/mono';
	import {csIata} from '@coroborsystems/angular-theme/mono';		import {csIcao} from '@coroborsystems/angular-theme/mono';
	import {csLowCloud} from '@coroborsystems/angular-theme/mono';		import {csMetReport} from '@coroborsystems/angular-theme/mono';
	import {csMetar} from '@coroborsystems/angular-theme/mono';		import {csNeo} from '@coroborsystems/angular-theme/mono';
	import {csNetwork} from '@coroborsystems/angular-theme/mono';		import {csOctagon} from '@coroborsystems/angular-theme/mono';
	import {csOpmetAmdar} from '@coroborsystems/angular-theme/mono';		import {csOpmetTaf} from '@coroborsystems/angular-theme/mono';
	import {csOpmetTemp} from '@coroborsystems/angular-theme/mono';		import {csPlaneFrontView} from '@coroborsystems/angular-theme/mono';
	import {csRunway} from '@coroborsystems/angular-theme/mono';		import {csSensor} from '@coroborsystems/angular-theme/mono';
	import {csShower} from '@coroborsystems/angular-theme/mono';		import {csSquallLines} from '@coroborsystems/angular-theme/mono';
	import {csStationSelector} from '@coroborsystems/angular-theme/mono';		import {csStrongWindWarning} from '@coroborsystems/angular-theme/mono';
	import {csSurfaceWind} from '@coroborsystems/angular-theme/mono';		import {csTemperaturePressure} from '@coroborsystems/angular-theme/mono';
	import {csThunderstorm} from '@coroborsystems/angular-theme/mono';		import {csTide} from '@coroborsystems/angular-theme/mono';
	import {csTornado} from '@coroborsystems/angular-theme/mono';		import {csTowerStation} from '@coroborsystems/angular-theme/mono';
	import {csTrend} from '@coroborsystems/angular-theme/mono';		import {csTwoPassports} from '@coroborsystems/angular-theme/mono';
	import {csVariation} from '@coroborsystems/angular-theme/mono';		import {csWaitingForFlight} from '@coroborsystems/angular-theme/mono';
	import {csWeatherPhenomenons} from '@coroborsystems/angular-theme/mono';		import {csWind} from '@coroborsystems/angular-theme/mono';
	import {csWindsock} from '@coroborsystems/angular-theme/mono';		import {csWmo} from '@coroborsystems/angular-theme/mono';