chore: Put styles in separate files

This commit is contained in:
Suraj Shetty 2020-05-12 00:21:59 +05:30
parent df461ee734
commit 80ae14e17b
13 changed files with 188 additions and 195 deletions

View file

@ -111,9 +111,7 @@
"public/less/chat.less",
"public/less/filters.less",
"public/less/social.less",
"public/scss/website.scss",
"public/scss/global.scss",
"public/scss/new_ui.scss",
"public/scss/main.scss",
"node_modules/frappe-charts/dist/frappe-charts.min.css"
],
"css/frappe-rtl.css": [

View file

@ -0,0 +1,5 @@
.breadcrumb {
padding-left: 0;
padding-right: 0;
background-color: white;
}

View file

@ -0,0 +1,17 @@
.form-section {
margin-right: -45px;
}
.form-control {
border: none;
background-color: $control-bg;
color: $text-light;
box-shadow: none;
border-radius: $border-radius;
}
.form-section .section-body {
width: 100%;
padding: 15px;
@extend .row;
}

View file

@ -1,4 +1,11 @@
@import "variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/bootstrap-grid";
@import "~bootstrap/scss/buttons";
html {
height: 100%;
}
body {
font-family: Inter;
@ -10,4 +17,86 @@ a {
.hide {
display: none !important;
}
.col-xs-1 { @extend .col-1; }
.col-xs-2 { @extend .col-2; }
.col-xs-3 { @extend .col-3; }
.col-xs-4 { @extend .col-4; }
.col-xs-5 { @extend .col-5; }
.col-xs-6 { @extend .col-6; }
.col-xs-7 { @extend .col-7; }
.col-xs-8 { @extend .col-8; }
.col-xs-9 { @extend .col-9; }
.col-xs-10 { @extend .col-10; }
.col-xs-11 { @extend .col-11; }
.col-xs-12 { @extend .col-12; }
.btn-default { @extend .btn-light; }
.btn-xs { @extend .btn-sm; }
.hidden-xs {
@extend .d-none;
@extend .d-sm-block;
}
.visible-xs {
@extend .d-block;
@extend .d-sm-none;
}
footer {
flex-shrink: 0;
}
.pull-right {
float: right;
}
img {
max-width: 100%;
}
.hidden {
@extend .d-none;
}
.hide-control {
@extend .d-none;
}
.text-underline {
text-decoration: underline;
}
.text-extra-muted {
color: #d1d8dd !important;
}
.no-underline {
text-decoration: none !important;
}
.btn {
border: none;
border-radius: $border-radius;
}
.btn-secondary, .btn-default {
background-color: $control-bg;
}
.btn-primary {
background: $brand-gradient;
}
h1, h2, h3 {
color: $text-color;
font-weight: bold;
}
h1 {
font-size: 20px;
}

View file

@ -0,0 +1,3 @@
.indicator {
font-size: inherit;
}

View file

View file

@ -0,0 +1,15 @@
@import "variables";
@import "~bootstrap/scss/bootstrap";
@import "global";
@import "form";
@import "list";
@import "navbar";
@import "modal";
@import "breadcrumb";
@import "indicator";
@import "page";
@import "frappe/public/css/font-awesome";
@import "multilevel-dropdown";
@import "website-image";

View file

@ -0,0 +1,7 @@
h4.modal-title {
font-size: 1em;
}
h5.modal-title {
margin: 0px !important;
}

View file

@ -0,0 +1,42 @@
.navbar {
padding-left: 0;
padding-right: 0;
background: white;
box-shadow: $box-shadow;
.container {
padding-left: 15px;
padding-right: 15px;
}
}
.navbar.bg-dark {
.dropdown-menu {
font-size: .75rem;
background-color: $dark;
border-radius: 0;
}
.nav-link {
white-space: nowrap;
color: $light;
&:hover {
color: $primary;
}
}
.nav-item {
padding: 0rem 1rem;
}
.dropdown-item {
color: $light;
&:hover {
background-color: $dark;
color: $primary;
}
}
}

View file

@ -1,40 +0,0 @@
@import "variables";
a {
color: $text-color;
}
.btn {
border: none;
border-radius: $border-radius;
}
.btn-secondary, .btn-default {
background-color: $control-bg;
}
.btn-primary {
background: $brand-gradient;
}
.form-control {
border: none;
background-color: $control-bg;
color: $text-light;
box-shadow: none;
border-radius: $border-radius;
}
.navbar {
background: white;
box-shadow: $box-shadow;
}
h1, h2, h3 {
color: $text-color;
font-weight: bold;
}
h1 {
font-size: 20px;
}

View file

View file

@ -124,10 +124,15 @@ $border-radius: var(--border-radius);
$text-color: $gray-900;
$body-color: $gray-800;
$container-max-widths: (
sm: 540px,
md: 840px,
lg: 1090px,
xl: 1290px
);
$brand-gradient: linear-gradient(180deg, #2C9AF1 0%, var(--blue-500) 100%);
$box-shadow: inset 0px -1px 0px var(--grey-2-100);
$font-size-base: 0.8rem;
$font-family-base: Inter;
@import "~bootstrap/scss/bootstrap";
$font-family-base: Inter;

View file

@ -1,105 +1,14 @@
@import "variables";
@import "frappe/public/css/font-awesome";
@import "~bootstrap/scss/bootstrap";
@import "multilevel-dropdown";
@import "website-image";
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
> div {
flex: 1 0 auto;
}
}
footer {
flex-shrink: 0;
}
// make navbar padding consistent with the page
.navbar {
padding-left: 0;
padding-right: 0;
.container {
padding-left: 15px;
padding-right: 15px;
}
}
.navbar.bg-dark {
.dropdown-menu {
font-size: .75rem;
background-color: $dark;
border-radius: 0;
}
.nav-link {
white-space: nowrap;
color: $light;
&:hover {
color: $primary;
}
}
.nav-item {
padding: 0rem 1rem;
}
.dropdown-item {
color: $light;
&:hover {
background-color: $dark;
color: $primary;
}
}
}
.input-dark {
background-color: $dark;
border-color: $border-color;
color: $light;
}
.breadcrumb {
padding-left: 0;
padding-right: 0;
background-color: white;
}
a.card {
text-decoration: none;
}
img {
max-width: 100%;
}
.hidden {
@extend .d-none;
}
.hide-control {
@extend .d-none;
}
.text-underline {
text-decoration: underline;
}
.text-extra-muted {
color: #d1d8dd !important;
}
.web-footer {
padding: 5rem 0;
min-height: 140px;
@ -112,61 +21,4 @@ img {
.footer-parent-item {
margin-bottom: 1rem;
}
.no-underline {
text-decoration: none !important;
}
.indicator {
font-size: inherit;
}
h4.modal-title {
font-size: 1em;
}
h5.modal-title {
margin: 0px !important;
}
.col-xs-1 { @extend .col-1; }
.col-xs-2 { @extend .col-2; }
.col-xs-3 { @extend .col-3; }
.col-xs-4 { @extend .col-4; }
.col-xs-5 { @extend .col-5; }
.col-xs-6 { @extend .col-6; }
.col-xs-7 { @extend .col-7; }
.col-xs-8 { @extend .col-8; }
.col-xs-9 { @extend .col-9; }
.col-xs-10 { @extend .col-10; }
.col-xs-11 { @extend .col-11; }
.col-xs-12 { @extend .col-12; }
.btn-default { @extend .btn-light; }
.btn-xs { @extend .btn-sm; }
.hidden-xs {
@extend .d-none;
@extend .d-sm-block;
}
.visible-xs {
@extend .d-block;
@extend .d-sm-none;
}
.form-section {
margin-right: -45px;
}
.form-section .section-body {
width: 100%;
padding: 15px;
@extend .row;
}
.pull-right {
float: right;
}
}