mirror of
https://github.com/typecho/typecho.git
synced 2025-04-21 02:01:52 +02:00
add flex grid system
This commit is contained in:
joyqi
parent
bfd67d5aaf
commit
eba85a391a
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -214,7 +214,7 @@ $(document).ready(function () {
|
||||
};
|
||||
|
||||
// 编辑预览切换
|
||||
const edittab = $('.editor').prepend('<div class="wmd-edittab"><a href="#wmd-editarea" class="active"><?php _e('撰写'); ?></a><a href="#wmd-preview"><?php _e('预览'); ?></a></div>'),
|
||||
const edittab = $('.editor').append('<div class="wmd-edittab"><a href="#wmd-editarea" class="active"><?php _e('撰写'); ?></a><a href="#wmd-preview"><?php _e('预览'); ?></a></div>'),
|
||||
editarea = $(textarea.parent()).attr("id", "wmd-editarea");
|
||||
|
||||
$(".wmd-edittab a").click(function() {
|
||||
|
||||
@ -14,111 +14,121 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media
|
||||
(-webkit-min-device-pixel-ratio: 2),
|
||||
(min-resolution: 192dpi) {
|
||||
@import "editor/*@2x.png";
|
||||
@include all-editor-sprites();
|
||||
#wmd-button-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@mixin editor-button-2x($name) {
|
||||
&#wmd-#{$name}-button span {
|
||||
@include editor-sprite(editor-#{$name})
|
||||
@media
|
||||
(-webkit-min-device-pixel-ratio: 2),
|
||||
(min-resolution: 192dpi) {
|
||||
@import "editor/*@2x.png";
|
||||
@include all-editor-sprites();
|
||||
|
||||
@mixin editor-button-2x($name) {
|
||||
&#wmd-#{$name}-button span {
|
||||
@include editor-sprite(editor-#{$name})
|
||||
}
|
||||
}
|
||||
|
||||
.wmd-button-row {
|
||||
li {
|
||||
@include editor-button-2x(bold);
|
||||
@include editor-button-2x(italic);
|
||||
@include editor-button-2x(link);
|
||||
@include editor-button-2x(quote);
|
||||
@include editor-button-2x(code);
|
||||
@include editor-button-2x(image);
|
||||
@include editor-button-2x(olist);
|
||||
@include editor-button-2x(ulist);
|
||||
@include editor-button-2x(heading);
|
||||
@include editor-button-2x(hr);
|
||||
@include editor-button-2x(more);
|
||||
@include editor-button-2x(undo);
|
||||
@include editor-button-2x(redo);
|
||||
@include editor-button-2x(fullscreen);
|
||||
@include editor-button-2x(exit-fullscreen);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.wmd-button-row {
|
||||
flex: 1;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 26px;
|
||||
line-height: 1;
|
||||
|
||||
li {
|
||||
@include editor-button-2x(bold);
|
||||
@include editor-button-2x(italic);
|
||||
@include editor-button-2x(link);
|
||||
@include editor-button-2x(quote);
|
||||
@include editor-button-2x(code);
|
||||
@include editor-button-2x(image);
|
||||
@include editor-button-2x(olist);
|
||||
@include editor-button-2x(ulist);
|
||||
@include editor-button-2x(heading);
|
||||
@include editor-button-2x(hr);
|
||||
@include editor-button-2x(more);
|
||||
@include editor-button-2x(undo);
|
||||
@include editor-button-2x(redo);
|
||||
@include editor-button-2x(fullscreen);
|
||||
@include editor-button-2x(exit-fullscreen);
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
padding: 3px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
border-radius: 2px;
|
||||
|
||||
&:hover {
|
||||
background-color: #E9E9E6;
|
||||
}
|
||||
|
||||
&.wmd-spacer {
|
||||
height: 20px;
|
||||
margin: 0 10px 0 6px;
|
||||
padding: 0;
|
||||
width: 1px;
|
||||
background: #E9E9E6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@include editor-button(bold);
|
||||
@include editor-button(italic);
|
||||
@include editor-button(link);
|
||||
@include editor-button(quote);
|
||||
@include editor-button(code);
|
||||
@include editor-button(image);
|
||||
@include editor-button(olist);
|
||||
@include editor-button(ulist);
|
||||
@include editor-button(heading);
|
||||
@include editor-button(hr);
|
||||
@include editor-button(more);
|
||||
@include editor-button(undo);
|
||||
@include editor-button(redo);
|
||||
@include editor-button(fullscreen);
|
||||
@include editor-button(exit-fullscreen);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wmd-button-row {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 26px;
|
||||
line-height: 1;
|
||||
// 撰写预览切换 tab
|
||||
.wmd-edittab {
|
||||
font-size: .92857em;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
padding: 3px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
border-radius: 2px;
|
||||
&:hover {
|
||||
background-color: #E9E9E6;
|
||||
}
|
||||
&.wmd-spacer {
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
margin-left: 5px;
|
||||
height: 20px;
|
||||
margin: 0 10px 0 6px;
|
||||
padding: 0;
|
||||
width: 1px;
|
||||
background: #E9E9E6;
|
||||
cursor: default;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
line-height: 20px;
|
||||
|
||||
@include editor-button(bold);
|
||||
@include editor-button(italic);
|
||||
@include editor-button(link);
|
||||
@include editor-button(quote);
|
||||
@include editor-button(code);
|
||||
@include editor-button(image);
|
||||
@include editor-button(olist);
|
||||
@include editor-button(ulist);
|
||||
@include editor-button(heading);
|
||||
@include editor-button(hr);
|
||||
@include editor-button(more);
|
||||
@include editor-button(undo);
|
||||
@include editor-button(redo);
|
||||
@include editor-button(fullscreen);
|
||||
@include editor-button(exit-fullscreen);
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #E9E9E6;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#btn-cancel-preview { display: none }
|
||||
|
||||
// 撰写预览切换 tab
|
||||
.wmd-edittab {
|
||||
float: right;
|
||||
margin-top: 3px;
|
||||
font-size: .92857em;
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
margin-left: 5px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&.active {
|
||||
background: #E9E9E6;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 控制被隐藏的 tab，全屏时显示
|
||||
.wmd-hidetab {
|
||||
display: none;
|
||||
|
||||
@ -1,20 +1,17 @@
|
||||
/*
|
||||
* Bento Grid System
|
||||
* Bento Grid System (Flexbox Version)
|
||||
* Source: https://github.com/fenbox/bento
|
||||
* Version: 1.2.8
|
||||
* Update: 2013.11.25
|
||||
* Version: 2.0.0
|
||||
* Update: 2024.10.23
|
||||
*/
|
||||
|
||||
|
||||
@import "vars";
|
||||
|
||||
|
||||
// Mixins
|
||||
%box-sizing {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
// Container
|
||||
.container {
|
||||
margin-left: auto;
|
||||
@ -22,189 +19,167 @@
|
||||
padding-left: $gutter-width / 2;
|
||||
padding-right: $gutter-width / 2;
|
||||
@extend %box-sizing;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
// Column group
|
||||
.row {
|
||||
margin-right: $gutter-width / -2;
|
||||
margin-left: $gutter-width / -2;
|
||||
@extend .clearfix;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100vw;
|
||||
|
||||
> * {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.row [class*="col-"] {
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
padding-right: $gutter-width / 2;
|
||||
padding-left: $gutter-width / 2;
|
||||
min-height: 1px;
|
||||
flex-grow: 1;
|
||||
@extend %box-sizing;
|
||||
}
|
||||
|
||||
// Flex order replaces push and pull functionality
|
||||
.row [class*="-push-"],
|
||||
.row [class*="-pull-"] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Mobile and up
|
||||
*/
|
||||
|
||||
// Use flex-grow to simulate columns in mobile
|
||||
@for $index from 1 through $columns {
|
||||
.col-mb-#{$index} {
|
||||
width: $column-width * $index;
|
||||
flex: 0 0 $column-width * $index;
|
||||
max-width: $column-width * $index;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Tablet and up
|
||||
*/
|
||||
|
||||
// Tablet and up
|
||||
@include screen(tablet) {
|
||||
.container {
|
||||
max-width: $screen-tablet - ($gutter-width * 2);
|
||||
}
|
||||
|
||||
// Colunms
|
||||
@for $index from 1 through $columns {
|
||||
.col-tb-#{$index} {
|
||||
width: $column-width * $index;
|
||||
flex: 0 0 $column-width * $index;
|
||||
max-width: $column-width * $index;
|
||||
}
|
||||
}
|
||||
|
||||
// Offset
|
||||
@for $index from 0 through $columns {
|
||||
.col-tb-offset-#{$index} {
|
||||
margin-left: $column-width * $index;
|
||||
}
|
||||
}
|
||||
|
||||
// Pull
|
||||
@for $index from 0 through $columns {
|
||||
.col-tb-pull-#{$index} {
|
||||
right: $column-width * $index;
|
||||
order: -$index;
|
||||
}
|
||||
}
|
||||
|
||||
// Push
|
||||
@for $index from 0 through $columns {
|
||||
.col-tb-push-#{$index} {
|
||||
left: $column-width * $index;
|
||||
order: $index;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Desktop and up
|
||||
*/
|
||||
|
||||
// Desktop and up
|
||||
@include screen(desktop) {
|
||||
.container {
|
||||
max-width: $screen-desktop - ($gutter-width * 2);
|
||||
}
|
||||
|
||||
// Colunms
|
||||
@for $index from 1 through $columns {
|
||||
.col-#{$index} {
|
||||
width: $column-width * $index;
|
||||
flex: 0 0 $column-width * $index;
|
||||
max-width: $column-width * $index;
|
||||
}
|
||||
}
|
||||
|
||||
// Offset
|
||||
@for $index from 0 through $columns {
|
||||
.col-offset-#{$index} {
|
||||
margin-left: $column-width * $index;
|
||||
}
|
||||
}
|
||||
|
||||
// Pull
|
||||
@for $index from 0 through $columns {
|
||||
.col-pull-#{$index} {
|
||||
right: $column-width * $index;
|
||||
order: -$index;
|
||||
}
|
||||
}
|
||||
|
||||
// Push
|
||||
@for $index from 0 through $columns {
|
||||
.col-push-#{$index} {
|
||||
left: $column-width * $index;
|
||||
order: $index;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Widescreen and up
|
||||
*/
|
||||
|
||||
// Widescreen and up
|
||||
@include screen(wide) {
|
||||
.container {
|
||||
max-width: $screen-wide - ($gutter-width * 2);
|
||||
}
|
||||
|
||||
// Colunms
|
||||
@for $index from 1 through $columns {
|
||||
.col-wd-#{$index} {
|
||||
width: $column-width * $index;
|
||||
flex: 0 0 $column-width * $index;
|
||||
max-width: $column-width * $index;
|
||||
}
|
||||
}
|
||||
|
||||
// Offset
|
||||
@for $index from 0 through $columns {
|
||||
.col-wd-offset-#{$index} {
|
||||
margin-left: $column-width * $index;
|
||||
}
|
||||
}
|
||||
|
||||
// Pull
|
||||
@for $index from 0 through $columns {
|
||||
.col-wd-pull-#{$index} {
|
||||
right: $column-width * $index;
|
||||
order: -$index;
|
||||
}
|
||||
}
|
||||
|
||||
// Push
|
||||
@for $index from 0 through $columns {
|
||||
.col-wd-push-#{$index} {
|
||||
left: $column-width * $index;
|
||||
order: $index;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Responsive kit
|
||||
*/
|
||||
|
||||
// Hidden in mobile and down
|
||||
// Responsive kit
|
||||
@include screen(phone, max) {
|
||||
.kit-hidden-mb {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hidden in tablet and down
|
||||
@include screen(tablet, max) {
|
||||
.kit-hidden-tb {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hidden in descktop and down
|
||||
@include screen(desktop, max) {
|
||||
.kit-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Clearfix
|
||||
*/
|
||||
// Clearfix
|
||||
.clearfix {
|
||||
zoom: 1;
|
||||
&:before, &:after {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
@ -268,6 +268,7 @@ a.button:hover, a.balloon-button:hover {
|
||||
* 标题
|
||||
*/
|
||||
.typecho-page-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 25px 0 10px;
|
||||
@ -417,28 +418,6 @@ a.button:hover, a.balloon-button:hover {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 编辑模板
|
||||
*/
|
||||
.typecho-select-theme {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
margin: 15px 0px;
|
||||
}
|
||||
|
||||
.typecho-select-theme h5 {
|
||||
color: #E47E00;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
width: 120px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.typecho-select-theme select {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑模板（编辑详情）
|
||||
*/
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user