Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-20 17:30:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(iot): kitten widget

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-18 16:35:58 +03:00
parent 46ce65bf88
commit 8b55e678af
2 changed files with 23 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/app/pages/dashboard/kitten/kitten.component.html
View file

@ -1,30 +1,25 @@
<nb-card size="medium"> <nb-card size="medium">
<nb-card-body>
<div class="picture" style.background-image="url('assets/images/kitten-{{currentTheme}}.png')"></div> <div class="picture" style.background-image="url('assets/images/kitten-{{currentTheme}}.png')"></div>
<div class="details"> <div class="details">
<div class="title"> <div class="h4">UI Kitten</div>
React Native UI Kitten
</div>
<div class="description"> <div class="description">
React Native UI Kitten is a framework that contains a set of commonly used UI components styled in a similar way. The most awesome thing: you can change themes on the fly by just passing a different set of variables. 100% native. Give our kitten a try! UI Kitten is a framework that contains a set of commonly used UI components styled in a similar way. The most awesome thing: you can change themes on the fly by just passing a different set of variables. 100% native. Give our kitten a try!
</div> </div>
</div> </div>
</nb-card-body>
<nb-card-footer> <nb-card-footer>
<a href="https://akveo.github.io/react-native-ui-kitten" target="_blank"> <a href="https://akveo.github.io/react-native-ui-kitten" target="_blank">
<i class="ion-ios-world"></i> <nb-icon icon="globe" pack="eva"></nb-icon>
</a> </a>
<a href="https://itunes.apple.com/us/app/kitten-tricks/id1246143230" target="_blank"> <a href="https://itunes.apple.com/us/app/kitten-tricks/id1246143230" target="_blank">
<i class="ion-social-apple"></i> <i class="link-icon ion-social-apple"></i>
</a> </a>
<a href="https://play.google.com/store/apps/details?id=com.akveo.kittenTricks" target="_blank"> <a href="https://play.google.com/store/apps/details?id=com.akveo.kittenTricks" target="_blank">
<i class="ion-social-android"></i> <i class="link-icon ion-social-android"></i>
</a> </a>
<a href="https://github.com/akveo/react-native-ui-kitten" target="_blank"> <a href="https://github.com/akveo/react-native-ui-kitten" target="_blank">
<i class="ion-social-github"></i> <nb-icon icon="github" pack="eva"></nb-icon>
</a> </a>
</nb-card-footer> </nb-card-footer>
</nb-card> </nb-card>

44
src/app/pages/dashboard/kitten/kitten.component.scss
View file

@ -2,12 +2,6 @@
@include nb-install-component() { @include nb-install-component() {
nb-card-body {
display: flex;
flex-direction: column;
padding: 0;
}
.picture { .picture {
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@ -18,48 +12,28 @@
} }
.details { .details {
padding: 1.25rem 1.25rem 0; padding: nb-theme(card-padding);
.title {
font-family: nb-theme(font-secondary);
font-weight: nb-theme(font-weight-bold);
color: nb-theme(color-fg-heading);
font-size: 1.5rem;
margin-bottom: 1rem;
@include nb-for-theme(cosmic) {
font-weight: nb-theme(font-weight-bolder);
}
} }
.description { .description {
text-align: justify; text-align: justify;
color: nb-theme(color-fg-text);
font-weight: nb-theme(font-weight-light);
overflow: hidden;
text-overflow: ellipsis;
max-height: calc(1rem * 8 * #{nb-theme(line-height)});
}
} }
nb-card-footer { nb-card-footer {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
padding: 0.75rem 0; align-items: center;
border: none;
a {
text-decoration: none;
color: nb-theme(color-fg);
&:hover {
color: nb-theme(color-fg-heading);
} }
i { .link-icon {
font-size: 1.75rem; font-size: 1.75rem;
} }
nb-icon {
font-size: 1.55rem;
::ng-deep svg {
vertical-align: top;
} }
} }
} }