UNPKG

@intelligenics/application-styles

Version:

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.12.

2 lines 10.3 kB
!function(r,a){"object"==typeof exports&&"undefined"!=typeof module?a(exports,require("@angular/common/http"),require("@angular/core"),require("@angular/common"),require("@angular/router")):"function"==typeof define&&define.amd?define("@intelligenics/application-styles",["exports","@angular/common/http","@angular/core","@angular/common","@angular/router"],a):a(((r=r||self).intelligenics=r.intelligenics||{},r.intelligenics["application-styles"]={}),r.ng.common.http,r.ng.core,r.ng.common,r.ng.router)}(this,(function(r,a,n,i,s){"use strict";var l=function(){function r(){}return r.decorators=[{type:n.Component,args:[{selector:"int-application-styles",template:'<div class="container">\r\n <div class="row mt-4">\r\n <div class="col"> \r\n <h1 class="display-4">Styles Key</h1>\r\n <p class="lead">\r\n This represents the standard layout and colour schemes defined for an application. The layout uses standard bootstrap version 4 and all the\r\n bootstrap elements, except the javascript based entities are available.\r\n </p> \r\n </div>\r\n </div>\r\n <div class="row mt-4 ">\r\n <div class="col">\r\n <h1>Colouring</h1><hr />\r\n </div>\r\n </div>\r\n <div class="row mt-4">\r\n <div class="col-4 ">\r\n <div class="row mt-2">\r\n <div class="col int-application-styles__primary">\r\n </div>\r\n <div class="col">\r\n Primary Colour\r\n </div>\r\n </div>\r\n <div class="row mt-2">\r\n <div class="col int-application-styles__secondary">\r\n </div>\r\n <div class="col">\r\n Secondary Colour\r\n </div>\r\n </div>\r\n <div class="row mt-2">\r\n <div class="col int-application-styles__tertiary">\r\n </div>\r\n <div class="col">\r\n Tertiary Colour\r\n </div>\r\n </div>\r\n </div>\r\n <div class="col-4">\r\n <div class="row mt-2">\r\n <div class="col int-application-styles__grey10">\r\n\r\n </div>\r\n <div class="col">\r\n Grey 10% black\r\n </div>\r\n </div>\r\n <div class="row mt-2">\r\n <div class="col int-application-styles__grey20">\r\n\r\n </div>\r\n <div class="col">\r\n Grey 20% black\r\n </div>\r\n </div>\r\n <div class="row mt-2">\r\n <div class="col int-application-styles__grey30">\r\n\r\n </div>\r\n <div class="col">\r\n Grey 30% black\r\n </div>\r\n </div>\r\n <div class="row mt-2">\r\n <div class="col int-application-styles__grey40">\r\n\r\n </div>\r\n <div class="col">\r\n Grey 40% black\r\n </div>\r\n </div>\r\n <div class="row mt-2">\r\n <div class="col int-application-styles__grey50">\r\n\r\n </div>\r\n <div class="col">\r\n Grey 50% black\r\n </div>\r\n </div>\r\n </div>\r\n <div class="col-4">\r\n <div class="row mt-2">\r\n <div class="col int-application-styles__grey60">\r\n\r\n </div>\r\n <div class="col">\r\n Grey 60% black\r\n </div>\r\n </div>\r\n <div class="row mt-2">\r\n <div class="col int-application-styles__grey70">\r\n\r\n </div>\r\n <div class="col">\r\n Grey 70% black\r\n </div>\r\n </div>\r\n <div class="row mt-2">\r\n <div class="col int-application-styles__grey80">\r\n\r\n </div>\r\n <div class="col">\r\n Grey 80% black\r\n </div>\r\n </div>\r\n <div class="row mt-2">\r\n <div class="col int-application-styles__grey90">\r\n\r\n </div>\r\n <div class="col">\r\n Grey 90% black\r\n </div>\r\n </div>\r\n <div class="row mt-2">\r\n <div class="col int-application-styles__white">\r\n\r\n </div>\r\n <div class="col">\r\n White\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class="row mt-4">\r\n <div class="col"><h1>Typography</h1><hr /></div>\r\n </div>\r\n <div class="row mt-4">\r\n <div class="col-4">\r\n <h1>Headings</h1>\r\n <hr />\r\n <h1 class="mt-4">This is a h1 element</h1>\r\n <h2 class="mt-4">This is a h2 element</h2>\r\n <h3 class="mt-4">This is a h3 element</h3>\r\n <h4 class="mt-4">This is a h4 element</h4>\r\n <h5 class="mt-4">This is a h5 element</h5>\r\n <h6 class="mt-4">This is a h6 element</h6> \r\n </div>\r\n <div class="col-4">\r\n <h1>Bullet lists</h1>\r\n <hr />\r\n <ul>\r\n <li>This is a list element</li>\r\n <li>This is a list element</li>\r\n <li>This is a list element</li>\r\n <li>This is a list element</li>\r\n </ul>\r\n <h1>Iconography</h1>\r\n <p>All icons provided by fontawesome v5</p>\r\n <hr />\r\n <i class="fas fa-chalkboard-teacher fa-2x mr-2"></i>\r\n <i class="fas fa-charging-station fa-2x mr-2"></i>\r\n <i class="fas fa-chart-area fa-2x mr-2"></i>\r\n </div>\r\n <div class="col-4">\r\n <h1>Numbered lists</h1>\r\n <hr />\r\n <ol>\r\n <li>This is a list element</li>\r\n <li>This is a list element</li>\r\n <li>This is a list element</li>\r\n <li>This is a list element</li>\r\n </ol>\r\n </div>\r\n </div>\r\n <div class="row mt-4">\r\n <div class="col">\r\n <h1>Paragraph</h1>\r\n <p class="mt-4">\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\r\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation\r\n ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in\r\n voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\r\n non proident, sunt in culpa qui officia deserunt mollit anim id est laborum\r\n </p>\r\n </div> \r\n </div>\r\n \r\n <div class="row">\r\n <div class="col">\r\n <h1>Alerts</h1>\r\n <div class="alert alert-primary" role="alert">\r\n This is a primary alert—check it out!\r\n </div>\r\n <div class="alert alert-secondary" role="alert">\r\n This is a secondary alert—check it out!\r\n </div>\r\n <div class="alert alert-success" role="alert">\r\n This is a success alert—check it out!\r\n </div>\r\n <div class="alert alert-danger" role="alert">\r\n This is a danger alert—check it out!\r\n </div>\r\n <div class="alert alert-warning" role="alert">\r\n This is a warning alert—check it out!\r\n </div>\r\n <div class="alert alert-info" role="alert">\r\n This is a info alert—check it out!\r\n </div>\r\n <div class="alert alert-light" role="alert">\r\n This is a light alert—check it out!\r\n </div>\r\n <div class="alert alert-dark" role="alert">\r\n This is a dark alert—check it out!\r\n </div>\r\n </div>\r\n </div>\r\n <div class="row">\r\n <div class="col">\r\n <h1>Navigation Bars</h1>\r\n <nav class="navbar navbar-dark bg-primary">\r\n <a class="navbar-brand" href="#">Primary</a>\r\n <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"\r\n aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">\r\n <span class="navbar-toggler-icon"></span>\r\n </button>\r\n <div class="collapse navbar-collapse" id="navbarNavAltMarkup">\r\n <div class="navbar-nav">\r\n <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>\r\n <a class="nav-item nav-link" href="#">Features</a>\r\n <a class="nav-item nav-link" href="#">Pricing</a>\r\n <a class="nav-item nav-link disabled" href="#">Disabled</a>\r\n </div>\r\n </div>\r\n </nav>\r\n\r\n <nav class="navbar navbar-dark bg-secondary">\r\n <a class="navbar-brand" href="#">Secondary</a>\r\n <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"\r\n aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">\r\n <span class="navbar-toggler-icon"></span>\r\n </button>\r\n <div class="collapse navbar-collapse" id="navbarNavAltMarkup">\r\n <div class="navbar-nav">\r\n <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>\r\n <a class="nav-item nav-link" href="#">Features</a>\r\n <a class="nav-item nav-link" href="#">Pricing</a>\r\n <a class="nav-item nav-link disabled" href="#">Disabled</a>\r\n </div>\r\n </div>\r\n </nav>\r\n\r\n <nav class="navbar navbar-light" style="background-color: #e3f2fd;">\r\n <a class="navbar-brand" href="#">Light</a>\r\n <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"\r\n aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">\r\n <span class="navbar-toggler-icon"></span>\r\n </button>\r\n <div class="collapse navbar-collapse" id="navbarNavAltMarkup">\r\n <div class="navbar-nav">\r\n <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>\r\n <a class="nav-item nav-link" href="#">Features</a>\r\n <a class="nav-item nav-link" href="#">Pricing</a>\r\n <a class="nav-item nav-link disabled" href="#">Disabled</a>\r\n </div>\r\n </div>\r\n </nav>\r\n </div>\r\n </div>\r\n</div>\r\n',host:{class:"int-application-styles"}}]}],r}(),e=function(){function r(){}return r.decorators=[{type:n.NgModule,args:[{imports:[a.HttpClientModule,i.CommonModule,s.RouterModule],exports:[],declarations:[l],providers:[]}]}],r}();r.StylesModule=e,r.ɵa=l,Object.defineProperty(r,"__esModule",{value:!0})})); //# sourceMappingURL=intelligenics-application-styles.umd.min.js.map