refs #793 Use same arrow icon for collapse buttons

This commit is contained in:
AkiraFukushima 2018-12-22 22:18:49 +09:00
parent 634f4d7406
commit d43d5a17d9
1 changed files with 11 additions and 6 deletions

View File

@ -24,10 +24,10 @@
</div> </div>
<div class="collapse"> <div class="collapse">
<el-button type="text" class="release-collapse" @click="releaseCollapse" v-if="collapse" :title="$t('side_menu.expand')"> <el-button type="text" class="release-collapse" @click="releaseCollapse" v-if="collapse" :title="$t('side_menu.expand')">
<i class="el-icon-arrow-right"></i> <icon name="angle-double-right"></icon>
</el-button> </el-button>
<el-button type="text" class="do-collapse" @click="doCollapse" v-else :title="$t('side_menu.collapse')"> <el-button type="text" class="do-collapse" @click="doCollapse" v-else :title="$t('side_menu.collapse')">
<i class="el-icon-arrow-left"></i> <icon name="angle-double-left"></icon>
</el-button> </el-button>
</div> </div>
</div> </div>
@ -100,10 +100,10 @@
</template> </template>
</el-menu> </el-menu>
<el-button v-if="hideGlobalHeader" class="global-header-control" type="text" @click="changeGlobalHeader(false)"> <el-button v-if="hideGlobalHeader" class="global-header-control" type="text" @click="changeGlobalHeader(false)">
<icon name="caret-square-right"></icon> <icon name="angle-double-right"></icon>
</el-button> </el-button>
<el-button v-else class="global-header-control" type="text" @click="changeGlobalHeader(true)"> <el-button v-else class="global-header-control" type="text" @click="changeGlobalHeader(true)">
<icon name="caret-square-left"></icon> <icon name="angle-double-left"></icon>
</el-button> </el-button>
</div> </div>
</template> </template>
@ -187,6 +187,7 @@ export default {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-content: center; align-content: center;
align-items: flex-start;
justify-content: flex-end; justify-content: flex-end;
.account { .account {
@ -243,6 +244,7 @@ export default {
.do-collapse { .do-collapse {
color: #dcdfe6; color: #dcdfe6;
padding: 0; padding: 0;
margin-top: 8px;
&:hover { &:hover {
color: #409eff; color: #409eff;
@ -252,6 +254,7 @@ export default {
.release-collapse { .release-collapse {
color: #dcdfe6; color: #dcdfe6;
padding: 0; padding: 0;
margin-top: 8px;
&:hover { &:hover {
color: #409eff; color: #409eff;
@ -310,7 +313,9 @@ export default {
bottom: 0; bottom: 0;
color: #dcdfe6; color: #dcdfe6;
margin: 0; margin: 0;
padding: 0; padding: 4px 0 0 0;
border-radius: 0 4px 4px 0;
background-color: var(--theme-global-header-color);
} }
} }
</style> </style>