elm-native-library/app/_app-common.scss
2023-01-17 12:45:54 +05:30

95 lines
2.0 KiB
SCSS

@import '@nativescript/theme/core';
@import '@nativescript/theme/blue';
@import '@nativescript/theme/scss/variables/blue';
// Place any CSS rules you want to apply on both iOS and Android here.
// This is where the vast majority of your CSS code goes.
// Font icon class
.fab {
font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
font-weight: 400;
}
.fas {
font-family: 'Font Awesome 5 Free', 'fa-solid-900';
font-weight: 900;
}
.far {
font-family: 'Font Awesome 5 Free', 'fa-regular-400';
font-weight: 400;
}
// Custom styles
.cars-list {
&__item {
padding: 0 0 8 0;
@include colorize($background-color: background-alt-10);
&-content {
padding: 8 15 4 15;
border-bottom-width: 10;
border-bottom-color: #e4e4e4;
@include colorize($background-color: background);
}
&-name,
&-icon {
@include colorize($contrasted-color: complementary background 30% 0%);
}
}
}
// Custom styles
.car-list {
&-even,
&-odd {
padding: 10 15;
margin: 0;
border-bottom-width: const(border-width);
@include colorize($border-color: background-alt-20);
}
&-odd {
@include colorize($background-color: background-alt-10, $color: secondary);
}
&__value {
width: 65;
text-align: right;
@include colorize($contrasted-color: complementary background 30% 10%);
}
TextField.placeholder-error {
@include colorize($placeholder-color: error);
}
Slider {
@include colorize($contrasted-background-color: complementary background 20% 0%,
$contrasted-color: complementary background 20% 0%);
}
}
.thumb {
background-size: cover;
background-repeat: no-repeat;
font-size: 25;
font-weight: bold;
&__add {
background-color: transparent;
border-radius: const(border-radius-sm);
border-width: const(border-width);
@include colorize($border-color: background-alt-20, $color: background-alt-20);
}
&__remove {
background-color: rgba(grey, 0.5);
@include colorize($color: background);
}
}