(Global) Use 'Nunito' as a primary font

(Global) Use outline Material Icons
(Global) Removed some unnecessary styles and moved some of them to the related places
This commit is contained in:
sercan 2018-09-21 12:21:04 +03:00
parent c2d5a5a2a5
commit 0643d8c348
56 changed files with 5332 additions and 199 deletions

View File

@ -17,11 +17,10 @@
@include mat-core();
// Partials
@import "partials/reset";
@import "partials/normalize";
@import "partials/scrollbars";
@import "partials/helpers";
@import "partials/global";
@import "partials/general";
@import "partials/icons";
@import "partials/colors";
@import "partials/material";
@ -32,7 +31,6 @@
@import "partials/cards";
@import "partials/navigation";
@import "partials/forms";
@import "partials/toolbar";
@import "partials/print";
// Plugins

View File

@ -0,0 +1,62 @@
// -----------------------------------------------------------------------------------------------------
// @ Body scroll lock
// -----------------------------------------------------------------------------------------------------
html,
body {
display: flex;
flex: 1 0 auto;
width: 100%;
height: 100%;
max-height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
// -----------------------------------------------------------------------------------------------------
// @ Boxed body
// -----------------------------------------------------------------------------------------------------
body {
// Boxed
&.boxed {
max-width: 1200px;
margin: 0 auto;
@include mat-elevation(8);
}
}
/*----------------------------------------------------------------*/
/* @ Text rendering & box sizing
/*----------------------------------------------------------------*/
* {
text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-webkit-text-rendering: optimizeLegibility;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
&:before, &:after {
box-sizing: border-box;
}
// Remove focus outline
&:focus {
outline: none;
}
}
// -----------------------------------------------------------------------------------------------------
// @ Responsive images
// -----------------------------------------------------------------------------------------------------
img {
max-width: 100%;
height: auto;
vertical-align: top;
border: none;
}

View File

@ -1,23 +0,0 @@
html,
body {
display: flex;
flex: 1 0 auto;
width: 100%;
height: 100%;
max-height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
// Boxed
&.boxed {
max-width: 1200px;
margin: 0 auto;
@include mat-elevation(8);
}
}

View File

@ -1,3 +1,10 @@
// Modify the default Material Icons so that we can use the outline icons
.material-icons {
font-family: 'material-outline-icons' !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
i,
mat-icon {
font-size: 24px;

View File

@ -1,76 +0,0 @@
/*----------------------------------------------------------------*/
/* Reset
/*----------------------------------------------------------------*/
* {
text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-webkit-text-rendering: optimizeLegibility;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
&:before, &:after {
box-sizing: border-box;
}
// Remove focus outline
&:focus {
outline: none;
}
}
// Reset non angular-material input's default browser/os styles
*:not(mat-form-field) {
> input {
border: none;
border-radius: 0;
padding: 0;
margin: 0;
}
> input[type="text"],
> input[type="tel"],
> input[type="email"],
> input[type="search"],
> input[type="password"],
> input[type="button"],
> button,
> input[type="submit"],
> input[type="image"],
> textarea {
appearance: none;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
}
}
*:not(mat-form-field) {
> input[type="button"],
> button,
> input[type="submit"] {
background: none;
}
}
button {
border-radius: 0;
font-family: inherit;
font-size: inherit;
padding: 0;
margin: 0;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
img {
max-width: 100%;
height: auto;
vertical-align: top;
border: none;
}

View File

@ -12,12 +12,12 @@ body:not(.is-mobile) {
::-webkit-scrollbar-thumb {
border: 2px solid transparent;
box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
border-radius: 24px;
box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.37);
border-radius: 12px;
}
::-webkit-scrollbar-thumb:active {
box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
border-radius: 24px;
box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.54);
border-radius: 12px;
}
}

View File

@ -1,9 +0,0 @@
.toolbar {
.toolbar-separator {
height: 48px;
width: 1px;
border-right: 1px solid rgba(0, 0, 0, 0.12);
margin: 0 12px;
}
}

View File

@ -41,7 +41,7 @@
// -----------------------------------------------------------------------------------------------------
html {
font-size: 62.5%;
font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-family: 'Nunito', 'Helvetica Neue', 'Arial', sans-serif;
line-height: 1.4 !important;
letter-spacing: -0.1px !important;
}

View File

@ -2,7 +2,10 @@
$foreground: map-get($theme, foreground);
.toolbar-separator {
background: map-get($foreground, divider);
toolbar {
.toolbar-separator {
background: map-get($foreground, divider);
}
}
}

View File

@ -135,7 +135,7 @@
.category {
text-transform: capitalize;
text-align: left;
font-weight: 500;
font-weight: 600;
}
.length {
@ -160,7 +160,7 @@
.updated {
font-size: 13px;
font-weight: 500;
font-weight: 600;
margin-top: 4px;
}
}

View File

@ -6,7 +6,7 @@
.cal-header {
.cal-cell {
font-weight: 500;
font-weight: 600;
}
}
@ -91,7 +91,7 @@
.cal-week-view {
.cal-header > b {
font-weight: 500;
font-weight: 600;
}
.cal-event {
@ -135,7 +135,7 @@
.cal-day-view {
.cal-time {
font-weight: 500;
font-weight: 600;
}
.cal-event {
@ -290,7 +290,7 @@
font-size: 20px;
min-width: 160px;
text-align: center;
font-weight: 500;
font-weight: 600;
}
}
}

View File

@ -19,7 +19,7 @@ chat-start {
}
.app-title {
font-weight: 500;
font-weight: 600;
font-size: 32px;
}

View File

@ -168,7 +168,7 @@
td {
text-align: right;
font-size: 16px;
font-weight: 500;
font-weight: 600;
color: rgba(0, 0, 0, 0.54);
border-bottom: none;
padding: 4px 8px;
@ -203,7 +203,7 @@
.note {
font-size: 15px;
font-weight: 500;
font-weight: 600;
margin-bottom: 24px;
}
@ -220,7 +220,7 @@
.small-note {
font-size: 12px;
font-weight: 500;
font-weight: 600;
color: rgba(0, 0, 0, 0.54);
line-height: 18px;
}

View File

@ -22,7 +22,7 @@
.offline-switch {
padding-bottom: 16px;
font-weight: 500;
font-weight: 600;
}
.title {

View File

@ -22,7 +22,7 @@
border-radius: 2px;
.filename {
font-weight: 500;
font-weight: 600;
}
&:last-child {

View File

@ -23,7 +23,7 @@ mail-ngrx-details {
.subject {
font-size: 17px;
font-weight: 500;
font-weight: 600;
}
.label {
@ -61,7 +61,7 @@ mail-ngrx-details {
.name {
margin-right: 8px;
font-weight: 500;
font-weight: 600;
}
.toggle-details {
@ -69,14 +69,14 @@ mail-ngrx-details {
text-decoration: underline;
padding-top: 16px;
cursor: pointer;
font-weight: 500;
font-weight: 600;
}
.details {
padding-top: 8px;
.title {
font-weight: 500;
font-weight: 600;
margin-right: 6px;
}
}
@ -90,7 +90,7 @@ mail-ngrx-details {
.title {
margin-bottom: 16px;
font-weight: 500;
font-weight: 600;
}
.attachment {

View File

@ -35,7 +35,7 @@ mail-ngrx-list-item {
.name {
font-size: 15px;
font-weight: 500;
font-weight: 600;
.avatar {
min-width: 32px;

View File

@ -36,6 +36,15 @@ mail-ngrx {
.content-card {
.toolbar {
.toolbar-separator {
height: 32px;
width: 1px;
margin: 0 12px;
}
}
@include media-breakpoint(xs) {
mail-list {

View File

@ -28,6 +28,16 @@
}
}
}
.content-card {
.toolbar {
.toolbar-separator {
background: map-get($foreground, divider);
}
}
}
}
}

View File

@ -37,7 +37,7 @@
border-radius: 2px;
.filename {
font-weight: 500;
font-weight: 600;
}
&:last-child {

View File

@ -23,7 +23,7 @@ mail-details {
.subject {
font-size: 17px;
font-weight: 500;
font-weight: 600;
}
.label {
@ -61,7 +61,7 @@ mail-details {
.name {
margin-right: 8px;
font-weight: 500;
font-weight: 600;
}
.toggle-details {
@ -69,14 +69,14 @@ mail-details {
text-decoration: underline;
padding-top: 16px;
cursor: pointer;
font-weight: 500;
font-weight: 600;
}
.details {
padding-top: 8px;
.title {
font-weight: 500;
font-weight: 600;
margin-right: 6px;
}
}
@ -90,7 +90,7 @@ mail-details {
.title {
margin-bottom: 16px;
font-weight: 500;
font-weight: 600;
}
.attachment {

View File

@ -35,7 +35,7 @@ mail-list-item {
.name {
font-size: 15px;
font-weight: 500;
font-weight: 600;
.avatar {
min-width: 32px;

View File

@ -36,6 +36,15 @@ mail {
.content-card {
.toolbar {
.toolbar-separator {
height: 32px;
width: 1px;
margin: 0 12px;
}
}
@include media-breakpoint(xs) {
mail-list {

View File

@ -28,6 +28,16 @@
}
}
}
.content-card {
.toolbar {
.toolbar-separator {
background: map-get($foreground, divider);
}
}
}
}
}

View File

@ -49,7 +49,7 @@
position: relative;
.card-breadcrumb {
font-weight: 500;
font-weight: 600;
font-size: 14px;
}
@ -104,7 +104,7 @@
}
.section-title {
font-weight: 500;
font-weight: 600;
}
}
@ -168,7 +168,7 @@
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
font-weight: 500;
font-weight: 600;
@include media-breakpoint('xs') {
margin-bottom: 24px;
@ -183,7 +183,7 @@
.attachment-url,
.attachment-name {
font-weight: 500;
font-weight: 600;
font-size: 16px;
}
@ -211,7 +211,7 @@
}
span {
font-weight: 500;
font-weight: 600;
text-transform: capitalize;
}
}
@ -224,7 +224,7 @@
.checklist-progress-value {
margin-right: 12px;
font-weight: 500;
font-weight: 600;
white-space: nowrap;
font-size: 14px;
}
@ -285,7 +285,7 @@
.comment-member-name {
font-size: 14px;
font-weight: 500;
font-weight: 600;
}
.comment-time {
@ -347,7 +347,7 @@
.activity-member-name {
font-size: 14px;
font-weight: 500;
font-weight: 600;
margin-right: 8px;
}

View File

@ -5,6 +5,6 @@ scrumboard-edit-board-name {
text-overflow: ellipsis;
overflow: hidden;
font-size: 15px;
font-weight: 500;
font-weight: 600;
}
}

View File

@ -7,7 +7,7 @@ scrumboard-board-add-card {
padding: 0 16px;
text-align: left;
text-transform: none;
font-weight: 500;
font-weight: 600;
font-size: 14px;
cursor: pointer;
border-radius: 2px;

View File

@ -34,7 +34,7 @@ scrumboard-board-card {
.list-card-name {
font-size: 14px;
font-weight: 500;
font-weight: 600;
margin-bottom: 12px;
}

View File

@ -4,7 +4,7 @@ scrumboard-board-edit-list-name {
text-overflow: ellipsis;
overflow: hidden;
font-size: 15px;
font-weight: 500;
font-weight: 600;
cursor: pointer;
}
}

View File

@ -21,7 +21,7 @@ todo-details {
.title {
font-size: 17px;
font-weight: 500;
font-weight: 600;
}
.tag {

View File

@ -53,7 +53,7 @@ todo-list-item {
.title {
font-size: 15px;
font-weight: 500;
font-weight: 600;
}
.notes {

View File

@ -36,6 +36,15 @@ todo {
.content-card {
.toolbar {
.toolbar-separator {
height: 32px;
width: 1px;
margin: 0 12px;
}
}
@include media-breakpoint-down(lg) {
todo-list {

View File

@ -8,20 +8,33 @@
// Todo
todo {
.header {
.center {
.search-wrapper {
background: map-get($background, background);
.header {
.sidebar-toggle {
border-right-color: map-get($foreground, divider);
.search-wrapper {
background: map-get($background, background);
.sidebar-toggle {
border-right-color: map-get($foreground, divider);
}
.search {
input {
background: map-get($background, background);
color: map-get($foreground, text);
}
}
}
}
.search {
.content-card {
input {
background: map-get($background, background);
color: map-get($foreground, text);
.toolbar {
.toolbar-separator {
background: map-get($foreground, divider);
}
}
}

View File

@ -101,7 +101,7 @@ forgot-password-2 {
.login {
margin: 32px auto 24px auto;
width: 250px;
font-weight: 500;
font-weight: 600;
.text {
margin-right: 8px;

View File

@ -59,7 +59,7 @@ forgot-password {
.login {
margin: 32px auto 24px auto;
width: 250px;
font-weight: 500;
font-weight: 600;
.text {
margin-right: 8px;

View File

@ -89,7 +89,7 @@ lock {
}
.message {
font-weight: 500;
font-weight: 600;
text-align: center;
}
}

View File

@ -101,7 +101,7 @@ login-2 {
.forgot-password {
font-size: 13px;
font-weight: 500;
font-weight: 600;
margin-bottom: 16px
}
}
@ -184,7 +184,7 @@ login-2 {
.register {
margin: 32px auto 24px auto;
width: 250px;
font-weight: 500;
font-weight: 600;
.text {
margin-right: 8px;

View File

@ -59,7 +59,7 @@ login {
.forgot-password {
font-size: 13px;
font-weight: 500;
font-weight: 600;
margin-bottom: 16px
}
}
@ -77,7 +77,7 @@ login {
.register {
margin: 32px auto 24px auto;
font-weight: 500;
font-weight: 600;
.text {
margin-right: 8px;

View File

@ -42,7 +42,7 @@ mail-confirm {
}
.message {
font-weight: 500;
font-weight: 600;
text-align: center;
margin-top: 40px;
}

View File

@ -71,7 +71,7 @@ register {
.register {
margin: 32px auto 24px auto;
font-weight: 500;
font-weight: 600;
.text {
margin-right: 8px;

View File

@ -101,7 +101,7 @@ reset-password-2 {
.login {
margin: 32px auto 24px auto;
width: 250px;
font-weight: 500;
font-weight: 600;
.text {
margin-right: 8px;

View File

@ -59,7 +59,7 @@ reset-password {
.login {
margin: 32px auto 24px auto;
width: 250px;
font-weight: 500;
font-weight: 600;
.text {
margin-right: 8px;

View File

@ -61,7 +61,7 @@ coming-soon {
text-align: center;
.message {
font-weight: 500;
font-weight: 600;
margin: 8px auto 32px auto;
}

View File

@ -14,7 +14,7 @@ error-404 {
text-align: center;
line-height: 1;
margin-bottom: 16px;
font-weight: 500;
font-weight: 600;
}
.message {

View File

@ -14,7 +14,7 @@ error-500 {
line-height: 1;
text-align: center;
margin-bottom: 16px;
font-weight: 500;
font-weight: 600;
}
.message {

View File

@ -143,7 +143,7 @@ invoice-compact {
td {
text-align: right;
font-size: 16px;
font-weight: 500;
font-weight: 600;
color: rgba(0, 0, 0, 0.54);
border-bottom: none;
padding: 4px 8px;
@ -178,7 +178,7 @@ invoice-compact {
.note {
font-size: 15px;
font-weight: 500;
font-weight: 600;
margin-bottom: 24px;
}
@ -195,7 +195,7 @@ invoice-compact {
.small-note {
font-size: 12px;
font-weight: 500;
font-weight: 600;
color: rgba(0, 0, 0, 0.54);
line-height: 18px;
}

View File

@ -127,7 +127,7 @@ invoice-modern {
td {
text-align: right;
font-size: 17px;
font-weight: 500;
font-weight: 600;
color: rgba(0, 0, 0, 0.54);
border-bottom: none;
padding: 8px 8px;
@ -162,7 +162,7 @@ invoice-modern {
.note {
font-size: 15px;
font-weight: 500;
font-weight: 600;
margin-bottom: 24px;
}
@ -179,7 +179,7 @@ invoice-modern {
.small-note {
font-size: 12px;
font-weight: 500;
font-weight: 600;
color: rgba(0, 0, 0, 0.54);
line-height: 18px;
}

View File

@ -23,7 +23,7 @@ profile-about {
.company {
padding: 0 16px 0 0;
font-weight: 500;
font-weight: 600;
}
}
}
@ -63,7 +63,7 @@ profile-about {
}
.name {
font-weight: 500;
font-weight: 600;
font-size: 15px;
}
@ -109,7 +109,7 @@ profile-about {
.title {
font-size: 15px;
font-weight: 500;
font-weight: 600;
padding-bottom: 4px;
}

View File

@ -57,7 +57,7 @@ profile-timeline {
padding: 16px 0 8px 16px;
.title {
font-weight: 500;
font-weight: 600;
.username {
margin-right: 2px;
@ -148,7 +148,7 @@ profile-timeline {
margin-bottom: 24px !important;
.username {
font-weight: 500;
font-weight: 600;
margin-right: 4px;
}
@ -216,11 +216,11 @@ profile-timeline {
}
.username {
font-weight: 500;
font-weight: 600;
}
.message {
font-weight: 500;
font-weight: 600;
}
}
}
@ -262,7 +262,7 @@ profile-timeline {
.title {
font-size: 15px;
font-weight: 500;
font-weight: 600;
padding-bottom: 4px;
}

View File

@ -56,7 +56,7 @@
}
.page-info {
font-weight: 500;
font-weight: 600;
margin: 0 8px 0 0;
}
}

View File

@ -11,7 +11,7 @@
.pager {
.page-info {
font-weight: 500;
font-weight: 600;
margin: 0 8px 0 0;
}
}
@ -25,7 +25,7 @@
.title {
font-size: 17px;
font-weight: 500;
font-weight: 600;
cursor: pointer;
}

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 1.1 MiB

File diff suppressed because it is too large Load Diff

View File

@ -13,9 +13,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="assets/icons/meteocons/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="assets/icons/material-icons/outline/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700" rel="stylesheet">
<!-- FUSE Splash Screen CSS -->
<style type="text/css">