Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1970d4e

Browse files
author
Yeliazar
committed
updated Sidebar and NavBar colors schema
1 parent a30bf4f commit 1970d4e

File tree

5 files changed

+73
-35
lines changed

5 files changed

+73
-35
lines changed

‎src/assets/sidebar/Fill/Menu.svg‎

Lines changed: 4 additions & 4 deletions
Loading[フレーム]

‎src/components/Header/Header.vue‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,21 @@
22
<b-navbar class="app-header d-print-none" :class="[navbarTypeClass, 'header-' + navbarColorScheme]">
33
<b-nav>
44
<b-nav-item id="v-step-0">
5-
<a class="d-md-down-none px-2" href="#" @click="toggleSidebarMethod">
5+
<a class="d-md-down-none px-1" href="#" @click="toggleSidebarMethod">
66
<img
77
:src="Menu"
88
alt="menu"
99
/>
1010
</a>
11-
<a class="fs-lg d-lg-none" href="#" @click="switchSidebarMethod">
11+
<a class="fs-lg d-md-none" href="#" @click="switchSidebarMethod">
1212
<img
1313
:src="Menu"
1414
alt="menu"
1515
/>
1616
</a>
1717
</b-nav-item>
1818
<b-nav-item class="d-md-down-none">
19-
<a href="#" class="px-2">
19+
<a href="#" class="px-1">
2020
<img
2121
:src="Exchange"
2222
alt="exchange"
@@ -33,29 +33,31 @@
3333
</b-nav-item>
3434
</b-nav>
3535
<b-nav>
36-
<b-form class="d-sm-down-none ms-5 my-auto" inline>
36+
<b-form class="d-md-down-none ms-5 my-auto" inline>
3737
<b-form-group>
3838
<b-input-group class="input-group-no-border search-input">
39-
<template v-slot:prepend>
40-
<b-input-group-text>
41-
<div>
42-
<img
43-
:src="Search"
44-
alt="search"
45-
/>
39+
<template v-slot:prepend>
40+
<div class="headerSvgFlipColor">
41+
<b-input-group-text>
42+
<div>
43+
<img
44+
:src="Search"
45+
alt="search"
46+
/>
47+
</div>
48+
</b-input-group-text>
4649
</div>
47-
</b-input-group-text>
48-
</template>
50+
</template>
4951
<b-form-input id="search-input" placeholder="Search Dashboard" />
5052
</b-input-group>
5153
</b-form-group>
5254
</b-form>
5355
</b-nav>
5456
<a class="navbarBrand d-md-none">
55-
<i class="fa fa-circle text-primary me-sm-1" />
57+
<i class="fa fa-circle text-primary me-1" />
5658
<i class="fa fa-circle text-danger" />
5759
sing
58-
<i class="fa fa-circle text-danger me-sm-1" />
60+
<i class="fa fa-circle text-danger me-1" />
5961
<i class="fa fa-circle text-primary" />
6062
</a>
6163
<b-nav class="ms-auto">
@@ -67,7 +69,7 @@
6769
menu-class="notificationsWrapper py-0 animate__animated animate__animated-fast animate__fadeIn"
6870
right>
6971
<template slot="button-content">
70-
<span class="avatar rounded-circle thumb-sm float-left me-2">
72+
<span class="avatar rounded-circle thumb-sm float-start me-2">
7173
<img
7274
v-if="user.avatar || user.email === 'admin@flatlogic.com'"
7375
class="rounded-circle"
@@ -77,7 +79,7 @@
7779
<span v-else>{{firstUserLetter}}</span>
7880
</span>
7981
<span>{{user.name || user.email || 'Philip smith'}}</span>
80-
<span class="mx-2 circle bg-dark text-white fw-bold" style="padding: 13px 13px;">9</span>
82+
<span class="mx-2 circle bg-danger text-white fw-bold" style="padding: 13px 13px;">9</span>
8183
<!-- <i :class="['fi flaticon-arrow-down px-2 dropdown-arrow', {active: dropdown}]" />-->
8284
<img class="px-2 dropdown-arrow"
8385
:class="{active: dropdown}"
@@ -97,22 +99,22 @@
9799
</template>
98100
<b-dropdown-item>
99101
<img :src="User"
100-
class="px-2 mr-3"
102+
class="px-2 me-3"
101103
alt="user"
102104
/>
103105
My Account
104106
</b-dropdown-item>
105107
<b-dropdown-divider />
106108
<b-dropdown-item>
107109
<img :src="Document"
108-
class="px-2 mr-2"
110+
class="px-2 me-2"
109111
alt="document"
110112
/>
111113
Calendar
112114
</b-dropdown-item>
113115
<b-dropdown-item href="/inbox">
114116
<img :src="Envelope"
115-
class="px-2 mr-2"
117+
class="px-2 me-2"
116118
alt="envelope"
117119
/>
118120
Inbox &nbsp;&nbsp;
@@ -121,7 +123,7 @@
121123
<b-dropdown-divider />
122124
<b-dropdown-item-button @click="logoutUser">
123125
<img :src="Cancel"
124-
class="px-2 mr-2"
126+
class="px-2 me-2"
125127
alt="cancel"
126128
/>
127129
Log Out

‎src/components/Sidebar/Sidebar.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -304,11 +304,10 @@
304304
import { mapState, mapActions } from 'vuex';
305305
import isScreen from '@/core/screenHelper';
306306
import NavLink from './NavLink/NavLink';
307-
import Bank from '../../assets/sidebar/Outline/Bank.svg';
308307
309308
export default {
310309
name: 'Sidebar',
311-
components: { NavLink, Bank },
310+
components: { NavLink},
312311
data() {
313312
return {
314313
alerts: [
@@ -326,8 +325,7 @@ export default {
326325
footer: 'Provide required notes',
327326
color: 'primary',
328327
},
329-
],
330-
Bank
328+
]
331329
};
332330
},
333331
methods: {

‎src/store/layout.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default {
4646
state: {
4747
sidebarClose: false,
4848
sidebarStatic: false,
49-
sidebarColorName: config.app.sidebarColors[0][0],
49+
sidebarColorName: config.app.sidebarColors[3][0],
5050
navbarColorName: config.app.navbarColors[1][0],
5151
navbarColorScheme: NavbarColorSchemes.LIGHT,
5252
navbarType: NavbarTypes.STATIC,

‎src/styles/_theme-variables.scss‎

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
&.sidebar-first {
4545
--sidebar-bg-color: #3D3D3D;
4646
--logo-color: #5CB0FF;
47-
--sidebar-item-active: #F6F6E9;
47+
//--sidebar-item-active: #F6F6E9;
4848
--sidebar-action-bg: #2D2D2D;
4949
--sidebar-item-active-bg: #5CB0FF;
5050
--sidebar-color: #F6F6E9;
@@ -57,16 +57,16 @@
5757
--sidebar-bg-color: #4B505F;
5858
--sidebar-action-bg: #373C4D;
5959
--sidebar-item-active-bg: #dedede;
60-
--sidebar-item-active: #F6F6E9;
60+
//--sidebar-item-active: #F6F6E9;
6161
}
6262

6363
&.sidebar-third {
6464
--sidebar-item-active-bg: #5CB0FF;
6565
--logo-color: #fff;
66-
--sidebar-item-active: #F6F6E9;
66+
//--sidebar-item-active: #F6F6E9;
6767
--important-notification-color: #fd5f00;
6868
--sidebar-bg-color: #483CB6;
69-
--sidebar-color: #F6F6E9!important;
69+
--sidebar-color: #F6F6E9;
7070
--sidebar-action-bg: #332A87;
7171
}
7272

@@ -84,7 +84,7 @@
8484
--logo-color: #0D2B47;
8585
--sidebar-bg-color: #20AE8C;
8686
--sidebar-action-bg: #119475;
87-
--sidebar-item-active: #F6F6E9;
87+
//--sidebar-item-active: #F6F6E9;
8888
--sidebar-item-active-bg: #0D2B47;
8989
--sidebar-color: #F6F6E9;
9090
}
@@ -95,4 +95,42 @@
9595
--sidebar-color: #6c757d;
9696
}
9797
}
98+
99+
.header-ffffff {
100+
--input-bg: #F4F4F5;
101+
--input-color: #0C2236;
102+
--navbar-bg: #FFFFFF;
103+
--navbar-icon-bg: #0C2236;
104+
}
105+
.header-E2E7EC {
106+
--input-bg: #F4F4F5;
107+
--input-color: #0C2236;
108+
--navbar-bg: #E2E7EC;
109+
--navbar-icon-bg: #0C2236;
110+
}
111+
.header-C9D1FB {
112+
--input-bg: rgba(255, 255, 255, 0.5);;
113+
--input-color: #0C2236;
114+
--navbar-bg: #C9D1FB;
115+
--navbar-icon-bg: #0C2236;
116+
}
117+
.header-C1C3CF {
118+
--input-bg: rgba(255, 255, 255, 0.5);
119+
--input-color: #0C2236;
120+
--navbar-bg: #C1C3CF;
121+
--navbar-icon-bg: #0C2236;
122+
}
123+
.header-0C2236 {
124+
--input-bg: rgba(255, 255, 255, 0.3);
125+
--input-color: #0C2236;
126+
--navbar-bg: #0C2236;
127+
--navbar-icon-bg: #C1C3CF;
128+
}
129+
.header-6FB0F9 {
130+
--input-bg: rgba(255, 255, 255, 0.3);
131+
--input-color: #0C2236;
132+
--navbar-bg: rgba(111, 176, 249, 0.4);
133+
--navbar-icon-bg: #0C2236;
134+
}
135+
98136
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /