1146 lines
48 KiB
HTML
Executable File
1146 lines
48 KiB
HTML
Executable File
<div class="grid">
|
|
<div class="col-12">
|
|
<div class="card docs no-margin">
|
|
|
|
<h4>Current Version</h4>
|
|
<p>Angular 13 and PrimeNG 13</p>
|
|
|
|
<h4>Getting Started</h4>
|
|
<p>Sakai is an application template for Angular and is distributed as a CLI project. In case CLI is not installed already, use
|
|
the command below to set it up.
|
|
</p>
|
|
|
|
<h4>Dependencies</h4>
|
|
<p>Sakai has no direct dependency other than PrimeNG. More information about dependencies is available at <a href="https://www.primefaces.org/why-primeng-templates/">Why PrimeNG Templates</a> article.</p>
|
|
|
|
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
|
npm install -g @angular/cli
|
|
</app-code>
|
|
|
|
<p>Once CLI is ready in your system, extract the contents of the Sakai zip file distribution, cd to the directory,
|
|
install the libraries from npm and then execute "ng serve" to run the application in your local environment.</p>
|
|
|
|
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
|
cd sakai-ng
|
|
npm install
|
|
ng serve
|
|
</app-code>
|
|
|
|
<p>The application should run at http://localhost:4200/, you may now start with the development of your application.</p>
|
|
|
|
<h4>Important CLI Commands</h4>
|
|
<p>Following commands are derived from CLI.</p>
|
|
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
|
Run 'ng serve' for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
|
|
|
Run 'ng generate component component-name' to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
|
|
|
|
Run 'ng build' to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
|
|
|
|
Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github.io).
|
|
|
|
Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
|
|
|
|
Run 'ng help' for more options.
|
|
</app-code>
|
|
|
|
<h5>Structure</h5>
|
|
<p>Sakai consists of 2 main parts; the application layout, layout resources. <i>app.component.html</i> inside app folder is the html template for the base layout,
|
|
required resources for the layout are placed inside the <i>src/assets/layout</i> folder and similarly theme resources are inside <i>src/assets/theme</i> folder.
|
|
</p>
|
|
|
|
<h5>Application Template</h5>
|
|
<p>Main layout is the html template of the app.main.component.ts, it is divided into a couple of sections such as topbar, sidebar, right panel and footer. Here is the code for
|
|
the main template. The component class app.main.component.ts implements the logic such as opening menus and managing layout modes.
|
|
</p>
|
|
<app-code ngPreserveWhitespaces ngNonBindable>
|
|
<div class="layout-wrapper" [ngClass]="{
|
|
'layout-overlay':isOverlay(),
|
|
'layout-static':isStatic(),
|
|
'layout-theme-light': !app.darkMode,
|
|
'layout-theme-dark': app.darkMode,
|
|
'layout-overlay-sidebar-active': overlayMenuActive,
|
|
'layout-static-sidebar-inactive': staticMenuInactive,
|
|
'layout-mobile-sidebar-active': menuActiveMobile,
|
|
'p-ripple-disabled': !app.ripple, 'p-input-filled' : app.inputStyle === 'filled'}"
|
|
|
|
<app-topbar></app-topbar>
|
|
|
|
<div class="layout-sidebar">
|
|
<app-menu></app-menu>
|
|
</div>
|
|
|
|
<div class="layout-main-container">
|
|
<div class="layout-main">
|
|
<router-outlet></router-outlet>
|
|
</div>
|
|
|
|
<app-footer></app-footer>
|
|
</div>
|
|
|
|
<app-config></app-config>
|
|
|
|
<div class="layout-mask p-component-overlay"></div>
|
|
</div>
|
|
</app-code>
|
|
|
|
<h5>Menu</h5>
|
|
<p>Menu is a separate component defined in app.menu.component.ts file based on PrimeNG MenuModel API. In order to define the menuitems,
|
|
navigate to this file and define your own model as a nested structure. Here is the menu component from the sample application.</p>
|
|
|
|
<div style="height:400px;overflow: auto;">
|
|
<app-code ngPreserveWhitespaces ngNonBindable lang="javascript">
|
|
import { Component, OnInit } from '@angular/core';
|
|
import { AppMainComponent } from './app.main.component';
|
|
|
|
@Component({
|
|
selector: 'app-menu',
|
|
templateUrl: './app.menu.component.html'
|
|
})
|
|
export class AppMenuComponent implements OnInit, AfterViewInit {
|
|
|
|
model: any[];
|
|
|
|
constructor(public appMain: AppMainComponent) { }
|
|
|
|
ngOnInit() {
|
|
this.model = [
|
|
{label: 'Dashboard', icon: 'pi pi-home', routerLink: ['/']},
|
|
{
|
|
label: 'UI Kit', icon: 'pi pi-star', routerLink: ['/uikit'],
|
|
items: [
|
|
{label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout']},
|
|
{label: 'Input', icon: 'pi pi-fw pi-check-square', routerLink: ['/uikit/input']},
|
|
{label: 'Float Label', icon: 'pi pi-fw pi-bookmark', routerLink: ['/uikit/floatlabel']},
|
|
{label: 'Invalid State', icon: 'pi pi-fw pi-exclamation-circle', routerLink: ['/uikit/invalidstate']},
|
|
{label: 'Button', icon: 'pi pi-fw pi-mobile', routerLink: ['/uikit/button'], class: 'rotated-icon'},
|
|
{label: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table']},
|
|
{label: 'List', icon: 'pi pi-fw pi-list', routerLink: ['/uikit/list']},
|
|
{label: 'Tree', icon: 'pi pi-fw pi-share-alt', routerLink: ['/uikit/tree']},
|
|
{label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel']},
|
|
{label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay']},
|
|
{label: 'Media', icon: 'pi pi-fw pi-image', routerLink: ['/uikit/media']},
|
|
{label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu']},
|
|
{label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message']},
|
|
{label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file']},
|
|
{label: 'Chart', icon: 'pi pi-fw pi-chart-bar', routerLink: ['/uikit/charts']},
|
|
{label: 'Misc', icon: 'pi pi-fw pi-circle-off', routerLink: ['/uikit/misc']}
|
|
]
|
|
},
|
|
{
|
|
label: 'Pages', icon: 'pi pi-fw pi-briefcase', routerLink: ['/pages'],
|
|
items: [
|
|
{label: 'Crud', icon: 'pi pi-fw pi-pencil', routerLink: ['/pages/crud']},
|
|
{label: 'Timeline', icon: 'pi pi-fw pi-calendar', routerLink: ['/pages/timeline']},
|
|
{label: 'Not Found', icon: 'pi pi-fw pi-exclamation-circle', routerLink: ['/notfound']},
|
|
{label: 'Empty', icon: 'pi pi-fw pi-circle-off', routerLink: ['/pages/empty']}
|
|
]
|
|
},
|
|
{
|
|
label: 'Hierarchy', icon: 'pi pi-fw pi-align-left',
|
|
items: [
|
|
{
|
|
label: 'Submenu 1', icon: 'pi pi-fw pi-bookmark',
|
|
items: [
|
|
{
|
|
label: 'Submenu 1.1', icon: 'pi pi-fw pi-bookmark',
|
|
items: [
|
|
{label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark'},
|
|
{label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark'},
|
|
{label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark'},
|
|
]
|
|
},
|
|
{
|
|
label: 'Submenu 1.2', icon: 'pi pi-fw pi-bookmark',
|
|
items: [
|
|
{label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark'}
|
|
]
|
|
},
|
|
]
|
|
},
|
|
{
|
|
label: 'Submenu 2', icon: 'pi pi-fw pi-bookmark',
|
|
items: [
|
|
{
|
|
label: 'Submenu 2.1', icon: 'pi pi-fw pi-bookmark',
|
|
items: [
|
|
{label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark'},
|
|
{label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark'},
|
|
]
|
|
},
|
|
{
|
|
label: 'Submenu 2.2', icon: 'pi pi-fw pi-bookmark',
|
|
items: [
|
|
{label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark'},
|
|
]
|
|
},
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: 'Start', icon: 'pi pi-fw pi-download',
|
|
items: [
|
|
{
|
|
label: 'Buy Now', icon: 'pi pi-fw pi-shopping-cart', url: ['https://www.primefaces.org/store']
|
|
},
|
|
{
|
|
label: 'Documentation', icon: 'pi pi-fw pi-info-circle', routerLink: ['/documentation']
|
|
}
|
|
]
|
|
}
|
|
];
|
|
}
|
|
}
|
|
</app-code>
|
|
</div>
|
|
|
|
<h4>Integration with an Existing CLI Project</h4>
|
|
<p>To setup Sakai in an existing project, follow the steps below;</p>
|
|
|
|
<ul>
|
|
<li>Copy the <i>src/assets</i> folder to your projects folder with the same name</li>
|
|
<li>Copy all app.* files to the src/app folder of your application.</li>
|
|
</ul>
|
|
|
|
<p>Install PrimeNG</p>
|
|
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
|
npm install primeng@latest --save
|
|
npm install primeicons@latest --save
|
|
</app-code>
|
|
|
|
<p>Add PrimeNG CSS at styles section in angular.json.</p>
|
|
|
|
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
|
"styles": [
|
|
"styles.scss" //your styles and overrides
|
|
],
|
|
</app-code>
|
|
|
|
<p>Last part is adding theme and layout css files, in the CLI app they are defined using link tags in index.html so the demo can switch them on
|
|
the fly by changing the path however if this is not a requirement, you may also add them to the styles configuration above so they go inside the bundle.</p>
|
|
|
|
<h5>Theme</h5>
|
|
<p>Sakai uses the free Saga, Arya and Vela themes which are distributed within PrimeNG, however it can be used with any PrimeNG theme as well such as material, tailwind and bootstrap.</p>
|
|
|
|
<h5>SASS Variables</h5>
|
|
<p>In case you'd like to customize the layout variables, open <i>_variables.scss</i> file under src/layout folder. Saving the changes
|
|
will be reflected instantly at your browser.</p>
|
|
|
|
<h6>src/assets/_variables.scss</h6>
|
|
|
|
<p>A custom theme can be developed by the following steps.</p>
|
|
<ul>
|
|
<li>Choose a custom theme name such as "mytheme".</li>
|
|
<li>Create a folder named "mytheme" under <i>assets/theme folder</i>.</li>
|
|
<li>Create a file such as theme.scss under <i>assets/theme/mytheme folder</i>.</li>
|
|
<li>Define the variables listed below in your file and import the <i>../../sass/theme/_theme.scss</i> file.</li>
|
|
<li>Build the scss to generate css</li>
|
|
<li>Include the generated theme.css to your page.</li>
|
|
</ul>
|
|
|
|
<p>Here are the variables required to create a theme.</p>
|
|
<app-code ngPreserveWhitespaces ngNonBindable lang="css">
|
|
$primaryLightColor: #777BF1;
|
|
$primaryColor:#464DF2;
|
|
$primaryDarkColor: #221ED9;
|
|
$primaryDarkerColor: #1222B9;
|
|
$primaryTextColor: #FFFFFF;
|
|
$primaryLighterColor: rgba($primaryLightColor,.1);
|
|
|
|
$highlightBg: $primaryColor;
|
|
$highlightTextColor: $primaryTextColor;
|
|
|
|
@import '../../sass/theme/_theme_light';
|
|
</app-code>
|
|
|
|
<p> An example sass command to compile the css would be;</p>
|
|
|
|
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
|
sass --update src/assets/theme/mytheme/theme.scss:src/assets/theme/mytheme/theme.css
|
|
</app-code>
|
|
|
|
<p>Watch mode is handy to avoid compiling everytime when a change is made, instead use the following command
|
|
so that sass generates the file whenever you make a customization. This builds all css files whenever a change is made to any scss file.</p>
|
|
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
|
sass --watch src/assets/theme/mytheme/theme.scss:src/assets/theme/mytheme/theme.css
|
|
</app-code>
|
|
|
|
<p>Same can also be applied to layout itself;</p>
|
|
<ul>
|
|
<li>Choose a layout name such as layout-myown.</li>
|
|
<li>Create an empty file named layout-myown.scss inside <i>assets/layout/css</i> folder.</li>
|
|
<li>Define the variables listed below and import the <i>/sass/layout/_layout.scss</i> file.</li>
|
|
<li>Build the scss to generate css</li>
|
|
<li>Serve the css by importing it using a link tag or a bundler.</li>
|
|
</ul>
|
|
|
|
<p>Here are the variables required to create a layout.</p>
|
|
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
|
@import '../../sass/layout/_layout_light';
|
|
</app-code>
|
|
|
|
<h4>SASS Variables</h4>
|
|
<p>Both the theme and layout provides various variables to customize the design.</p>
|
|
|
|
<h5>sass/variables/layout/_layout_common.scss</h5>
|
|
<p>Common variables for light and dark application layout.</p>
|
|
<app-code ngPreserveWhitespaces ngNonBindable lang="css">
|
|
$fontSize:14px !default;
|
|
$fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
|
$mobileBreakpoint:991px !default;
|
|
$borderRadius:24px !default;
|
|
$animationDuration:.2s !default;
|
|
$animationTimingFunction:cubic-bezier(.05,.74,.2,.99) !default;
|
|
$letterSpacing:0.02em !default;
|
|
$transitionDuration:.2s !default;
|
|
$tabletBreakpoint:991px !default;
|
|
$phoneBreakpoint:576px !default;
|
|
</app-code>
|
|
|
|
<h5>sass/variables/layout/_layout_light.scss</h5>
|
|
<p>Variables of the light theme layout.</p>
|
|
<app-code ngPreserveWhitespaces ngNonBindable lang="css">
|
|
$bodyBgColor:#F2F4F6 !default;
|
|
|
|
//text
|
|
$textShade100:#3E4754 !default;
|
|
$textShade200:rgba(41, 50, 65, 0.8) !default;
|
|
$textShade300:rgba(41, 50, 65, 0.5) !default;
|
|
|
|
//content
|
|
$contentShade100:#ffffff !default;
|
|
$contentShade200: #F7FAFF !default;
|
|
$contentShade300: #EEF5FF !default;
|
|
$contentShade400: #F7F7F8 !default;
|
|
$dividerColor: #D4D6D9 !default;
|
|
|
|
$menuTooltipBgColor:#293241!default;
|
|
$menuTooltipTextColor:#ffffff !default;
|
|
|
|
@import './_layout_common.scss';
|
|
</app-code>
|
|
|
|
<h5>sass/variables/theme/_theme_light</h5>
|
|
<p>Variables of the light component theme, see the <a href="https://www.primefaces.org/designer/api/primeng/11.1.0/">Theme Designer API</a> for documentation.</p>
|
|
<div style="height:400px;overflow: auto;">
|
|
<app-code ngPreserveWhitespaces ngNonBindable lang="css">
|
|
//reused color variables
|
|
$shade000:#ffffff !default; //surface
|
|
$shade100:#FCFCFC !default; //header background
|
|
$shade200:rgba($primaryColor,.2) !default; //hover background
|
|
$shade300:#D4D6D9 !default; //border, divider
|
|
$shade400:#D4D6D9 !default; //input border
|
|
$shade500:#545B67 !default; //input icon
|
|
$shade600:#83888F !default; //text secondary color
|
|
$shade700:#69707A !default; //text color
|
|
$shade800:#343a40 !default; //unused
|
|
$shade900:#212529 !default; //unused
|
|
|
|
//global
|
|
$fontFamily:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
|
$fontSize:1rem !default;
|
|
$fontWeight:normal !default;
|
|
$textColor:$shade700 !default;
|
|
$textSecondaryColor:$shade600 !default;
|
|
$borderRadius:6px !default;
|
|
$transitionDuration:.2s !default;
|
|
$formElementTransition:background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
|
|
$actionIconTransition:background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
|
|
$listItemTransition:box-shadow $transitionDuration !default;
|
|
$primeIconFontSize:1rem !default;
|
|
$divider:1px solid $shade300 !default;
|
|
$inlineSpacing:.5rem !default;
|
|
$disabledOpacity:.6 !default;
|
|
$maskBg:rgba(0, 0, 0, 0.4) !default;
|
|
$loadingIconFontSize:2rem !default;
|
|
$errorColor:#f44336 !default;
|
|
|
|
//scale
|
|
$scaleSM:0.875 !default;
|
|
$scaleLG:1.25 !default;
|
|
|
|
//focus
|
|
$focusOutlineColor:$primaryLightColor !default;
|
|
$focusOutline:0 none !default;
|
|
$focusOutlineOffset:0 !default;
|
|
$focusShadow:0 0 0 0.2rem $focusOutlineColor !default;
|
|
|
|
//action icons
|
|
$actionIconWidth:2rem !default;
|
|
$actionIconHeight:2rem !default;
|
|
$actionIconBg:transparent !default;
|
|
$actionIconBorder:0 none !default;
|
|
$actionIconColor:$shade600 !default;
|
|
$actionIconHoverBg:$shade200 !default;
|
|
$actionIconHoverBorderColor:transparent !default;
|
|
$actionIconHoverColor:$shade700 !default;
|
|
$actionIconBorderRadius:50% !default;
|
|
|
|
//input field (e.g. inputtext, spinner, inputmask)
|
|
$inputPadding:.5rem .5rem !default;
|
|
$inputTextFontSize:1rem !default;
|
|
|
|
$inputBg:$shade000 !default;
|
|
$inputTextColor:$shade700 !default;
|
|
$inputIconColor:$shade600 !default;
|
|
$inputBorder:1px solid $shade400 !default;
|
|
$inputHoverBorderColor:$primaryColor !default;
|
|
$inputFocusBorderColor:$primaryColor !default;
|
|
$inputErrorBorderColor:$errorColor !default;
|
|
$inputPlaceholderTextColor:$shade600 !default;
|
|
$inputFilledBg:$shade100 !default;
|
|
$inputFilledHoverBg:$inputFilledBg !default;
|
|
$inputFilledFocusBg:$shade000 !default;
|
|
|
|
//input groups
|
|
$inputGroupBg:$shade200 !default;
|
|
$inputGroupTextColor:$shade600 !default;
|
|
$inputGroupAddOnMinWidth:2.357rem !default;
|
|
|
|
//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
|
|
$inputListBg:$shade000 !default;
|
|
$inputListTextColor:$shade700 !default;
|
|
$inputListBorder:$inputBorder !default;
|
|
$inputListPadding:.5rem 0 !default;
|
|
$inputListItemPadding:.5rem 1rem !default;
|
|
$inputListItemBg:transparent !default;
|
|
$inputListItemTextColor:$shade700 !default;
|
|
$inputListItemHoverBg:$shade200 !default;
|
|
$inputListItemTextHoverColor:$shade700 !default;
|
|
$inputListItemBorder:0 none !default;
|
|
$inputListItemBorderRadius:0 !default;
|
|
$inputListItemMargin:0 !default;
|
|
$inputListItemFocusShadow:inset 0 0 0 0.15rem $focusOutlineColor !default;
|
|
$inputListHeaderPadding:.5rem 1rem !default;
|
|
$inputListHeaderMargin:0 !default;
|
|
$inputListHeaderBg:$shade100 !default;
|
|
$inputListHeaderTextColor:$shade700 !default;
|
|
$inputListHeaderBorder:0 none !default;
|
|
|
|
//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
|
|
$inputOverlayBg:$inputListBg !default;
|
|
$inputOverlayHeaderBg:$inputListHeaderBg !default;
|
|
$inputOverlayBorder:0 none !default;
|
|
$inputOverlayShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
|
|
|
|
//button
|
|
$buttonPadding:.5rem 1rem !default;
|
|
$buttonIconOnlyWidth:2.357rem !default;
|
|
$buttonIconOnlyPadding:.5rem 0 !default;
|
|
$buttonBg:$primaryColor !default;
|
|
$buttonTextColor:$primaryTextColor !default;
|
|
$buttonBorder:1px solid $primaryColor !default;
|
|
$buttonHoverBg:$primaryDarkColor !default;
|
|
$buttonTextHoverColor:$primaryTextColor !default;
|
|
$buttonHoverBorderColor:$primaryDarkColor !default;
|
|
$buttonActiveBg:$primaryDarkerColor !default;
|
|
$buttonTextActiveColor:$primaryTextColor !default;
|
|
$buttonActiveBorderColor:$primaryDarkerColor !default;
|
|
$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
|
|
$roundedButtonBorderRadius:2rem !default;
|
|
|
|
$textButtonHoverBgOpacity:.04 !default;
|
|
$textButtonActiveBgOpacity:.16 !default;
|
|
$outlinedButtonBorder:1px solid !default;
|
|
$plainButtonTextColor:$textSecondaryColor !default;
|
|
$plainButtonHoverBgColor:$shade200 !default;
|
|
$plainButtonActiveBgColor:$shade300 !default;
|
|
|
|
$secondaryButtonBg:#607D8B !default;
|
|
$secondaryButtonTextColor:#ffffff !default;
|
|
$secondaryButtonBorder:1px solid $secondaryButtonBg !default;
|
|
$secondaryButtonHoverBg:scale-color($secondaryButtonBg, $lightness: -10%) !default;
|
|
$secondaryButtonTextHoverColor:$secondaryButtonTextColor !default;
|
|
$secondaryButtonHoverBorderColor:scale-color($secondaryButtonBg, $lightness: -10%) !default;
|
|
$secondaryButtonActiveBg:scale-color($secondaryButtonBg, $lightness: -20%) !default;
|
|
$secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
|
|
$secondaryButtonActiveBorderColor:scale-color($secondaryButtonBg, $lightness: -20%) !default;
|
|
$secondaryButtonFocusShadow:0 0 0 0.2rem scale-color($secondaryButtonBg, $lightness: 60%) !default;
|
|
|
|
$infoButtonBg:#0288D1 !default;
|
|
$infoButtonTextColor:#ffffff !default;
|
|
$infoButtonBorder:1px solid $infoButtonBg !default;
|
|
$infoButtonHoverBg:scale-color($infoButtonBg, $lightness: -10%) !default;
|
|
$infoButtonTextHoverColor:$infoButtonTextColor !default;
|
|
$infoButtonHoverBorderColor:scale-color($infoButtonBg, $lightness: -10%) !default;
|
|
$infoButtonActiveBg:scale-color($infoButtonBg, $lightness: -20%) !default;
|
|
$infoButtonTextActiveColor:$infoButtonTextColor !default;
|
|
$infoButtonActiveBorderColor:scale-color($infoButtonBg, $lightness: -20%) !default;
|
|
$infoButtonFocusShadow:0 0 0 0.2rem scale-color($infoButtonBg, $lightness: 60%) !default;
|
|
|
|
$successButtonBg:#689F38 !default;
|
|
$successButtonTextColor:#ffffff !default;
|
|
$successButtonBorder:1px solid $successButtonBg !default;
|
|
$successButtonHoverBg:scale-color($successButtonBg, $lightness: -10%) !default;
|
|
$successButtonTextHoverColor:$successButtonTextColor !default;
|
|
$successButtonHoverBorderColor:scale-color($successButtonBg, $lightness: -10%) !default;
|
|
$successButtonActiveBg:scale-color($successButtonBg, $lightness: -20%) !default;
|
|
$successButtonTextActiveColor:$successButtonTextColor !default;
|
|
$successButtonActiveBorderColor:scale-color($successButtonBg, $lightness: -20%) !default;
|
|
$successButtonFocusShadow:0 0 0 0.2rem scale-color($successButtonBg, $lightness: 60%) !default;
|
|
|
|
$warningButtonBg:#FBC02D !default;
|
|
$warningButtonTextColor:#212529 !default;
|
|
$warningButtonBorder:1px solid $warningButtonBg !default;
|
|
$warningButtonHoverBg:scale-color($warningButtonBg, $lightness: -10%) !default;
|
|
$warningButtonTextHoverColor:$warningButtonTextColor !default;
|
|
$warningButtonHoverBorderColor:scale-color($warningButtonBg, $lightness: -10%) !default;
|
|
$warningButtonActiveBg:scale-color($warningButtonBg, $lightness: -20%) !default;
|
|
$warningButtonTextActiveColor:$warningButtonTextColor !default;
|
|
$warningButtonActiveBorderColor:scale-color($warningButtonBg, $lightness: -20%) !default;
|
|
$warningButtonFocusShadow:0 0 0 0.2rem scale-color($warningButtonBg, $lightness: 60%) !default;
|
|
|
|
$helpButtonBg:#9C27B0 !default;
|
|
$helpButtonTextColor:#ffffff !default;
|
|
$helpButtonBorder:1px solid $helpButtonBg !default;
|
|
$helpButtonHoverBg:scale-color($helpButtonBg, $lightness: -10%) !default;
|
|
$helpButtonTextHoverColor:$helpButtonTextColor !default;
|
|
$helpButtonHoverBorderColor:scale-color($helpButtonBg, $lightness: -10%) !default;
|
|
$helpButtonActiveBg:scale-color($helpButtonBg, $lightness: -20%) !default;
|
|
$helpButtonTextActiveColor:$helpButtonTextColor !default;
|
|
$helpButtonActiveBorderColor:scale-color($helpButtonBg, $lightness: -20%) !default;
|
|
$helpButtonFocusShadow:0 0 0 0.2rem scale-color($helpButtonBg, $lightness: 60%) !default;
|
|
|
|
$dangerButtonBg:#D32F2F !default;
|
|
$dangerButtonTextColor:#ffffff !default;
|
|
$dangerButtonBorder:1px solid $dangerButtonBg !default;
|
|
$dangerButtonHoverBg:scale-color($dangerButtonBg, $lightness: -10%) !default;
|
|
$dangerButtonTextHoverColor:$dangerButtonTextColor !default;
|
|
$dangerButtonHoverBorderColor:scale-color($dangerButtonBg, $lightness: -10%) !default;
|
|
$dangerButtonActiveBg:scale-color($dangerButtonBg, $lightness: -20%) !default;
|
|
$dangerButtonTextActiveColor:$dangerButtonTextColor !default;
|
|
$dangerButtonActiveBorderColor:scale-color($dangerButtonBg, $lightness: -20%) !default;
|
|
$dangerButtonFocusShadow:0 0 0 0.2rem scale-color($dangerButtonBg, $lightness: 60%) !default;
|
|
|
|
$linkButtonColor:$primaryDarkerColor !default;
|
|
$linkButtonHoverColor:$primaryDarkerColor !default;
|
|
$linkButtonTextHoverDecoration:underline !default;
|
|
$linkButtonFocusShadow:0 0 0 0.2rem $focusOutlineColor !default;
|
|
|
|
//checkbox
|
|
$checkboxWidth:20px !default;
|
|
$checkboxHeight:20px !default;
|
|
$checkboxBorder:2px solid $shade400 !default;
|
|
$checkboxIconFontSize:14px !default;
|
|
$checkboxActiveBorderColor:$primaryColor !default;
|
|
$checkboxActiveBg:$primaryColor !default;
|
|
$checkboxIconActiveColor:$primaryTextColor !default;
|
|
$checkboxActiveHoverBg:$primaryDarkerColor !default;
|
|
$checkboxIconActiveHoverColor:$primaryTextColor !default;
|
|
$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
|
|
|
|
//radiobutton
|
|
$radiobuttonWidth:20px !default;
|
|
$radiobuttonHeight:20px !default;
|
|
$radiobuttonBorder:2px solid $shade400 !default;
|
|
$radiobuttonIconSize:12px !default;
|
|
$radiobuttonActiveBorderColor:$primaryColor !default;
|
|
$radiobuttonActiveBg:$primaryColor !default;
|
|
$radiobuttonIconActiveColor:$primaryTextColor !default;
|
|
$radiobuttonActiveHoverBg:$primaryDarkerColor !default;
|
|
$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
|
|
$radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
|
|
|
|
//colorpicker
|
|
$colorPickerPreviewWidth:2rem !default;
|
|
$colorPickerPreviewHeight:2rem !default;
|
|
$colorPickerBg:#323232 !default;
|
|
$colorPickerBorderColor:#191919 !default;
|
|
$colorPickerHandleColor:$shade000 !default;
|
|
|
|
//togglebutton
|
|
$toggleButtonBg:$inputBg !default;
|
|
$toggleButtonBorder:1px solid $shade400 !default;
|
|
$toggleButtonTextColor:$shade700 !default;
|
|
$toggleButtonIconColor:$shade600 !default;
|
|
$toggleButtonHoverBg:$shade200 !default;
|
|
$toggleButtonHoverBorderColor:$shade400 !default;
|
|
$toggleButtonTextHoverColor:$shade700 !default;
|
|
$toggleButtonIconHoverColor:$shade600 !default;
|
|
$toggleButtonActiveBg:$primaryColor !default;
|
|
$toggleButtonActiveBorderColor:$primaryColor !default;
|
|
$toggleButtonTextActiveColor:$primaryTextColor !default;
|
|
$toggleButtonIconActiveColor:$primaryTextColor !default;
|
|
$toggleButtonActiveHoverBg:$primaryDarkColor !default;
|
|
$toggleButtonActiveHoverBorderColor:$primaryDarkColor !default;
|
|
$toggleButtonTextActiveHoverColor:$primaryTextColor !default;
|
|
$toggleButtonIconActiveHoverColor:$primaryTextColor !default;
|
|
|
|
//inplace
|
|
$inplacePadding:$inputPadding !default;
|
|
$inplaceHoverBg:$shade200 !default;
|
|
$inplaceTextHoverColor:$shade700 !default;
|
|
|
|
//rating
|
|
$ratingIconFontSize:1.143rem !default;
|
|
$ratingCancelIconColor:#e74c3c !default;
|
|
$ratingCancelIconHoverColor:#c0392b !default;
|
|
$ratingStarIconOffColor:$shade700 !default;
|
|
$ratingStarIconOnColor:$primaryColor !default;
|
|
$ratingStarIconHoverColor:$primaryColor !default;
|
|
|
|
//slider
|
|
$sliderBg:$shade300 !default;
|
|
$sliderBorder:0 none !default;
|
|
$sliderHorizontalHeight:.286rem !default;
|
|
$sliderVerticalWidth:0.286rem !default;
|
|
$sliderHandleWidth:1.143rem !default;
|
|
$sliderHandleHeight:1.143rem !default;
|
|
$sliderHandleBg:$shade000 !default;
|
|
$sliderHandleBorder:2px solid $primaryColor !default;
|
|
$sliderHandleBorderRadius:50% !default;
|
|
$sliderHandleHoverBorderColor:$primaryColor !default;
|
|
$sliderHandleHoverBg:$primaryColor !default;
|
|
$sliderRangeBg:$primaryColor !default;
|
|
|
|
//calendar
|
|
$calendarTableMargin:.5rem 0 !default;
|
|
$calendarPadding:.5rem !default;
|
|
$calendarBg:$shade000 !default;
|
|
$calendarInlineBg:$calendarBg !default;
|
|
$calendarTextColor:$shade700 !default;
|
|
$calendarBorder:$inputListBorder !default;
|
|
$calendarOverlayBorder:$inputOverlayBorder !default;
|
|
|
|
$calendarHeaderPadding:.5rem !default;
|
|
$calendarHeaderBg:$shade000 !default;
|
|
$calendarInlineHeaderBg:$calendarBg !default;
|
|
$calendarHeaderBorder:1px solid $shade300 !default;
|
|
$calendarHeaderTextColor:$shade700 !default;
|
|
$calendarHeaderFontWeight:600 !default;
|
|
$calendarHeaderCellPadding:.5rem !default;
|
|
|
|
$calendarCellDatePadding:.5rem !default;
|
|
$calendarCellDateWidth:2.5rem !default;
|
|
$calendarCellDateHeight:2.5rem !default;
|
|
$calendarCellDateBorderRadius:50% !default;
|
|
$calendarCellDateBorder:1px solid transparent !default;
|
|
$calendarCellDateHoverBg:$shade200 !default;
|
|
$calendarCellDateTodayBg:$shade400 !default;
|
|
$calendarCellDateTodayBorderColor:transparent !default;
|
|
$calendarCellDateTodayTextColor:$shade700 !default;
|
|
|
|
$calendarButtonBarPadding:1rem 0 !default;
|
|
$calendarTimePickerPadding:.5rem !default;
|
|
$calendarTimePickerElementPadding:0 .5rem !default;
|
|
$calendarTimePickerTimeFontSize:1.25rem !default;
|
|
|
|
$calendarBreakpoint:769px !default;
|
|
$calendarCellDatePaddingSM:0 !default;
|
|
|
|
//input switch
|
|
$inputSwitchWidth:3rem !default;
|
|
$inputSwitchHeight:1.75rem !default;
|
|
$inputSwitchBorderRadius:30px !default;
|
|
$inputSwitchHandleWidth:1.250rem !default;
|
|
$inputSwitchHandleHeight:1.250rem !default;
|
|
$inputSwitchHandleBorderRadius:50% !default;
|
|
$inputSwitchSliderPadding:.25rem !default;
|
|
$inputSwitchSliderOffBg:$shade400 !default;
|
|
$inputSwitchHandleOffBg:$shade000 !default;
|
|
$inputSwitchSliderOffHoverBg:scale-color($shade400, $lightness: -10%) !default;
|
|
$inputSwitchSliderOnBg:$primaryColor !default;
|
|
$inputSwitchSliderOnHoverBg:$primaryDarkColor !default;
|
|
$inputSwitchHandleOnBg:$shade000 !default;
|
|
|
|
//panel
|
|
$panelHeaderBorder:1px solid $shade300 !default;
|
|
$panelHeaderBg:$shade100 !default;
|
|
$panelHeaderTextColor:$shade700 !default;
|
|
$panelHeaderFontWeight:600 !default;
|
|
$panelHeaderPadding:1rem !default;
|
|
$panelToggleableHeaderPadding:.5rem 1rem !default;
|
|
|
|
$panelHeaderHoverBg:$shade200 !default;
|
|
$panelHeaderHoverBorderColor:$shade300 !default;
|
|
$panelHeaderTextHoverColor:$shade700 !default;
|
|
|
|
$panelContentBorder:1px solid $shade300 !default;
|
|
$panelContentBg:$shade000 !default;
|
|
$panelContentTextColor:$shade700 !default;
|
|
$panelContentPadding:1rem !default;
|
|
|
|
$panelFooterBorder:1px solid $shade300 !default;
|
|
$panelFooterBg:$shade000 !default;
|
|
$panelFooterTextColor:$shade700 !default;
|
|
$panelFooterPadding:0.5rem 1rem !default;
|
|
|
|
//accordion
|
|
$accordionSpacing:0 !default;
|
|
$accordionHeaderBorder:$panelHeaderBorder !default;
|
|
$accordionHeaderBg:$panelHeaderBg !default;
|
|
$accordionHeaderTextColor:$panelHeaderTextColor !default;
|
|
$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
|
|
$accordionHeaderPadding:$panelHeaderPadding !default;
|
|
|
|
$accordionHeaderHoverBg:$shade200 !default;
|
|
$accordionHeaderHoverBorderColor:$shade300 !default;
|
|
$accordionHeaderTextHoverColor:$shade700 !default;
|
|
|
|
$accordionHeaderActiveBg:$panelHeaderBg !default;
|
|
$accordionHeaderActiveBorderColor:$shade300 !default;
|
|
$accordionHeaderTextActiveColor:$shade700 !default;
|
|
|
|
$accordionHeaderActiveHoverBg:$shade200 !default;
|
|
$accordionHeaderActiveHoverBorderColor:$shade300 !default;
|
|
$accordionHeaderTextActiveHoverColor:$shade700 !default;
|
|
|
|
$accordionContentBorder:$panelContentBorder !default;
|
|
$accordionContentBg:$panelContentBg !default;
|
|
$accordionContentTextColor:$panelContentTextColor !default;
|
|
$accordionContentPadding:$panelContentPadding !default;
|
|
|
|
//tabview
|
|
$tabviewNavBorder:1px solid $shade300 !default;
|
|
$tabviewNavBorderWidth:0 0 2px 0 !default;
|
|
$tabviewNavBg:$shade000 !default;
|
|
|
|
$tabviewHeaderSpacing:0 !default;
|
|
$tabviewHeaderBorder:solid $shade300 !default;
|
|
$tabviewHeaderBorderWidth:0 0 2px 0 !default;
|
|
$tabviewHeaderBorderColor:transparent transparent $shade300 transparent !default;
|
|
$tabviewHeaderBg:$shade000 !default;
|
|
$tabviewHeaderTextColor:$shade600 !default;
|
|
$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
|
|
$tabviewHeaderPadding:$panelHeaderPadding !default;
|
|
$tabviewHeaderMargin:0 0 -2px 0 !default;
|
|
|
|
$tabviewHeaderHoverBg:$shade000 !default;
|
|
$tabviewHeaderHoverBorderColor:$shade600 !default;
|
|
$tabviewHeaderTextHoverColor:$shade600 !default;
|
|
|
|
$tabviewHeaderActiveBg:$shade000 !default;
|
|
$tabviewHeaderActiveBorderColor:$primaryColor !default;
|
|
$tabviewHeaderTextActiveColor:$primaryColor !default;
|
|
|
|
$tabviewContentBorder:0 none !default;
|
|
$tabviewContentBg:$panelContentBg !default;
|
|
$tabviewContentTextColor:$panelContentTextColor !default;
|
|
$tabviewContentPadding:$panelContentPadding !default;
|
|
|
|
//upload
|
|
$fileUploadProgressBarHeight:.25rem !default;
|
|
$fileUploadContentPadding:2rem 1rem !default;
|
|
|
|
//scrollpanel
|
|
$scrollPanelTrackBorder:0 none !default;
|
|
$scrollPanelTrackBg:$shade100 !default;
|
|
|
|
//card
|
|
$cardBodyPadding:1rem !default;
|
|
$cardTitleFontSize:1.5rem !default;
|
|
$cardTitleFontWeight:700 !default;
|
|
$cardSubTitleFontWeight:400 !default;
|
|
$cardSubTitleColor:$shade600 !default;
|
|
$cardContentPadding:1rem 0 !default;
|
|
$cardFooterPadding:1rem 0 0 0 !default;
|
|
$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
|
|
|
|
//editor
|
|
$editorToolbarBg:$panelHeaderBg !default;
|
|
$editorToolbarBorder:$panelHeaderBorder !default;
|
|
$editorToolbarPadding:$panelHeaderPadding !default;
|
|
$editorToolbarIconColor:$textSecondaryColor !default;
|
|
$editorToolbarIconHoverColor:$textColor !default;
|
|
$editorIconActiveColor:$primaryColor !default;
|
|
$editorContentBorder:$panelContentBorder !default;
|
|
$editorContentBg:$panelContentBg !default;
|
|
|
|
//paginator
|
|
$paginatorBg:$shade000 !default;
|
|
$paginatorTextColor:$shade600 !default;
|
|
$paginatorBorder:solid $shade200 !default;
|
|
$paginatorBorderWidth:0 !default;
|
|
$paginatorPadding:.5rem 1rem !default;
|
|
$paginatorElementWidth:$buttonIconOnlyWidth !default;
|
|
$paginatorElementHeight:$buttonIconOnlyWidth !default;
|
|
$paginatorElementBg:transparent !default;
|
|
$paginatorElementBorder:0 none !default;
|
|
$paginatorElementIconColor:$shade600 !default;
|
|
$paginatorElementHoverBg:$shade200 !default;
|
|
$paginatorElementHoverBorderColor:transparent !default;
|
|
$paginatorElementIconHoverColor:$shade700 !default;
|
|
$paginatorElementBorderRadius:$borderRadius !default;
|
|
$paginatorElementMargin:.143rem !default;
|
|
$paginatorElementPadding:0 !default;
|
|
|
|
//table
|
|
$tableHeaderBorder:1px solid $shade200 !default;
|
|
$tableHeaderBorderWidth:1px 0 1px 0 !default;
|
|
$tableHeaderBg:$shade100 !default;
|
|
$tableHeaderTextColor:$shade700 !default;
|
|
$tableHeaderFontWeight:600 !default;
|
|
$tableHeaderPadding:1rem 1rem !default;
|
|
|
|
$tableHeaderCellPadding:1rem 1rem !default;
|
|
$tableHeaderCellBg:$shade100 !default;
|
|
$tableHeaderCellTextColor:$shade700 !default;
|
|
$tableHeaderCellFontWeight:600 !default;
|
|
$tableHeaderCellBorder:1px solid $shade200 !default;
|
|
$tableHeaderCellBorderWidth:0 0 1px 0 !default;
|
|
$tableHeaderCellHoverBg:$shade200 !default;
|
|
$tableHeaderCellTextHoverColor:$shade700 !default;
|
|
$tableHeaderCellIconColor:$shade600 !default;
|
|
$tableHeaderCellIconHoverColor:$shade600 !default;
|
|
$tableHeaderCellHighlightBg:$shade100 !default;
|
|
$tableHeaderCellHighlightTextColor:$primaryColor !default;
|
|
$tableHeaderCellHighlightHoverBg:$shade200 !default;
|
|
$tableHeaderCellHighlightTextHoverColor:$primaryColor !default;
|
|
$tableSortableColumnBadgeSize:1.143rem !default;
|
|
|
|
$tableBodyRowBg:$shade000 !default;
|
|
$tableBodyRowTextColor:$shade700 !default;
|
|
$tableBodyRowEvenBg:scale-color($tableBodyRowBg, $lightness: -1%) !default;
|
|
$tableBodyRowHoverBg:$shade200 !default;
|
|
$tableBodyRowTextHoverColor:$shade700 !default;
|
|
$tableBodyCellBorder:1px solid $shade200 !default;
|
|
$tableBodyCellBorderWidth:0 0 1px 0 !default;
|
|
$tableBodyCellPadding:1rem 1rem !default;
|
|
|
|
$tableFooterCellPadding:1rem 1rem !default;
|
|
$tableFooterCellBg:$shade100 !default;
|
|
$tableFooterCellTextColor:$shade700 !default;
|
|
$tableFooterCellFontWeight:600 !default;
|
|
$tableFooterCellBorder:1px solid $shade200 !default;
|
|
$tableFooterCellBorderWidth:0 0 1px 0 !default;
|
|
$tableResizerHelperBg:$primaryColor !default;
|
|
|
|
$tableFooterBorder:1px solid $shade200 !default;
|
|
$tableFooterBorderWidth:0 0 1px 0 !default;
|
|
$tableFooterBg:$shade100 !default;
|
|
$tableFooterTextColor:$shade700 !default;
|
|
$tableFooterFontWeight:600 !default;
|
|
$tableFooterPadding:1rem 1rem !default;
|
|
|
|
$tableCellContentAlignment:left !default;
|
|
$tableTopPaginatorBorderWidth:0 0 1px 0 !default;
|
|
$tableBottomPaginatorBorderWidth:0 0 1px 0 !default;
|
|
|
|
$tableScaleSM:0.5 !default;
|
|
$tableScaleLG:1.25 !default;
|
|
|
|
//dataview
|
|
$dataViewContentPadding:0 !default;
|
|
$dataViewContentBorder:0 none !default;
|
|
$dataViewListItemBorder:solid $shade200 !default;
|
|
$dataViewListItemBorderWidth:0 0 1px 0 !default;
|
|
|
|
//orderlist, picklist
|
|
$orderListBreakpoint:769px !default;
|
|
$pickListBreakpoint:769px !default;
|
|
|
|
//schedule
|
|
$fullCalendarEventBg:$primaryDarkColor !default;
|
|
$fullCalendarEventBorder:1px solid $primaryDarkColor !default;
|
|
$fullCalendarEventTextColor:$primaryTextColor !default;
|
|
|
|
//tree
|
|
$treeContainerPadding:0.286rem !default;
|
|
$treeNodePadding:0.143rem !default;
|
|
$treeNodeContentPadding:.5rem !default;
|
|
$treeNodeChildrenPadding:0 0 0 1rem !default;
|
|
$treeNodeIconColor:$shade600 !default;
|
|
|
|
//timeline
|
|
$timelineVerticalEventContentPadding:0 1rem !default;
|
|
$timelineHorizontalEventContentPadding:1rem 0 !default;
|
|
$timelineEventMarkerWidth:1rem !default;
|
|
$timelineEventMarkerHeight:1rem !default;
|
|
$timelineEventMarkerBorderRadius:50% !default;
|
|
$timelineEventMarkerBorder:2px solid $primaryColor !default;
|
|
$timelineEventMarkerBackground:$shade000 !default;
|
|
$timelineEventConnectorSize:2px !default;
|
|
$timelineEventColor:$shade300 !default;
|
|
|
|
//org chart
|
|
$organizationChartConnectorColor:$shade300 !default;
|
|
|
|
//message
|
|
$messageMargin:1rem 0 !default;
|
|
$messagePadding:1rem 1.5rem !default;
|
|
$messageBorderWidth:0 0 0 6px !default;
|
|
$messageIconFontSize:1.5rem !default;
|
|
$messageTextFontSize:1rem !default;
|
|
$messageTextFontWeight:500 !default;
|
|
|
|
//inline message
|
|
$inlineMessagePadding:$inputPadding !default;
|
|
$inlineMessageMargin:0 !default;
|
|
$inlineMessageIconFontSize:1rem !default;
|
|
$inlineMessageTextFontSize:1rem !default;
|
|
$inlineMessageBorderWidth:0px !default;
|
|
|
|
//toast
|
|
$toastIconFontSize:2rem !default;
|
|
$toastMessageTextMargin:0 0 0 1rem !default;
|
|
$toastMargin:0 0 1rem 0 !default;
|
|
$toastPadding:1rem !default;
|
|
$toastBorderWidth:0 0 0 6px !default;
|
|
$toastShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
|
|
$toastOpacity:.9 !default;
|
|
$toastTitleFontWeight:700 !default;
|
|
$toastDetailMargin:$inlineSpacing 0 0 0 !default;
|
|
|
|
//severities
|
|
$infoMessageBg:#B3E5FC !default;
|
|
$infoMessageBorder:solid scale-color($infoMessageBg, $lightness: -50%) !default;
|
|
$infoMessageTextColor:scale-color($infoMessageBg, $lightness: -75%) !default;
|
|
$infoMessageIconColor:scale-color($infoMessageBg, $lightness: -75%) !default;
|
|
$successMessageBg:#C8E6C9 !default;
|
|
$successMessageBorder:solid scale-color($successMessageBg, $lightness: -50%) !default;
|
|
$successMessageTextColor:scale-color($successMessageBg, $lightness: -75%) !default;
|
|
$successMessageIconColor:scale-color($successMessageBg, $lightness: -75%) !default;
|
|
$warningMessageBg:#FFECB3 !default;
|
|
$warningMessageBorder:solid scale-color($warningMessageBg, $lightness: -50%) !default;
|
|
$warningMessageTextColor:scale-color($warningMessageBg, $lightness: -75%) !default;
|
|
$warningMessageIconColor:scale-color($warningMessageBg, $lightness: -75%) !default;
|
|
$errorMessageBg:#FFCDD2 !default;
|
|
$errorMessageBorder:solid scale-color($errorMessageBg, $lightness: -50%) !default;
|
|
$errorMessageTextColor:scale-color($errorMessageBg, $lightness: -75%) !default;
|
|
$errorMessageIconColor:scale-color($errorMessageBg, $lightness: -75%) !default;
|
|
|
|
//overlays
|
|
$overlayContentBorder:0 none !default;
|
|
$overlayContentBg:$panelContentBg !default;
|
|
$overlayContainerShadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0,0,0,.12) !default;
|
|
|
|
//dialog
|
|
$dialogHeaderBg:$shade000 !default;
|
|
$dialogHeaderBorder:0 none !default;
|
|
$dialogHeaderTextColor:$shade700 !default;
|
|
$dialogHeaderFontWeight:600 !default;
|
|
$dialogHeaderFontSize:1.25rem !default;
|
|
$dialogHeaderPadding:1.5rem !default;
|
|
$dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
|
|
$dialogFooterBorder:0 none !default;
|
|
$dialogFooterPadding:0 1.5rem 1.5rem 1.5rem !default;
|
|
|
|
//tooltip
|
|
$tooltipBg:$shade700 !default;
|
|
$tooltipTextColor:$shade000 !default;
|
|
$tooltipPadding:$inputPadding !default;
|
|
|
|
//steps
|
|
$stepsItemBg:$shade000 !default;
|
|
$stepsItemBorder:1px solid $shade200 !default;
|
|
$stepsItemTextColor:$shade600 !default;
|
|
$stepsItemNumberWidth:2rem !default;
|
|
$stepsItemNumberHeight:2rem !default;
|
|
$stepsItemNumberFontSize:1.143rem !default;
|
|
$stepsItemNumberColor:$shade700 !default;
|
|
$stepsItemNumberBorderRadius:50% !default;
|
|
$stepsItemActiveFontWeight:600 !default;
|
|
|
|
//progressbar
|
|
$progressBarHeight:1rem !default;
|
|
$progressBarBorder:0 none !default;
|
|
$progressBarBg:$shade300 !default;
|
|
$progressBarValueBg:$primaryColor !default;
|
|
|
|
//menu (e.g. menu, menubar, tieredmenu)
|
|
$menuWidth:12.5rem !default;
|
|
$menuBg:$shade000 !default;
|
|
$menuBorder:1px solid $shade300 !default;
|
|
$menuTextColor:$shade700 !default;
|
|
$menuitemPadding:.75rem 1rem !default;
|
|
$menuitemBorderRadius:0 !default;
|
|
$menuitemTextColor:$shade700 !default;
|
|
$menuitemIconColor:$shade600 !default;
|
|
$menuitemTextHoverColor:$shade700 !default;
|
|
$menuitemIconHoverColor:$shade600 !default;
|
|
$menuitemHoverBg:$shade200 !default;
|
|
$menuitemTextActiveColor:$shade700 !default;
|
|
$menuitemIconActiveColor:$shade600 !default;
|
|
$menuitemActiveBg:$shade200 !default;
|
|
$menuitemSubmenuIconFontSize:.875rem !default;
|
|
$submenuHeaderMargin:0 !default;
|
|
$submenuHeaderPadding:.75rem 1rem !default;
|
|
$submenuHeaderBg:$shade000 !default;
|
|
$submenuHeaderTextColor:$shade700 !default;
|
|
$submenuHeaderBorderRadius:0 !default;
|
|
$submenuHeaderFontWeight:600 !default;
|
|
$overlayMenuBg:$menuBg !default;
|
|
$overlayMenuBorder:0 none !default;
|
|
$overlayMenuShadow:0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12) !default;
|
|
$verticalMenuPadding:.25rem 0 !default;
|
|
$verticalMenuitemMargin:0;
|
|
$menuSeparatorMargin:.25rem 0 !default;
|
|
|
|
$breadcrumbPadding:1rem !default;
|
|
$breadcrumbBg:$menuBg !default;
|
|
$breadcrumbBorder:$menuBorder !default;
|
|
$breadcrumbItemTextColor:$menuitemTextColor !default;
|
|
$breadcrumbItemIconColor:$menuitemIconColor !default;
|
|
$breadcrumbLastItemTextColor:$menuitemTextColor !default;
|
|
$breadcrumbLastItemIconColor:$menuitemIconColor !default;
|
|
$breadcrumbSeparatorColor:$menuitemTextColor !default;
|
|
|
|
$horizontalMenuPadding:.5rem !default;
|
|
$horizontalMenuBg:$shade100 !default;
|
|
$horizontalMenuBorder:$menuBorder !default;
|
|
$horizontalMenuTextColor:$menuTextColor !default;
|
|
$horizontalMenuRootMenuitemPadding:$menuitemPadding !default;
|
|
$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
|
|
$horizontalMenuRootMenuitemTextColor:$menuitemTextColor !default;
|
|
$horizontalMenuRootMenuitemIconColor:$menuitemIconColor !default;
|
|
$horizontalMenuRootMenuitemTextHoverColor:$menuitemTextHoverColor !default;
|
|
$horizontalMenuRootMenuitemIconHoverColor:$menuitemIconHoverColor !default;
|
|
$horizontalMenuRootMenuitemHoverBg:$menuitemHoverBg !default;
|
|
$horizontalMenuRootMenuitemTextActiveColor:$menuitemTextActiveColor !default;
|
|
$horizontalMenuRootMenuitemIconActiveColor:$menuitemIconActiveColor !default;
|
|
$horizontalMenuRootMenuitemActiveBg:$menuitemActiveBg !default;
|
|
|
|
//badge and tag
|
|
$badgeBg:$primaryColor !default;
|
|
$badgeTextColor:$primaryTextColor !default;
|
|
$badgeMinWidth:1.5rem !default;
|
|
$badgeHeight:1.5rem !default;
|
|
$badgeFontWeight:700 !default;
|
|
$badgeFontSize:.75rem !default;
|
|
|
|
$tagPadding:.25rem .4rem !default;
|
|
|
|
//carousel
|
|
$carouselIndicatorsPadding:1rem !default;
|
|
$carouselIndicatorBg:$shade200 !default;
|
|
$carouselIndicatorHoverBg:$shade300 !default;
|
|
$carouselIndicatorBorderRadius:0 !default;
|
|
$carouselIndicatorWidth:2rem !default;
|
|
$carouselIndicatorHeight:.5rem !default;
|
|
|
|
//galleria
|
|
$galleriaMaskBg:rgba(0,0,0,0.9) !default;
|
|
$galleriaCloseIconMargin:.5rem !default;
|
|
$galleriaCloseIconFontSize:2rem !default;
|
|
$galleriaCloseIconBg:transparent !default;
|
|
$galleriaCloseIconColor:$shade100 !default;
|
|
$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
|
|
$galleriaCloseIconHoverColor:$shade100 !default;
|
|
$galleriaCloseIconWidth:4rem !default;
|
|
$galleriaCloseIconHeight:4rem !default;
|
|
$galleriaCloseIconBorderRadius:50% !default;
|
|
|
|
$galleriaItemNavigatorBg:transparent !default;
|
|
$galleriaItemNavigatorColor:$shade100 !default;
|
|
$galleriaItemNavigatorMargin:0 .5rem !default;
|
|
$galleriaItemNavigatorFontSize:2rem !default;
|
|
$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
|
|
$galleriaItemNavigatorHoverColor:$shade100 !default;
|
|
$galleriaItemNavigatorWidth:4rem !default;
|
|
$galleriaItemNavigatorHeight:4rem !default;
|
|
$galleriaItemNavigatorBorderRadius:$borderRadius !default;
|
|
|
|
$galleriaCaptionBg:rgba(0,0,0,.5) !default;
|
|
$galleriaCaptionTextColor:$shade100 !default;
|
|
$galleriaCaptionPadding:1rem !default;
|
|
|
|
$galleriaIndicatorsPadding:1rem !default;
|
|
$galleriaIndicatorBg:$shade200 !default;
|
|
$galleriaIndicatorHoverBg:$shade300 !default;
|
|
$galleriaIndicatorBorderRadius:50% !default;
|
|
$galleriaIndicatorWidth:1rem !default;
|
|
$galleriaIndicatorHeight:1rem !default;
|
|
$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
|
|
$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
|
|
$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
|
|
|
|
$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
|
|
$galleriaThumbnailContainerPadding:1rem .25rem !default;
|
|
$galleriaThumbnailNavigatorBg:transparent !default;
|
|
$galleriaThumbnailNavigatorColor:$shade100 !default;
|
|
$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
|
|
$galleriaThumbnailNavigatorHoverColor:$shade100 !default;
|
|
$galleriaThumbnailNavigatorBorderRadius:50% !default;
|
|
$galleriaThumbnailNavigatorWidth:2rem !default;
|
|
$galleriaThumbnailNavigatorHeight:2rem !default;
|
|
|
|
//divider
|
|
$dividerHorizontalMargin:1rem 0;
|
|
$dividerHorizontalPadding:0 1rem;
|
|
$dividerVerticalMargin:0 1rem;
|
|
$dividerVerticalPadding:1rem 0;
|
|
$dividerSize:1px;
|
|
$dividerColor:$shade300;
|
|
|
|
//avatar
|
|
$avatarBg:$shade300;
|
|
$avatarTextColor:$textColor;
|
|
|
|
//chip
|
|
$chipBg:$shade300;
|
|
$chipTextColor:$textColor;
|
|
$chipBorderRadius: 16px;
|
|
|
|
//scrollTop
|
|
$scrollTopBg:rgba(0,0,0,0.7);
|
|
$scrollTopHoverBg:rgba(0,0,0,0.8);
|
|
$scrollTopWidth:3rem;
|
|
$scrollTopHeight:3rem;
|
|
$scrollTopBorderRadius:50%;
|
|
$scrollTopFontSize:1.5rem;
|
|
$scrollTopTextColor:$shade100;
|
|
|
|
//skeleton
|
|
$skeletonBg:$shade200;
|
|
$skeletonAnimationBg:rgba(255,255,255,0.4);
|
|
|
|
//splitter
|
|
$splitterGutterBg:$shade100;
|
|
$splitterGutterHandleBg:$shade300;
|
|
|
|
:root {
|
|
--surface-a:#{$shade000};
|
|
--surface-b:#{$shade100};
|
|
--surface-c:#{$shade200};
|
|
--surface-d:#{$shade300};
|
|
--surface-e:#{$shade000};
|
|
--surface-f:#{$shade000};
|
|
--text-color:#{$shade700};
|
|
--text-color-secondary:#{$shade600};
|
|
--primary-color:#{$primaryColor};
|
|
--primary-dark-color:#{$primaryDarkColor};
|
|
--primary-light-color:#{$primaryLightColor};
|
|
--primary-lighter-color:#{$primaryLighterColor};
|
|
--primary-color-text:#{$primaryTextColor};
|
|
--font-family:#{$fontFamily};
|
|
}
|
|
</app-code>
|
|
</div>
|
|
|
|
<h4>Menu Modes</h4>
|
|
<p>Menu has 2 modes, static and overlay. Layout container element in app.component.html is used to define which mode to use by adding specific classes. List
|
|
below indicates the style classes for each mode. </p>
|
|
<ul>
|
|
<li>Static: "layout-wrapper layout-static"</li>
|
|
<li>Overlay: "layout-wrapper layout-overlay"</li>
|
|
</ul>
|
|
|
|
<p>For example to create a horizontal menu, the div element should be in following form;</p>
|
|
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
|
<div class="layout-wrapper layout-sidebar">
|
|
</app-code>
|
|
|
|
<p>It is also possible to leave the choice to the user by keeping the preference at a component and using an ngClass expression so that user can switch between modes. Sample
|
|
application has an example implementation of such use case. Refer to app.component.ts for an example.</p>
|
|
|
|
<h4>Grid CSS</h4>
|
|
<p>Sakai uses PrimeNG Flex Grid CSS throughout the demos such as Dashboard, however any Grid library can be used with it since Sakai Layout itself does not depend on PrimeFlex CSS.</p>
|
|
|
|
<h4>Customizing Styles</h4>
|
|
<p>It is suggested to add your customizations in the following sass files under the "sass/overrides" folder instead of adding them to the
|
|
scss files under sass folder to avoid maintenance issues after an update.</p>
|
|
|
|
<ul>
|
|
<li><b>_layout_variables</b>: Variables of the layout.</li>
|
|
<li><b>_layout_styles</b>: Styles for the layout.</li>
|
|
<li><b>_theme_variables</b>: Variables of the theme.</li>
|
|
<li><b>_theme_styles</b>: Styles for the theme.</li>
|
|
</ul>
|
|
|
|
<h4>Migration Guide</h4>
|
|
<p>Every change is included in <b>CHANGELOG.md</b> file at the root folder of the distribution along with the instructions to update.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|