mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-07-01 10:32:49 +08:00
开始使用scss重构项目;
This commit is contained in:
4
.gitignore
vendored
4
.gitignore
vendored
@@ -7,4 +7,6 @@ ul.db
|
||||
composer.lock
|
||||
public/upload/*
|
||||
/public/cdn/layui-ul.css
|
||||
/public/cdn/layui-ul.css.map
|
||||
/public/cdn/layui-ul.css.map
|
||||
/public/cdn/layui-ul.min.css
|
||||
/public/cdn/layui-ul.min.css.map
|
||||
51
source/scss/_common.scss
Normal file
51
source/scss/_common.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
/* 通用类开始 */
|
||||
.ul-padding-md {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.ul-section {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.ul-icon-exit {
|
||||
display : inline-block;
|
||||
width : 16px;
|
||||
height : 16px;
|
||||
background-image : url("img/exit.png");
|
||||
background-size : cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.ul-border-right {
|
||||
border-right: 1px solid #bbb;
|
||||
}
|
||||
|
||||
.ul-bg-white {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ul-bg-gray {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.ul-bg-black {
|
||||
|
||||
background-color: #393D49;
|
||||
}
|
||||
|
||||
.ul-color-main {
|
||||
color: #6cf !important;
|
||||
}
|
||||
|
||||
.ul-common-flex-list {
|
||||
display : flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ul-common-flex-sb {
|
||||
display : flex;
|
||||
align-items : center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 通用类结束 */
|
||||
@@ -1,138 +1,7 @@
|
||||
/* 列表开始 */
|
||||
.ul-nav-tree {}
|
||||
@import './common';
|
||||
@import './list/index';
|
||||
@import './nav/index';
|
||||
|
||||
.ul-nav-tree-group-title {
|
||||
font-size : 16px;
|
||||
font-weight: 600;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.ul-nav-tree-item {
|
||||
display : flex;
|
||||
align-items: baseline;
|
||||
cursor : pointer;
|
||||
padding : 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ul-nav-tree-item.current .ul-nav-tree-item-title {
|
||||
color: #6cf;
|
||||
}
|
||||
|
||||
.ul-nav-tree-item-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ul-nav-tree-item-desc {
|
||||
font-size : 14px;
|
||||
color : #999;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
/* 列表结束 */
|
||||
|
||||
/* 通用类开始 */
|
||||
.ul-padding-md {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.ul-section {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.ul-icon-exit {
|
||||
display : inline-block;
|
||||
width : 16px;
|
||||
height : 16px;
|
||||
background-image : url("img/exit.png");
|
||||
background-size : cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.ul-border-right {
|
||||
border-right: 1px solid #bbb;
|
||||
}
|
||||
|
||||
.ul-bg-white {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ul-bg-gray {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.ul-bg-black {
|
||||
|
||||
background-color: #393D49;
|
||||
}
|
||||
|
||||
.ul-color-main {
|
||||
color: #6cf !important;
|
||||
}
|
||||
|
||||
.ul-common-flex-list {
|
||||
display : flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ul-common-flex-sb {
|
||||
display : flex;
|
||||
align-items : center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 通用类结束 */
|
||||
|
||||
/* 用户头像开始 */
|
||||
|
||||
.ul-avatar-list {}
|
||||
|
||||
.ul-avatar-list-item {
|
||||
display : flex;
|
||||
align-items : center;
|
||||
justify-content : space-between;
|
||||
padding : 8px;
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.ul-avatar-list-item.current {
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
.ul-avatar-list-item-img {
|
||||
height : 48px;
|
||||
width : 48px;
|
||||
background-image : url("/static/images/avatar.png");
|
||||
background-size : cover;
|
||||
background-position: center;
|
||||
border-radius : 3px;
|
||||
background-color : #fff;
|
||||
}
|
||||
|
||||
.ul-avatar-list-item-info {
|
||||
margin-left: 10px;
|
||||
position : relative;
|
||||
width : calc(100% - 48px - 10px);
|
||||
}
|
||||
|
||||
.ul-avatar-list-item-time {
|
||||
position: absolute;
|
||||
right : 0;
|
||||
top : 0;
|
||||
color : #999;
|
||||
}
|
||||
|
||||
.ul-avatar-list-item-tips {
|
||||
color : #999;
|
||||
font-size : 14px;
|
||||
display : inline-block;
|
||||
white-space : nowrap;
|
||||
width : 100%;
|
||||
overflow : hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 头像结束 */
|
||||
|
||||
/* 头部开始 */
|
||||
|
||||
@@ -1481,11 +1350,12 @@ body .layui-quote-gray {
|
||||
}
|
||||
|
||||
@media screen and (max-width:450px) {
|
||||
.ul-site-item{
|
||||
.ul-site-item {
|
||||
width: 49%;
|
||||
}
|
||||
.ul-site-item-desc{
|
||||
font-size: 11px;
|
||||
|
||||
.ul-site-item-desc {
|
||||
font-size : 11px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
1
source/scss/list/_index.scss
Normal file
1
source/scss/list/_index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import './ul-avatar-list'
|
||||
49
source/scss/list/_ul-avatar-list.scss
Normal file
49
source/scss/list/_ul-avatar-list.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
|
||||
/* 用户头像开始 */
|
||||
|
||||
.ul-avatar-list {}
|
||||
|
||||
.ul-avatar-list-item {
|
||||
display : flex;
|
||||
align-items : center;
|
||||
justify-content : space-between;
|
||||
padding : 8px;
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.ul-avatar-list-item.current {
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
.ul-avatar-list-item-img {
|
||||
height : 48px;
|
||||
width : 48px;
|
||||
background-image : url("/static/images/avatar.png");
|
||||
background-size : cover;
|
||||
background-position: center;
|
||||
border-radius : 3px;
|
||||
background-color : #fff;
|
||||
}
|
||||
|
||||
.ul-avatar-list-item-info {
|
||||
margin-left: 10px;
|
||||
position : relative;
|
||||
width : calc(100% - 48px - 10px);
|
||||
}
|
||||
|
||||
.ul-avatar-list-item-time {
|
||||
position: absolute;
|
||||
right : 0;
|
||||
top : 0;
|
||||
color : #999;
|
||||
}
|
||||
|
||||
.ul-avatar-list-item-tips {
|
||||
color : #999;
|
||||
font-size : 14px;
|
||||
display : inline-block;
|
||||
white-space : nowrap;
|
||||
width : 100%;
|
||||
overflow : hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
1
source/scss/nav/_index.scss
Normal file
1
source/scss/nav/_index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import './ul-nav-tree'
|
||||
30
source/scss/nav/_ul-nav-tree.scss
Normal file
30
source/scss/nav/_ul-nav-tree.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
/* 附带说明垂直导航 */
|
||||
.ul-nav-tree {}
|
||||
|
||||
.ul-nav-tree-group-title {
|
||||
font-size : 16px;
|
||||
font-weight: 600;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.ul-nav-tree-item {
|
||||
display : flex;
|
||||
align-items: baseline;
|
||||
cursor : pointer;
|
||||
padding : 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ul-nav-tree-item.current .ul-nav-tree-item-title {
|
||||
color: #6cf;
|
||||
}
|
||||
|
||||
.ul-nav-tree-item-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ul-nav-tree-item-desc {
|
||||
font-size : 14px;
|
||||
color : #999;
|
||||
margin-left: 15px;
|
||||
}
|
||||
Reference in New Issue
Block a user