File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
2014-04-15
/**
* Bootstrap theme: Yobi UI
*
* Override bootstrap::
* 기본 글자 크기 12px로 설정
* (bootstrap 2.3.1 : 14px,
* bootstrap 2.2.1 : 12px)
*/
body { font-size:12px; }
label, input, button, select, textarea { font-size:12px; }
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"],
input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"],
.uneditable-input { font-size:12px; }
.btn-group > .btn,
.btn-group > .dropdown-menu,
.btn-group > .popover {
font-size: 12px;
}
.blind {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
}
/* box-shadow, border-radius */
form { margin:0 0 2px; }
textarea, input[type="text"], input[type="password"], input[type="datetime"],
input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"],
input[type="week"], input[type="number"], input[type="email"], input[type="url"],
input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
.box-shadow(none);
.border-radius(2px);
&:focus {
.box-shadow(none);
border-color:@primary;
}
}
/** popover **/
.popover {
line-height:1;
.border-radius(2px);
.box-shadow(-2px 2px 1px rgba(0,0,0,0.1));
}
/** yobi.ui.Dropdown **/
.dropdown-toggle {
display:inline-block;
position:relative;
margin-bottom: 0;
margin-left: .3em;
padding:0px; padding-left:12px;
text-align : left;
vertical-align: middle;
white-space : nowrap;
color: #333;
background : @yobi-btn-default;
text-shadow: none;
line-height: 20px;
font-size: 14px;
outline:0 none;
border: 1px solid rgba(0,0,0,.15);
.border-radius(3px) !important;
.box-shadow(0 1px 0 rgba(0,0,0,.05));
.transition(all 0.3s ease);
&.small .d-label { width: 29px; }
&.medium .d-label { width: 58px; }
&.large .d-label { width: 116px; }
&.auto {
width:100%;
padding-right:28px;
.d-label {
width: 100%;
display:block;
.text-overflow;
}
.d-caret {
position:absolute;
top:0;
right:0;
bottom:0;
background:inherit;
}
}
.d-label {
float:left; margin:0;
padding:4px 0; padding-right:9px;
width:116px; overflow:hidden;
.inline-block;
}
.d-caret {
float:right; margin:0;
padding:4px 9px;
.caret {
border-top-color:#4f4f4f;
}
&.nlb { border-left:none; }
}
&.blue {
background:@blue2; border-bottom:1px solid rgba(0,0,0,0.25);
.d-caret .caret { border-top-color:#fff; }
}
&.orange {
background:@orange; border-bottom:1px solid rgba(0,0,0,0.25);
.d-caret .caret { border-top-color:#fff; }
}
}
@-moz-document url-prefix() {
*>.dropdown-toggle {
padding:3px 0 !important;
}
}
.btn-group.open .btn.dropdown-toggle {
background:darken(@white, 5%);
&.blue { background:darken(@blue2, 5%); }
&.orange { background:darken(@orange, 5%); }
}
.dropdown-menu {
padding:0; width:inherit; overflow:hidden;
border:1px solid rgba(0,0,0,0.2);
.box-shadow(-2px 2px 1px rgba(0,0,0,0.1));
.border-radius(2px);
}
.dropdown-menu li {
margin-bottom:1px;
&:hover {
.usf-group .loginid { color:#fff; }
}
}
.dropdown-menu li>a:hover,.dropdown-menu li>a:focus,.dropdown-submenu:hover>a {
color:#fff;
cursor:pointer;
background:@secondary !important;
filter:none; /* for IE */
/*.linear-gradient(@darkgray, darken(@darkgray, 10%));*/
}
.dropdown-menu .active > a, .dropdown-menu .active > a:hover {
color:#fff;
background:@secondary !important;
filter:none; /* for IE */
/*.linear-gradient(@darkgray, darken(@darkgray, 10%));*/
}
.dropdown-menu .disabled span {
padding-left:10px;
font-weight:bold; color:@darkgray;
}
.dropdown-menu li:last-of-type.divider { display:none; }
.btn-group.auto {
width:100%;
}
.usf-group {
.avatar-wrap { margin-right:5px; }
.name { margin-right:2px; }
.loginid { color:#999; }
}
/** buttons **/
.icon-refresh {
cursor: pointer;
}
.btn.disabled, .btn[disabled] {
opacity:0.35;
filter:alpha(opacity=35);
.caret { border-top-color:#aaa; }
}
.nbtn:disabled{
background-color: #dadada !important;
color:gray;
opacity:0.35;
filter:alpha(opacity=35);
}
.nbtn {
text-align :center;
font-weight:bold;
font-size: 11px;
line-height: 18px;
border:0; padding:0;
margin-right:5px;
white-space:nowrap;
color: @white;
background-color: #707070;
text-shadow:none;
.box-shadow(inset 0px -1px 1px rgba(0,0,0,0.3));
.border-radius(2px);
.inline-block;
> i.ico { margin-right: 5px; }
&:hover {
background-color: darken(#707070, 10%);
text-decoration: none;
}
&.last { margin-right:0; }
&.active {
.box-shadow(inset 1px 1px 4px rgba(0, 0, 0, 0.25));
}
&.blue {
background-color: @blue2; /*#56B5D9*/
&:hover { background-color: darken(@blue2, 10%); color: #00ddff; }
.num-badge { background-color:#fff; color:@blue2; }
}
&.orange {
background-color: @orange;
&:hover { background-color: darken(@orange, 10%); color: #f7ffe2; }
}
&.purple {
background-color: @purple;
&:hover { background-color: darken(@purple, 10%); }
}
&.green {
background-color: @green;
&:hover { background-color: darken(@green, 10%); color: #00ddff; }
}
&.red {
background-color:#e45642;
&:hover { background-color: darken(#e45642, 10%); color: #fff; }
}
&.mint {
background-color:#83d6df;
&:hover { background-color: darken(#83d6df, 10%); color: #fff; }
}
&.black {
background-color: #222;
&:hover { background-color : #000; }
}
&.white {
color: #222;
background-color: @white;
&:hover { background-color: darken(@white, 10%); color:@primary; }
}
}
a.nbtn, div.nbtn, span.nbtn, p.nbtn {
vertical-align:middle;
&.small { padding: 3px 10px; }
&.medium { padding: 6px 20px; }
&.large { padding: 9px 30px; font-size:15px; }
}
button.nbtn {
&.square {
padding: 1px 12px;
height: 24px;
line-height: 1;
margin-top: 4px;
margin-right: 4px;
}
&.small { padding:1px 10px; height:24px; line-height:1; }
&.medium { padding:4px 20px; height:30px; line-height:1; }
&.large { padding:8px 30px; height:36px; line-height:1; font-size:15px; }
}
.nbtn-group {
.nbtn {
.border-radius(0px);
margin:0;
}
&:first-child {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
&:last-child {
border-top-right-radius: 2px;
border-bottom-right-radius:2px;
}
}
/* fileUpload button **/
.fake-file-wrap {
position: relative; display:block; clear:both;
overflow: hidden; cursor:pointer;
width:70px; /*margin-top:10px;*/
&:hover {
background:darken(@white, 10%);
}
.file {
position: absolute; z-index:2; cursor:pointer;
top:0; left: 5px; /*-15px;*/ width:100px;
.opacity(0);
}
}
/** issue label **/
.issue-label {
background:#f9f9f9;
font-size:11px;
text-shadow:none;
-webkit-transition-duration:0.25s;
cursor: pointer;
&:last-of-type { margin:0; }
.delete {
display:inline;/*none;*/
margin-left:8px; padding:8px 4px;
font-size:20px; vertical-align:middle;
-webkit-transition-duration:inherit;
&:hover { background:rgba(0,0,0,.2); }
}
/*&.editable .delete { display:inline; }*/
&.list-label {
padding:2px 3px;
font-weight:normal;
}
&.active {
.border-radius(1px);
&.active-white { color:#fff; }
&.active-dimgray { color:#696969; }
}
&:hover {
.opacity(70);
}
&.static.active { border-left:initial !important; }
&.static:hover { .opacity(100); }
}
span.issue-label {
display: inline-block;
overflow: hidden;
line-height: 20px;
margin-right: 5px;
padding: 2px 6px;
&:hover {
background: #DFDFDF;
.opacity(100);
}
}
.dropdown-menu .issue-label:hover { .opacity(100); }
/** project label */
.project-label {
border:none; padding:1px 5px; display:inline-block;
font-size:11px; font-weight:bold;
color:#fff; white-space:nowrap; vertical-align:middle;
background:#aaa;/*d9d9d9;*/
.border-radius(2px);
/*.box-shadow(inset 0px -2px 2px rgba(255,255,255,0.4));*/
/*&.language { background:#ffc48c; }
&.license { background:#ff9f80; }*/
}
/* */
/** input **/
/* 검색버튼 스타일 */
.btn-search {
width : 88px;
margin : 5px 0 0;
padding: 4px 0;
border : 1px solid #a9a9a9;
color : @black;
text-align : center;
font-weight: bold;
font-size : 11px;
.border-radius(0 2px 2px 0);
&:hover { color:@link-hover-color; }
}
/** 화면 중앙의 프로젝트 내 검색 폼 **/
.form-search {
.text {
width: 360px;
margin: 5px 0 0;
background-color: #fff;
border: 1px solid #ccc;
border-right: 0 none;
.box-shadow(none);
.border-radius(2px 0 0 2px);
&:focus { .box-shadow(none); }
}
.btn {
.btn-search;
}
}
/** 화면 상단의 전체 검색 폼 **/
.form-searchbar {
width: 146px; height: 29px;
margin: 0; padding: 0 6px;
background-color: @search-bar-bg-color;
border:1px solid @search-bar-border-color;
.border-radius(2px);
/*.box-shadow(inset 0px 2px 3px rgba(0,0,0,0.12));*/
.text {
width: 128px; /*height: 13px;*/
margin: 0; margin-right:3px;
padding:4px 0px;
border: 0 none;
font-size: 14px; /* 11px */
color: @search-input-color;
background-color: transparent;
.box-shadow(none);
&:focus { .box-shadow(none); }
}
.ico-search {
border:0; padding:0;
background-color:transparent;
/*margin-bottom:2px;*/
margin-top:2px;
}
}
/** Avatar Wraps **/
.avatar-wrap {
width:32px; height:32px; /* default size: medium */
display:inline-block;
vertical-align:middle;
overflow:hidden;
background:#ddd;
.border-radius(3px) !important;
&.mini { width:12px; height:12px; }
&.smaller { width:20px; height:20px; }
&.small { width:24px; height:24px; }
&.medium { width:32px; height:32px; }
&.mlarge { width:40px; height:40px; }
&.larger { width:45px; height:45px; }
&.large { width:64px; height:64px; }
&.xlarge { width:128px; height:128px; }
img {
width:100%;
height:100%;
vertical-align:top;
}
}
/** tab UI **/
.nav-tabs {
li {
a {
padding-left:30px; padding-right:30px;
color: #3592b5;
font-weight: bold;
&:hover {
text-decoration: none;
background-color: @yobi-white-dark;
}
}
&.active a {
font-weight:bold;
}
}
&.small {
height:29px;
li a { padding:4px 15px; }
}
}
.tab-box {
border:1px solid #ececec;
border-top:none;
.border-radius(0 0 4px 4px);
}
.tab-box-content {
display:none;
&.active {
display:block;
}
}
.tab-searchbox {
padding:5px 15px;
}
.subtab-wrap {
padding:5px 10px;
}
.nav-subtab {
li {
display: inline-block;
margin-left:10px;
&:first-child {
margin-left:0;
}
a {
display: block;
padding:3px;
&:hover {
text-decoration: none;
border-bottom:2px solid @primary;
}
}
&.active {
a {
border-bottom:2px solid @primary;
font-weight: bold;
}
}
}
}
.my-project-item {
li {
padding:5px 15px;
border-top : 1px solid #ececec;
font-size: 14px;
}
}
/** alert **/
.yobiDialog {
.border-radius(none);
border:10px solid #bebebe;
padding:16px 20px; width:500px;
.btn-dismiss {
padding:0; margin:0; width:100%; text-align: right;
display:block; clear:both;
button {
font-size:24px; font-weight:bold; color:#898989;
border:none; background:transparent;
}
}
.message {
.msg {
text-align:center;
font-weight:bold; font-size:18px;
margin-bottom:20px; line-height:1.5em;
}
.desc {
text-align:center;
font-weight: normal; font-size: 14px;
margin: 20px 0 25px; line-height: 150%;
color: #555;
}
}
}
.yobiToasts {
position: fixed;
overflow: hidden;
right: 0 !important;
top: 40px !important;
margin: 10px; width:340px;
z-index:990;
.toast {
position:relative;
display:inline-block;
width: 300px; height: 50px;
margin: 10px; padding: 10px;
outline:none; text-align: center;
font-weight: bold;
border: 2px solid @primary;
color: #222; background-color: #fff;
-webkit-transition-duration: 0.3s;
.opacity(0);
.border-radius(2px);
/*.box-shadow(0px 0px 5px rgba(240, 160, 132, 0.6));*/
.btn-dismiss {
position:absolute;
top:5px; right:10px;
button {
color:@primary;
font-size:15px;
font-weight:bold;
}
}
.v {
display:inline-block;
width:0px; height:50px;
vertical-align:middle;
}
.msg {
width:280px; font-size:15px;
display:inline-block;
word-wrap: break-word;
word-break:break-all;
margin: 0;
vertical-align:middle;
}
}
}
.yobiSpinner {
display: none;
position: fixed; z-index: 99999;
top: 0; bottom: 0; left: 0; right: 0;
.spinContainer {
position:fixed;
width:100px; height:100px;
top:50%; left:50%;
}
}
/** etc **/
.num-badge {
font-weight: bold;
vertical-align: top;
font-family: @base-font-family;/*Tahoma;*/
text-shadow: none;
border-radius: 2px;
margin-left: 3px;
font-size: 13px;
padding: 2px 4px;
}
.num-noti {
display: inline-block;
background: @primary;
color:#fff;
font-weight:bold;
border:1px solid #eee;
padding: 0px 5px;
margin-left: 5px;
vertical-align: middle;
font-family: @base-font-family;/*Tahoma;*/
text-shadow: none;
.border-radius(2px);
}
.label-exp {
background:@secondary;
text-shadow: none;
i { font-size:10px; }
}
.counter {
left: 2px;
position: relative;
padding: 2px 3px;
font-size: 11px;
color: @blue2;
}
.ybtn, .flat > li > .ybtn {
text-align :center;
white-space:nowrap;
color: #333;
background-color: @yobi-btn-default;
text-shadow:none;
.border-radius(3px) !important;
display:inline-block;
padding: 4px 12px !important;
vertical-align: middle;
cursor: pointer;
line-height: 20px;
font-size: 14px;
.transition(all 0.3s ease);
outline:0 none;
position:relative;
margin-bottom: 0;
margin-left: .3em;
border: 1px solid rgba(0,0,0,.15);
.box-shadow(0 1px 0 rgba(0,0,0,.05));
i { line-height:20px;}
&.ybtn-medium {
padding:4px 12px;
}
&:first-child {
margin-left:0;
}
&:hover, &:focus, &:active, &:focus, &.disabled, &[disabled] {
border:1px solid rgba(0,0,0,.25);
background-color:#f1f1f1;
color: #292929;
text-decoration:none;
}
&.ybtn-small {
padding: 2px 10px !important;
font-size: 13px !important;
}
&.ybtn-large {
padding: 10px 15px !important;
font-size: 16px !important;
}
&.ybtn-middle {
padding: 7px 15px !important;
font-size: 14px !important;
}
&.ybtn-mini {
padding: 0 6px !important;
font-size: 10.5px !important;
}
&.ybtn-minimum {
padding: 0 4px !important;
font-size: 10px !important;
line-height: 16px !important;
i { line-height:16px;}
}
&.ybtn-maximum {
padding: 20px 30px !important;
font-size: 26px !important;
}
&.ybtn-padding {
padding:13px 30px !important;
font-size: 20px !important;
}
&.ybtn-primary, &.ybtn-success,&.ybtn-info, &.ybtn-danger,&.ybtn-inverse, &.ybtn-disabled, &ybtn-warning, &.ybtn-transparent, &.ybtn-watching {
color:@yobi-white;
}
&.ybtn-gray {
backgroun-color: @yobi-white-dark;
&:hover, &:focus, &:active, &:focus {
background-color: @yobi-white !important;
}
}
&.ybtn-primary {
background-color : @yobi-btn-primary !important;
border:1px solid @yobi-btn-primary-hover;
&:hover, &:focus, &:active, &:focus {
background-color: @yobi-btn-primary-hover !important;
}
}
&.ybtn-success {
background-color : @yobi-btn-primary !important;
border:1px solid @yobi-btn-primary-hover;
&:hover, &:focus, &:active, &:focus {
background-color: @yobi-btn-primary-hover !important;
}
}
&.ybtn-warning {
background-color : @yobi-btn-warning !important;
border:1px solid @yobi-btn-warning-hover;
&:hover, &:focus {
background-color: @yobi-btn-warning-hover !important;
}
}
&.ybtn-info {
background-color : @yobi-btn-info !important;
border:1px solid @yobi-btn-info-hover;
&:hover, &:focus {
background-color: @yobi-btn-info-hover !important;
}
}
&.ybtn-danger {
background-color : @yobi-btn-danger !important;
border:1px solid @yobi-btn-danger-hover;
&:hover, &:focus {
background-color: @yobi-btn-danger-hover !important;
}
}
&.ybtn-inverse {
background-color : @yobi-btn-inverse !important;
border:1px solid @yobi-btn-inverse-hover;
&:hover, &:focus {
background-color: @yobi-btn-inverse-hover !important;
}
}
&.ybtn-transparent {
background-color : rgba(0,0,0, 0.25);
&:hover, &:focus {
background-color: rgba(0,0,0, 0.45);
}
}
&.ybtn-disabled, &[disabled] {
background-color : @yobi-btn-disabled !important;
border:none;
color:#dedede;
text-shadow:1px 1px rgba(255,255,255,0.5);
&:hover, &:focus {
background-color: @yobi-btn-disabled !important;
}
}
&.ybtn-watching {
background-color : #f4efea !important;
border:1px solid #C9C5C1;
color:#333;
&:hover, &:focus {
background-color: #e0dad4 !important;
}
}
&.ybtn-unwatching {
background-color : @yobi-btn-disabled !important;
border:none;
&:hover, &:focus {
background-color: !important;
}
}
&.pressed {
.box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.15));
}
&.dropdown-toggle {
&:after {
margin-left: 5px;
vertical-align: middle;
display: inline-block;
vertical-align: middle !important;
width: 0;
.transition(all 0.3s ease);
height: 0;
vertical-align: top;
border-top: 4px solid @yobi-inverse;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
}
&:hover, &:focus {
&:after {
text-decoration:none;
}
}
&.ybtn-success,&.ybtn-primary, &.ybtn-info, &.ybtn-danger,&.ybtn-inverse, &.ybtn-disabled {
&:after {
border-top: 4px solid @yobi-white !important;
}
&:hover, &:focus {
&:after {
border-top: 4px solid @yobi-white !important;
text-decoration:none;
}
}
}
}
&.round-left {
.border-radius(6px 0 0 6px);
}
&.round-right {
.border-radius(0 6px 6px 0);
}
}
.dropdown-menu {
&.flat {
top:100%;
left:0;
display: block;
position:absolute;
background-clip: padding-box;
.border-radius(6px);
.box-shadow(none);
font-size:12px;
background-color:@yobi-white;
overflow:visible;
.opacity(0);
.transition(all 0.25s ease);
visibility: hidden;
-webkit-backface-visibility: hidden;
margin-top:-10px;
.box-shadow(0 2px 10px rgba(0,0,0,.2));
border: 1px solid #ccc;
border-color: rgba(0,0,0,.2);
color: @yobi-white;
padding: 4px 0 6px;
&:before {
content: " ";
border-color: transparent;
border-style: dashed dashed solid;
border-width: 0 8px 8px;
position: absolute;
left: 7px;
z-index: 1;
height: 0;
width: 0;
-webkit-animation: gb__a .2s;
animation: gb__a .2s;
border-bottom-color: #ccc;
border-bottom-color: rgba(0,0,0,.2);
top: -8px;
}
&:after {
content: " ";
border-color: transparent;
border-bottom-color: @yobi-white;
border-style: dashed dashed solid;
border-width: 0 8px 8px;
position: absolute;
left: 7px;
top: -7px;
z-index: 1;
height: 0;
width: 0;
}
.pop-title {
.border-radius(3px);
background: @yobi-cyan-light;
padding:3px 0;
padding: 3px 11px 5px;
margin:5px 3px;
font-weight:bold;
color:#333;
font-size:14px;
white-space:nowrap;
&:first-child {
margin-top: 0px;
}
}
.pop-content {
font-size:12px;
padding:10px 15px;
white-space:nowrap;
text-align:left;
color:#292929;
background-color:@yobi-white;
p {
line-height:20px;
margin:0;
padding:0;
}
&.btn-wrap{
margin-top:0;
padding-top:0;
text-align:center;
}
}
li {
margin: 0 5px 2px !important;
white-space:nowrap;
float:none !important;
background-color:@yobi-white;
color:#292929;
&:first-child, &:last-child {
> a {
color:#292929;
border-radius: 2px;
padding-bottom: 7px;
padding-top: 5px;
}
}
&.active, &:selected {
> a {
background: rgba(255,255,255,0.25);
color:#292929;
position: relative;
z-index: 1;
}
}
&.empty {
padding:3px;
text-align:center;
}
dt {
padding-left: 11px;
padding-right: 11px;
}
&.divider {
margin-left: 11px;
margin-right: 11px;
}
&.title {
.border-radius(3px);
background:@yobi-cyan-light;
padding:3px 0;
padding: 3px 11px 5px;
margin:5px 3px;
font-weight:bold;
color:#333;
&:first-child {
margin-top: 0px;
}
}
> a {
.border-radius(3px);
color:#292929;
padding: 3px 5px 5px 15px;
background-color:transparent !important;
.transition(all 0.2s ease);
&:hover, &:active, &:focus {
.border-radius(3px) !important;
background-color: rgba(0,0,0,0.15) !important;
}
&.highlighted {
background: #526476;
&:hover, &:active, &a:focus {
background: #fff;
}
}
&.ybtn {
display:inline-block;
height:auto;
}
}
.disabled {
color:#ccc;
font-size:0.8em;
}
}
&.right {
left:auto;
right:0px;
&:before, &:after {
right: 7px;
left: auto;
}
}
&.maximum {
max-height: 500px;
overflow-y: auto;
}
}
}
.open {
> .flat {
.opacity(100);
visibility:visible;
margin-top:12px;
}
}
.tooltip {
white-space:nowrap;
}
.btn-transparent {
background:transparent;
border:0;
outline:none;
}
.numberic {
display:inline-block;
margin-left:5px;
font-size:10px;
border:2px solid #FFF;
line-height:15px;
padding:0 5px;
background-color:@yobi-primary;
color:#ECF0F1;
.border-radius(10px);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
-o-box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1);
}
/* ============================================================
* bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru
* http://www.larentis.eu/switch/
* ============================================================
* Licensed under the Apache License, Version 2.0
* http://www.apache.org/licenses/LICENSE-2.0
* ============================================================ */
/**
* Flat UI Free
* licensed under a CC BY 3.0 and MIT License
*
* http://creativecommons.org/licenses/by/3.0/
* http://opensource.org/licenses/mit-license.html
*/
.has-switch {
border-radius: 30px;
display: inline-block;
cursor: pointer;
line-height: 1.231;
overflow: hidden;
position: relative;
text-align: left;
width: 80px;
-webkit-mask: url('@{base-image-path}/switch-mask.png') 0 0 no-repeat;
mask: url('@{base-image-path}/switch-mask.png') 0 0 no-repeat;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.has-switch.deactivate {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default !important;
}
.has-switch.deactivate label,
.has-switch.deactivate span {
cursor: default !important;
}
.has-switch > div {
width: 162%;
position: relative;
top: 0;
}
.has-switch > div.switch-animate {
-webkit-transition: left 0.25s ease-out;
-moz-transition: left 0.25s ease-out;
-o-transition: left 0.25s ease-out;
transition: left 0.25s ease-out;
-webkit-backface-visibility: hidden;
}
.has-switch > div.switch-off {
left: -63%;
}
.has-switch > div.switch-off label {
background-color: #FFF;
border-color: @state-closed;
-webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5);
-moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5);
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5);
}
.has-switch > div.switch-on {
left: 0%;
}
.has-switch > div.switch-on label {
background-color: #fff;
}
.has-switch input[type=checkbox] {
display: none;
}
.has-switch span {
cursor: pointer;
font-size: 13px;/*14.994px;*/
font-weight: 700;
float: left;
height: 29px;
line-height: 19px;
margin: 0;
padding-bottom: 6px;
padding-top: 5px;
position: relative;
text-align: center;
width: 50%;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.25s ease-out;
-moz-transition: 0.25s ease-out;
-o-transition: 0.25s ease-out;
transition: 0.25s ease-out;
-webkit-backface-visibility: hidden;
}
.has-switch span.switch-left {
border-radius: 30px 0 0 30px;
background-color: @state-open;
color: #fff;
border-left: 1px solid transparent;
&:hover {
background-color:darken(@state-open, 10%);
}
}
.has-switch span.switch-right {
border-radius: 0 30px 30px 0;
background-color: @state-closed;
color: #FFF;/*#ffffff;*/
text-indent: 5px;
&:hover {
background-color:darken(@state-closed, 10%);
}
}
.has-switch label {
border: 4px solid @state-open;
border-radius: 50%;
float: left;
height: 21px;
margin: 0 -15px 0 -14px;
padding: 0;
position: relative;
vertical-align: middle;
width: 21px;
z-index: 100;
-webkit-transition: 0.25s ease-out;
-moz-transition: 0.25s ease-out;
-o-transition: 0.25s ease-out;
transition: 0.25s ease-out;
-webkit-backface-visibility: hidden;
}
.switch-square {
border-radius: 6px;
-webkit-mask: url('@{base-image-path}/switch-mask.png') 0 0 no-repeat;
mask: url('@{base-image-path}/switch-mask.png') 0 0 no-repeat;
}
.switch-square > div.switch-off label {
border-color: #7f8c9a;
border-radius: 6px 0 0 6px;
}
.switch-square span.switch-left {
border-radius: 6px 0 0 6px;
}
.switch-square span.switch-right {
border-radius: 0 6px 6px 0;
}
.switch-square label {
border-radius: 0 6px 6px 0;
border-color: @secondary;
}
.search-bar {
border:1px solid #ccc;
.border-radius(3px);
line-height:20px;
padding:4px 25px 4px 5px;
position: relative;
height: 20px;
background-color: #FFF;
.textbox {
border:0 none;
height: 20px;
width:350px;
margin: 0 -5px;
padding:0 5px;
.transition(width .15s);
&.small {
width:150px;
}
&.large {
width : 560px;
}
&.resize {
width:80px;
&:focus, &:active {
width:350px;
}
}
&.full {
width: 100%;
}
}
.search-btn {
background-color:transparent;
border:0;
height: 20px;
outline:0 none;
position:absolute;
top:5px;
right:5px;
}
}
.control-label{
font-weight: bold;
display: block;
padding: 4px 4px 0px 4px;
color: 666;
}