Skip to content

Z
zui

易企天创 / zui
12 个月 前同步成功

通知 6
Star 0
Fork 1
Z
zui

体验新版 GitCode，发现更多精彩内容 >>

提交 38353f6c 编写于 作者: C Catouse
浏览文件
操作

* depart controls.

上级 c0a035d7
隐藏空白更改
内联 并排
Showing with 413 addition and 304 deletion
src/less/controls/buttons.group.less 0 → 100644
浏览文件 @ 38353f6c
//
// Button groups
// ==================================================
//
// Button carets
// Match the button text color to the arrow/caret for indicating dropdown-ness.
.caret
{
.btn-default &
{
border-top-color: @btn-default-color;
}
.btn-primary &,
.btn-success &,
.btn-warning &,
.btn-danger &,
.btn-info &
{
border-top-color: #fff;
}
}
.dropup
{
& .btn-default .caret
{
border-bottom-color: @btn-default-color;
}
.btn-primary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-info
{
.caret
{
border-bottom-color: #fff;
}
}
}
// Make the div behave like a button
.btn-group,
.btn-group-vertical
{
position: relative;
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn
{
position: relative;
float: left;
// Bring the "active" button to the front
&:hover,
&:focus,
&:active,
&.active
{
z-index: 2;
}
&:focus
{
// Remove focus outline when dropdown JS adds it after closing the menu
outline: none;
}
}
}
// Prevent double borders when buttons are next to each other
.btn-group
{
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group
{
margin-left: -1px;
}
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar
{
.clearfix();
.btn-group
{
float: left;
}
// Space out series of button groups
> .btn,
> .btn-group
{
+ .btn,
+ .btn-group
{
margin-left: 5px;
}
}
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle)
{
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child
{
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle)
{
.border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child)
{
.border-left-radius(0);
}
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group
{
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn
{
border-radius: 0;
}
.btn-group > .btn-group:first-child
{
> .btn:last-child,
> .dropdown-toggle
{
.border-right-radius(0);
}
}
.btn-group > .btn-group:last-child > .btn:first-child
{
.border-left-radius(0);
}
// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle
{
outline: 0;
}
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn
{ .btn-xs(); }
.btn-group-sm > .btn
{ .btn-sm(); }
.btn-group-lg > .btn
{ .btn-lg(); }
// Split button dropdowns
// ----------------------
// Give the line between buttons some depth
.btn-group > .btn + .dropdown-toggle
{
padding-left: 8px;
padding-right: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle
{
padding-left: 12px;
padding-right: 12px;
}
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle
{
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
// // Justified button groups
// // ----------------------
// .btn-group-justified
// {
// display: table;
// width: 100%;
// table-layout: fixed;
// border-collapse: separate;
// .btn
// {
// float: none;
// display: table-cell;
// width: 1%;
// }
// }
src/less/controls/buttons.less
浏览文件 @ 38353f6c
......@@ -64,41 +64,35 @@
.btn
{
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
// .button-styles(@btn-default-bg;);
text-shadow: 0 1px 0 #fff; border-color: #ccc;
}
.btn-primary
{
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
// .button-styles(@btn-primary-bg);
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
}
// Warning appears as orange
.btn-warning
{
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
// .button-styles(@btn-warning-bg);
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
}
// Danger and error appear as red
.btn-danger
{
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
.button-styles(@btn-danger-bg);
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
}
// Success appears as green
.btn-success
{
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
// .button-styles(@btn-success-bg);
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
}
// Info appears as blue-green
.btn-info
{
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
// .button-styles(@btn-info-bg);
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
}
......@@ -119,17 +113,12 @@
&,
&:active,
&[disabled],
fieldset[disabled] &
{
background-color: transparent;
.box-shadow(none);
}
&,
fieldset[disabled] &,
&:hover,
&:focus,
&:active
&:focus
{
border-color: transparent;
.box-shadow(none);
}
&:hover,
&:focus
......@@ -150,10 +139,8 @@
}
}
// Button Sizes
// --------------------------------------------------
.btn-lg
{
// line-height: ensure even-numbered height of button next to large input
......@@ -200,195 +187,6 @@ input[type="button"]
}
//
// Button groups
// ==================================================
//
// Button carets
// Match the button text color to the arrow/caret for indicating dropdown-ness.
.caret
{
.btn-default &
{
border-top-color: @btn-default-color;
}
.btn-primary &,
.btn-success &,
.btn-warning &,
.btn-danger &,
.btn-info &
{
border-top-color: #fff;
}
}
.dropup
{
& .btn-default .caret
{
border-bottom-color: @btn-default-color;
}
.btn-primary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-info
{
.caret
{
border-bottom-color: #fff;
}
}
}
// Make the div behave like a button
.btn-group,
.btn-group-vertical
{
position: relative;
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn
{
position: relative;
float: left;
// Bring the "active" button to the front
&:hover,
&:focus,
&:active,
&.active
{
z-index: 2;
}
&:focus
{
// Remove focus outline when dropdown JS adds it after closing the menu
outline: none;
}
}
}
// Prevent double borders when buttons are next to each other
.btn-group
{
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group
{
margin-left: -1px;
}
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar
{
.clearfix();
.btn-group
{
float: left;
}
// Space out series of button groups
> .btn,
> .btn-group
{
+ .btn,
+ .btn-group
{
margin-left: 5px;
}
}
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle)
{
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child
{
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle)
{
.border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child)
{
.border-left-radius(0);
}
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group
{
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn
{
border-radius: 0;
}
.btn-group > .btn-group:first-child
{
> .btn:last-child,
> .dropdown-toggle
{
.border-right-radius(0);
}
}
.btn-group > .btn-group:last-child > .btn:first-child
{
.border-left-radius(0);
}
// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle
{
outline: 0;
}
// Sizing
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn
{ .btn-xs(); }
.btn-group-sm > .btn
{ .btn-sm(); }
.btn-group-lg > .btn
{ .btn-lg(); }
// Split button dropdowns
// ----------------------
// Give the line between buttons some depth
.btn-group > .btn + .dropdown-toggle
{
padding-left: 8px;
padding-right: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle
{
padding-left: 12px;
padding-right: 12px;
}
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle
{
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
// Reposition the caret
.btn .caret
{
......@@ -407,94 +205,6 @@ input[type="button"]
}
// Vertical button groups
// ----------------------
// .btn-group-vertical
// {
// > .btn,
// > .btn-group
// {
// display: block;
// float: none;
// width: 100%;
// max-width: 100%;
// }
// // Clear floats so dropdown menus can be properly placed
// > .btn-group
// {
// .clearfix();
// > .btn
// {
// float: none;
// }
// }
// > .btn + .btn,
// > .btn + .btn-group,
// > .btn-group + .btn,
// > .btn-group + .btn-group
// {
// margin-top: -1px;
// margin-left: 0;
// }
// }
// .btn-group-vertical > .btn
// {
// &:not(:first-child):not(:last-child)
// {
// border-radius: 0;
// }
// &:first-child:not(:last-child)
// {
// border-top-right-radius: @border-radius-base;
// .border-bottom-radius(0);
// }
// &:last-child:not(:first-child)
// {
// border-bottom-left-radius: @border-radius-base;
// .border-top-radius(0);
// }
// }
// .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn
// {
// border-radius: 0;
// }
// .btn-group-vertical > .btn-group:first-child
// {
// > .btn:last-child,
// > .dropdown-toggle
// {
// .border-bottom-radius(0);
// }
// }
// .btn-group-vertical > .btn-group:last-child > .btn:first-child
// {
// .border-top-radius(0);
// }
// // Justified button groups
// // ----------------------
// .btn-group-justified
// {
// display: table;
// width: 100%;
// table-layout: fixed;
// border-collapse: separate;
// .btn
// {
// float: none;
// display: table-cell;
// width: 1%;
// }
// }
// Checkbox and radio options
[data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"]
......
src/less/controls/buttons.vertical.less 0 → 100644
浏览文件 @ 38353f6c
// Vertical button groups
// ----------------------
.btn-group-vertical
{
> .btn,
> .btn-group
{
display: block;
float: none;
width: 100%;
max-width: 100%;
}
// Clear floats so dropdown menus can be properly placed
> .btn-group
{
.clearfix();
> .btn
{
float: none;
}
}
> .btn + .btn,
> .btn + .btn-group,
> .btn-group + .btn,
> .btn-group + .btn-group
{
margin-top: -1px;
margin-left: 0;
}
}
.btn-group-vertical > .btn
{
&:not(:first-child):not(:last-child)
{
border-radius: 0;
}
&:first-child:not(:last-child)
{
border-top-right-radius: @border-radius-base;
.border-bottom-radius(0);
}
&:last-child:not(:first-child)
{
border-bottom-left-radius: @border-radius-base;
.border-top-radius(0);
}
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn
{
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child
{
> .btn:last-child,
> .dropdown-toggle
{
.border-bottom-radius(0);
}
}
.btn-group-vertical > .btn-group:last-child > .btn:first-child
{
.border-top-radius(0);
}
src/less/controls/type.bg.less 0 → 100644
浏览文件 @ 38353f6c
// Contextual backgrounds
.bg-default {
color: #fff;
background-color: @state-default-inverse-bg;
a&:hover {
background-color: darken(@state-default-inverse-bg, 10%);
}
}
.bg-primary {
color: #fff;
background-color: @state-primary-inverse-bg;
a&:hover {
background-color: darken(@state-primary-inverse-bg, 10%);
}
}
.bg-success {
color: #fff;
background-color: @state-success-inverse-bg;
a&:hover {
background-color: darken(@state-success-inverse-bg, 10%);
}
}
.bg-info {
color: #fff;
background-color: @state-info-inverse-bg;
a&:hover {
background-color: darken(@state-info-inverse-bg, 10%);
}
}
.bg-warning {
color: #fff;
background-color: @state-warning-inverse-bg;
a&:hover {
background-color: darken(@state-warning-inverse-bg, 10%);
}
}
.bg-danger {
color: #fff;
background-color: @state-danger-inverse-bg;
a&:hover {
background-color: darken(@state-danger-inverse-bg, 10%);
}
}
.bg-important {
color: #fff;
background-color: @state-important-inverse-bg;
a&:hover {
background-color: darken(@state-important-inverse-bg, 10%);
}
}
.bg-special {
color: #fff;
background-color: @state-special-inverse-bg;
a&:hover {
background-color: darken(@state-special-inverse-bg, 10%);
}
}
src/less/controls/type.hightlight.less 0 → 100644
浏览文件 @ 38353f6c
// highlight backgrounds
.highlight-default {
background-color: @state-default-bg;
a&:hover {
background-color: darken(@state-default-bg, 10%);
}
}
.highlight-primary {
background-color: @state-primary-bg;
a&:hover {
background-color: darken(@state-primary-bg, 10%);
}
}
.highlight-success {
background-color: @state-success-bg;
a&:hover {
background-color: darken(@state-success-bg, 10%);
}
}
.highlight-info {
background-color: @state-info-bg;
a&:hover {
background-color: darken(@state-info-bg, 10%);
}
}
.highlight-warning {
background-color: @state-warning-bg;
a&:hover {
background-color: darken(@state-warning-bg, 10%);
}
}
.highlight-danger {
background-color: @state-danger-bg;
a&:hover {
background-color: darken(@state-danger-bg, 10%);
}
}
.highlight-important {
background-color: @state-important-bg;
a&:hover {
background-color: darken(@state-important-bg, 10%);
}
}
.highlight-special {
background-color: @state-special-bg;
a&:hover {
background-color: darken(@state-special-bg, 10%);
}
}
src/less/controls/type.less
浏览文件 @ 38353f6c
......@@ -13,7 +13,6 @@ p
{
margin-bottom: @line-height-computed;
font-size: floor(@font-size-base * 1.15);
font-weight: 200;
line-height: 1.4;
@media (min-width: @screen-sm-min)
......@@ -51,42 +50,63 @@ cite { font-style: normal; }
.text-primary
{
color: @color-primary;
&:hover {
color: darken(@color-primary, 10%);
}
}
.text-warning
{
color: @state-warning-text;
&:hover {
color: darken(@state-warning-text, 10%);
}
}
.text-danger
{
color: @state-danger-text;
&:hover {
color: darken(@state-danger-text, 10%);
}
}
.text-success
{
color: @state-success-text;
&:hover {
color: darken(@state-success-text, 10%);
}
}
.text-info
{
color: @state-info-text;
&:hover {
color: darken(@state-info-text, 10%);
}
}
.text-important
{
color: @state-important-text;
&:hover {
color: darken(@state-important-text, 10%);
}
}
.text-special
{
color: @state-special-text;
&:hover {
color: darken(@state-special-text, 10%);
}
}
// // link with text color
// .text-link
// {
// color: @color-fore;
// &:hover,
// &:active
// {
// color: @link-color;
// }
// }
// link with text color
.text-link
{
color: @color-fore;
&:hover,
&:active
{
color: @link-color;
}
}
// Alignment
.text-left { text-align: left; }
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或