@uoh/theme
A collection of University of Haifa SCSS themes to be integrated in an Angular project using Material Design.
Installation
To install this library, run:
$ npm install @uoh/theme --save
Include the theme:
You can add all the theme features at once or one by one:
Adding all the theme features:
You can include all the theme features by writing the following lines in your styles.scss
file:\
@import '~@uoh/theme/theme';
@include uoh-theme();
Adding the features one by one:
Adding the basic (core) theme:
Once installed, you can include the core theming in your styles.scss
by writing:
@import '~@uoh/theme/theme';
@include uoh-core();
Please, note that in order to set the dark-theme
you have to use the same name for the class.
Adding the layout support:
After the core theming was installed, you can import the layout including some presets as the fill-remaining-space
class to fill the remaining space in a flexbox and the medium-card
and small-card
classes to set mat-cards with different sizes.
There is also a row
class to set rows.
To add the layout support write the following lines in your styles.scss
:
@import '~@uoh/theme/theme';
@include uoh-core();
@include uoh-layout();
Adding responsive mat-table support:
Once the core theming was added, you can include the table responsive theming in your styles.scss
by writing:
@import '~@uoh/theme/theme';
@include uoh-core();
@include uoh-table();
In order to utilize the responsive support in your tables you need to add a title property to each column as follows:
<table mat-table [dataSource]="dataSource" matSort dir="rtl">
<ng-container matColumnDef="courseName">
<th mat-cell-header *matHeaderCellDef mat-sort-header>קורס</th>
<td mat-cell *matCellDef="let course" class="row-title">
{{course.courseNumber}} - {{course.courseName}}
</td>
</ng-container>
<ng-container matColumnDef="lecturer">
<th mat-cell-header *matHeaderCellDef mat-sort-header>מרצה</th>
<td mat-cell title="מרצה" *matCellDef="let course">{{course.lecturer}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsDisplayed"></tr>
<tr mat-row *matRowDef="let course; columns: columnsDisplayed" (click)="selection.toggle(course)"></tr>
</table>
In mobile this will be transformed to something similar as the following:
(course number) - (course name)
קורס: (lecturer)
Please, note that the row-title
class transforms the cell into a kind of a header in the mobile version.
Include your custom component theme:
Once the core theming was installed, you can use the $default-theme
and $dark-theme
variables in order to your components themes:
@import '~@uoh/theme/theme';
@import './app/_app.component.theme.scss';
@include uoh-core();
@include app-theme($default-theme);
// You have to use the same class name to be compatible with the core.
.dark-theme {
@include app-theme($dark-theme);
}