mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
fix(demo): improve dashboard and ui features pages
This commit is contained in:
KostyaDanovsky
parent
8127f98f3c
commit
b10e5e9ae5
20 changed files with 158 additions and 158 deletions
|
|
@ -1,52 +1,34 @@
|
|||
@import '../../styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
.left-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > * {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
> * {
|
||||
padding: 0 1.25rem;
|
||||
border-right: 1px solid nga-theme(separator);
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-buttons button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.control-icon.ion-navicon {
|
||||
.navigation {
|
||||
padding-right: nga-theme(padding);
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.7rem;
|
||||
padding: 0 nga-theme(padding);
|
||||
font-size: 1.75rem;
|
||||
font-weight: nga-theme(font-weight-bolder);
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
border-left: 1px solid nga-theme(separator);
|
||||
|
||||
a {
|
||||
font-weight: normal;
|
||||
span {
|
||||
font-weight: nga-theme(font-weight-normal);
|
||||
}
|
||||
}
|
||||
|
||||
.theme-buttons {
|
||||
margin-left: 3rem;
|
||||
button {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ import { UserService } from '../../../@core/data/users.service';
|
|||
selector: 'ngx-header',
|
||||
styleUrls: ['./header.component.scss'],
|
||||
template: `
|
||||
<div class="left">
|
||||
<a (click)="toggleSidebar()" href="#"><i class="control-icon ion ion-navicon"></i></a>
|
||||
<span class="logo" (click)="goToHome()">NgX <a>Admin</a></span>
|
||||
<div class="left-container">
|
||||
<a (click)="toggleSidebar()" href="#" class="navigation"><i class="ion-navicon"></i></a>
|
||||
<div class="logo" (click)="goToHome()">NgX <span>Admin</span></div>
|
||||
<div class="theme-buttons">
|
||||
<button class="btn btn-hero-primary" (click)="selectCosmicTheme()">Cosmic</button>
|
||||
<button class="btn btn-hero-warning" (click)="selectLightTheme()">Light</button>
|
||||
|
|
|
|||
|
|
@ -3,21 +3,7 @@
|
|||
}
|
||||
|
||||
.nga-theme-cosmic {
|
||||
// Styles for cards without separator
|
||||
nga-card nga-card-header + nga-card-body {
|
||||
padding-top: 0;
|
||||
}
|
||||
nga-card nga-card-body + nga-card-footer {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
// Styles for modals without separator
|
||||
.modal-content .modal-header + .modal-body {
|
||||
padding-top: 0;
|
||||
}
|
||||
.modal-content .modal-body + .modal-footer {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//global styles for the whole application
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
|
||||
<div class="row">
|
||||
<div class="col-lg-3">
|
||||
<nga-card size="xsmall">
|
||||
<nga-card size="xsmall" class="solar-card">
|
||||
<nga-card-header>Solar Energy Consumption</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-solar [chartValue]="72"></ngx-solar>
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
</div>
|
||||
|
||||
<div class="col-lg-3">
|
||||
<nga-card size="xsmall">
|
||||
<nga-card size="xsmall" class="traffic-card">
|
||||
<nga-card-header>Traffic Consumption</nga-card-header>
|
||||
<nga-card-body class="p-0">
|
||||
<ngx-traffic></ngx-traffic>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,18 @@
|
|||
@import '../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
.solar-card nga-card-header {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.traffic-card {
|
||||
nga-card-header {
|
||||
border: none;
|
||||
}
|
||||
|
||||
nga-card-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,13 +39,11 @@
|
|||
ul {
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid nga-theme(separator);
|
||||
border-bottom: 1px solid nga-theme(separator);
|
||||
}
|
||||
|
||||
ul li a {
|
||||
font-weight: nga-theme(font-weight-bolder);
|
||||
padding: 0.5rem 1rem 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
ul li.active {
|
||||
|
|
|
|||
|
|
@ -75,10 +75,10 @@
|
|||
</g>
|
||||
|
||||
<g [attr.id]="room.id" [class.selected-room]="selectedRoom == room.id" *ngFor="let room of sortedRooms">
|
||||
<path class="room-bg" (click)="roomSelected(room.id)" [attr.d]="room.area.d" />
|
||||
<path class="room-bg" (click)="selectRoom(room.id)" [attr.d]="room.area.d" />
|
||||
<path class="room-border" [attr.d]="room.border.d" />
|
||||
<path class="room-border room-border-glow" [attr.d]="room.border.d" />
|
||||
<text class="room-text" (click)="roomSelected(room.id)" text-anchor="middle"
|
||||
<text class="room-text" (click)="selectRoom(room.id)" text-anchor="middle"
|
||||
[attr.x]="room.name.x" [attr.y]="room.name.y">{{room.name.text}}</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ export class RoomSelectorComponent {
|
|||
};
|
||||
|
||||
constructor() {
|
||||
this.sortRooms();
|
||||
this.selectRoom('2');
|
||||
}
|
||||
|
||||
private sortRooms() {
|
||||
|
|
@ -71,7 +71,7 @@ export class RoomSelectorComponent {
|
|||
});
|
||||
}
|
||||
|
||||
roomSelected(roomNumber) {
|
||||
selectRoom(roomNumber) {
|
||||
this.selectedRoom = roomNumber;
|
||||
this.sortRooms();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,23 +19,26 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="cameras" *ngIf="!isSingleView">
|
||||
<div class="camera" *ngFor="let c of cameras" [style.background-image]="'url(' + c.source + ')'" (click)="selectCamera(c)">
|
||||
<span>{{ c.title }}</span>
|
||||
<div class="camera" *ngFor="let camera of cameras" [style.background-image]="'url(' + camera.source + ')'"
|
||||
(click)="selectCamera(camera)">
|
||||
<span>{{ camera.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
<nga-card-footer>
|
||||
<nga-actions size="medium">
|
||||
<nga-action icon="ion-navicon"></nga-action>
|
||||
<nga-actions size="medium" fullWidth>
|
||||
<nga-action>
|
||||
<nga-search type="rotate-layout"></nga-search>
|
||||
<i class="ion-ios-pause-outline"></i><span>Pause</span>
|
||||
</nga-action>
|
||||
<nga-action icon="ion-ios-email-outline"></nga-action>
|
||||
<nga-action disabled icon="ion-ios-bell-outline"></nga-action>
|
||||
<nga-action>
|
||||
<nga-user [menu]="userMenu" name="Han Solo"></nga-user>
|
||||
<i class="ion-navicon"></i><span>Log View</span>
|
||||
</nga-action>
|
||||
<nga-action>
|
||||
<i class="ion-ios-search"></i><span>Search</span>
|
||||
</nga-action>
|
||||
<nga-action>
|
||||
<i class="ion-ios-gear-outline"></i><span>Setup</span>
|
||||
</nga-action>
|
||||
<nga-action icon="ion-ios-gear-outline"></nga-action>
|
||||
</nga-actions>
|
||||
</nga-card-footer>
|
||||
</nga-card>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,18 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
nga-card {
|
||||
nga-card-header {
|
||||
padding: 0;
|
||||
}
|
||||
nga-card-header {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
nga-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
nga-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nga-card-footer {
|
||||
padding: 1rem 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cameras-card-header {
|
||||
|
|
@ -32,26 +36,34 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: nga-theme(color-fg);
|
||||
border-left: 1px solid #342e73;
|
||||
}
|
||||
|
||||
a:first-child {
|
||||
border-left: 1px solid nga-theme(separator);
|
||||
}
|
||||
|
||||
a:last-child {
|
||||
border-top-right-radius: nga-theme(card-border-radius);
|
||||
}
|
||||
|
||||
a.active {
|
||||
background-color: #342e73;
|
||||
color: #00d990;
|
||||
text-shadow: 0 4px 10px rgba(33, 7, 77, 0.4), 0 0 12px rgba(0, 217, 144, 0.4);
|
||||
background-color: nga-theme(color-bg-active);
|
||||
color: nga-theme(color-fg-highlight);
|
||||
text-shadow: 0 0 12px rgba(nga-theme(color-fg-highlight), 0.4);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cameras {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
|
||||
.camera {
|
||||
position: relative;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
// TODO: Use calculated height
|
||||
height: 278px;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
|
||||
span {
|
||||
|
|
@ -71,7 +83,7 @@
|
|||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 278px;
|
||||
height: 100%;
|
||||
opacity: 0.2;
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
|
@ -83,14 +95,27 @@
|
|||
|
||||
.cameras.single-view {
|
||||
.camera {
|
||||
// TODO: Use calculated height
|
||||
height: 556px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
&::before {
|
||||
// TODO: Use calculated height
|
||||
height: 556px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nga-action {
|
||||
i {
|
||||
color: nga-theme(color-fg);
|
||||
font-size: 2.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: nga-theme(font-family-secondary);
|
||||
font-weight: nga-theme(font-weight-bold);
|
||||
color: nga-theme(color-fg-heading);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,6 @@
|
|||
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
ngx-echarts-pie, ngx-echarts-bar, ngx-echarts-line {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.echart {
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
<nga-card size="medium">
|
||||
<nga-card-body>
|
||||
<div class="team-photo">
|
||||
<a href="mailto:contact@akveo.com">
|
||||
<button type="button" class="btn btn-success btn-icon team-link">
|
||||
<i class="ion-paper-airplane"></i>
|
||||
</button>
|
||||
</a>
|
||||
<div class="team-photo">
|
||||
<a href="mailto:contact@akveo.com">
|
||||
<button type="button" class="btn btn-success btn-icon team-link">
|
||||
<i class="ion-paper-airplane"></i>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="team-info">
|
||||
<div class="team-title">
|
||||
<h2>Akveo Team</h2>
|
||||
</div>
|
||||
<div class="team-info">
|
||||
<div class="team-title">
|
||||
<h2>Akveo Team</h2>
|
||||
</div>
|
||||
<div class="team-subtitle">Design & Development</div>
|
||||
<div class="team-bio">
|
||||
We're small team of fullstack software experts. We're crazy about creation of modern and secure software. We help to make
|
||||
your product amazing.
|
||||
</div>
|
||||
<div class="team-subtitle">Design & Development</div>
|
||||
<div class="team-bio">
|
||||
We're small team of fullstack software experts. We're crazy about creation of modern and secure software. We help to make
|
||||
your product amazing.
|
||||
</div>
|
||||
</nga-card-body>
|
||||
<nga-card-footer>
|
||||
</div>
|
||||
|
||||
<div class="links">
|
||||
<a href="https://www.akveo.com" target="_blank">
|
||||
<i class="ion-ios-world-outline"></i>
|
||||
</a>
|
||||
|
|
@ -31,5 +31,5 @@
|
|||
<a href="https://github.com/akveo" target="_blank">
|
||||
<i class="ion-social-github"></i>
|
||||
</a>
|
||||
</nga-card-footer>
|
||||
</div>
|
||||
</nga-card>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,31 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
@import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons';
|
||||
|
||||
@include nga-install-component() {
|
||||
|
||||
.team-photo {
|
||||
background-image: url('./~/assets/images/team.jpg');
|
||||
background-image: url('~/assets/images/team.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
// TODO: Use calculated height
|
||||
height: 200px;
|
||||
position: relative;
|
||||
border-top-left-radius: nga-theme(card-border-radius);
|
||||
border-top-right-radius: nga-theme(card-border-radius);
|
||||
|
||||
flex: 1;
|
||||
max-height: 50%;
|
||||
|
||||
.team-link {
|
||||
border-radius: 50%;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
bottom: -2rem;
|
||||
right: 1rem;
|
||||
box-shadow: btn-hero-shadow();
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4px 10px 0 rgba(nga-theme(layout-bg), 0.4), 0 0 12px 0 rgba(nga-theme(color-fg-highlight), 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.team-info {
|
||||
padding: 2rem 1.5rem;
|
||||
padding-bottom: 0;
|
||||
padding: 1.5rem 1.5rem 0;
|
||||
|
||||
.team-title {
|
||||
color: nga-theme(color-fg-heading);
|
||||
|
|
@ -50,21 +49,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
nga-card > nga-card-body {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nga-card > nga-card-footer {
|
||||
.links {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 1rem 0;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: nga-theme(color-fg);
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
canvas {
|
||||
border-radius: nga-theme(card-border-radius);
|
||||
/deep/ canvas {
|
||||
border-bottom-left-radius: nga-theme(card-border-radius);
|
||||
border-bottom-right-radius: nga-theme(card-border-radius);
|
||||
}
|
||||
|
||||
.echart {
|
||||
|
|
|
|||
|
|
@ -7,12 +7,11 @@
|
|||
}
|
||||
|
||||
:host {
|
||||
nga-card-header, nga-card-body {
|
||||
padding-bottom: 0;
|
||||
nga-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nga-card-footer {
|
||||
text-align: right;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
<nga-card-body>
|
||||
<nga-search type="simple-search" tag="simple-search"></nga-search>
|
||||
</nga-card-body>
|
||||
<nga-card-footer></nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
|
@ -18,7 +17,6 @@
|
|||
<nga-card-body>
|
||||
<nga-search type="rotate-layout" tag="rotate-layout"></nga-search>
|
||||
</nga-card-body>
|
||||
<nga-card-footer></nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -31,7 +29,6 @@
|
|||
<nga-card-body>
|
||||
<nga-search type="modal-zoomin" tag="modal-zoomin"></nga-search>
|
||||
</nga-card-body>
|
||||
<nga-card-footer></nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
|
@ -42,7 +39,6 @@
|
|||
<nga-card-body>
|
||||
<nga-search type="modal-move" tag="modal-move"></nga-search>
|
||||
</nga-card-body>
|
||||
<nga-card-footer></nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
|
@ -53,7 +49,6 @@
|
|||
<nga-card-body>
|
||||
<nga-search type="modal-drop" tag="modal-drop"></nga-search>
|
||||
</nga-card-body>
|
||||
<nga-card-footer></nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
|
@ -64,7 +59,6 @@
|
|||
<nga-card-body>
|
||||
<nga-search type="modal-half" tag="modal-half"></nga-search>
|
||||
</nga-card-body>
|
||||
<nga-card-footer></nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
|
@ -75,7 +69,6 @@
|
|||
<nga-card-body>
|
||||
<nga-search type="curtain" tag="curtain"></nga-search>
|
||||
</nga-card-body>
|
||||
<nga-card-footer></nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
|
@ -86,7 +79,6 @@
|
|||
<nga-card-body>
|
||||
<nga-search type="column-curtain" tag="column-curtain"></nga-search>
|
||||
</nga-card-body>
|
||||
<nga-card-footer></nga-card-footer>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -117,8 +117,7 @@
|
|||
<p class="text-indent">
|
||||
Far far away, behind the word mountains, far from the countries <strong>Vokalia</strong> and <strong>Consonantia</strong>,
|
||||
there live the blind texts.
|
||||
Separated they live in <strong>Bookmarksgrove</strong>
|
||||
right at the coast of the Semantics, a large language ocean.
|
||||
Separated they live in <strong>Bookmarksgrove</strong>.
|
||||
</p>
|
||||
<p class="text-indent">
|
||||
A small <strong>river named Duden</strong> flows by their place and supplies it with the
|
||||
|
|
@ -140,14 +139,14 @@
|
|||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
<blockquote class="blockquote">
|
||||
<p class="mb-0">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.</p>
|
||||
<p class="mb-0">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.
|
||||
</blockquote>
|
||||
<blockquote class="blockquote">
|
||||
<p class="mb-0">Far far away, behind the word mountains, far from the countries.</p>
|
||||
<footer class="blockquote-footer">Vladimir Lugovsky</footer>
|
||||
</blockquote>
|
||||
<blockquote class="blockquote-reverse">
|
||||
<p class="mb-0">Far far away, behind the word mountains, far from the countries.</p>
|
||||
<p class="mb-0">Far far away, behind the word mountains.</p>
|
||||
<footer class="blockquote-footer">Vladimir Lugovsky</footer>
|
||||
</blockquote>
|
||||
</nga-card-body>
|
||||
|
|
@ -164,56 +163,56 @@
|
|||
<div class="colors">
|
||||
<div class="item text-heading">
|
||||
<div class="color bg-heading"></div>
|
||||
<div class="color-name">
|
||||
<div>
|
||||
<h5 class="text-heading">Heading Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="item text-body">
|
||||
<div class="color bg-body"></div>
|
||||
<div class="color-name">
|
||||
<div>
|
||||
<h5 class="text-body">Body Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="item text-hint">
|
||||
<div class="color bg-hint"></div>
|
||||
<div class="color-name">
|
||||
<div>
|
||||
<h5 class="text-hint">Hint Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="item text-primary">
|
||||
<div class="color bg-primary"></div>
|
||||
<div class="color-name">
|
||||
<div>
|
||||
<h5 class="text-primary">Primary Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="item text-success">
|
||||
<div class="color bg-success"></div>
|
||||
<div class="color-name">
|
||||
<div>
|
||||
<h5 class="text-success">Link/Hightlight Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="item text-info">
|
||||
<div class="color bg-info"></div>
|
||||
<div class="color-name">
|
||||
<div>
|
||||
<h5 class="text-info">Info Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="item text-warning">
|
||||
<div class="color bg-warning"></div>
|
||||
<div class="color-name">
|
||||
<div>
|
||||
<h5 class="text-warning">Warning Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="item text-danger">
|
||||
<div class="color bg-danger"></div>
|
||||
<div class="color-name">
|
||||
<div>
|
||||
<h5 class="text-danger">Danger Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,22 +14,31 @@
|
|||
}
|
||||
|
||||
.font-row {
|
||||
margin-bottom: 3rem;
|
||||
&:first-child {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 1.125rem;
|
||||
margin-bottom: 1.125rem;
|
||||
border-bottom: 1px solid rgba(nga-theme(color-fg), 0.1);
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid nga-theme(separator);
|
||||
color: nga-theme(color-fg-heading);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div:first-child {
|
||||
|
|
@ -83,5 +92,9 @@
|
|||
border-bottom-left-radius: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 126 KiB |
BIN
src/assets/images/team.png
Normal file
BIN
src/assets/images/team.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 610 KiB |
Loading…
Add table
Add a link
Reference in a new issue