bench-forgejo/public/ng/less/ui/form.less

231 lines
4 KiB
Text
Raw Normal View History

2014-07-26 09:54:27 +05:30
@import "var";
2014-10-13 08:52:16 +05:30
// Button.
2014-07-26 09:54:27 +05:30
.btn {
2014-10-13 08:52:16 +05:30
white-space: nowrap;
2014-07-26 09:54:27 +05:30
}
.btn-small {
font-size: 0.9*@baseFontSize;
padding: .4em .9em;
}
2014-08-11 08:41:18 +05:30
.btn-medium {
font-size: @baseFontSize;
padding: .4em .9em;
}
2014-07-26 09:54:27 +05:30
.btn-large {
2014-08-11 08:41:18 +05:30
font-size: 1.2*@baseFontSize;
2014-12-11 03:07:54 +05:30
padding: .4em .9em;
2014-07-26 09:54:27 +05:30
}
.btn-green {
background-color: @btnGreenColor;
border: 1px solid @btnGreenColor;
&:hover {
background-color: @btnHoverGreenColor;
color: #FFF;
}
}
.btn-blue {
background-color: @btnBlueColor;
border: 1px solid @btnBlueColor;
&:hover {
background-color: @btnHoverBlueColor;
color: #FFF;
}
}
.btn-red {
color: #FFF;
2014-08-10 04:10:10 +05:30
background-color: @btnRedColor;
border: 1px solid @btnRedColor;
&:hover {
background-color: @btnHoverRedColor;
color: #FFF;
}
2014-07-26 09:54:27 +05:30
}
.btn-orange {
background-color: @btnOrangeColor;
border: 1px solid @btnOrangeColor;
&:hover {
background-color: @btnHoverOrangeColor;
color: #FFF;
}
}
.btn-black {
background-color: @btnBlackColor;
border: 1px solid @btnBlackColor;
&:hover {
background-color: @btnHoverBlackColor;
color: #FFF;
}
}
.btn-gray {
background-color: @btnGrayColor;
color: @baseFontColor;
border: 1px solid @btnGrayBorderColor;
&:hover {
background-color: @btnGrayHoverColor;
color: @baseFontColor;
}
}
2015-03-19 05:05:17 +05:30
.btn-white {
background-color: @btnWhiteColor;
color: @baseFontColor;
border: 1px solid @btnWhiteBorderColor;
&:hover {
background-color: @btnWhiteHoverColor;
color: @baseFontColor;
}
&.active {
background-color: @btnWhiteHoverColor;
color: @baseFontColor;
}
}
2014-07-26 09:54:27 +05:30
// status buttons
.btn-active {
2014-08-10 04:10:10 +05:30
box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset, 0 0 4px rgba(0, 0, 0, .15) inset
2014-07-26 09:54:27 +05:30
}
2014-08-09 22:59:51 +05:30
.btn-header {
margin-top: -1px;
color: white;
padding: 0 10px;
}
2014-08-10 04:10:10 +05:30
.btn-link {
overflow: visible;
2014-08-10 09:32:00 +05:30
color: white;
2014-08-10 04:10:10 +05:30
padding: .6em 1.2em;
}
2014-07-26 09:54:27 +05:30
.btn-radius {
2014-08-10 04:10:10 +05:30
border-radius: .25em;
2014-07-26 09:54:27 +05:30
}
.btn-left-radius {
2014-08-10 04:10:10 +05:30
border-top-left-radius: .25em;
border-bottom-left-radius: .25em;
2014-07-26 09:54:27 +05:30
}
.btn-right-radius {
2014-08-10 04:10:10 +05:30
border-top-right-radius: .25em;
border-bottom-right-radius: .25em;
2014-07-26 09:54:27 +05:30
}
.btn-block {
2014-08-10 04:10:10 +05:30
display: block;
width: 100%;
box-sizing: content-box;
text-align: center;
2014-07-26 09:54:27 +05:30
}
.btn-comb {
margin-left: -1px;
}
2014-07-26 09:54:27 +05:30
.btn-disabled {
opacity: .6;
cursor: not-allowed;
box-shadow: none;
background-image: none !important;
border: none;
&:hover {
background-image: none !important;
color: @btnHoverFontColor;
}
}
2015-03-19 05:05:17 +05:30
.btn-group {
display: inline-block;
> .btn {
position: relative;
float: left;
margin-right: -1px;
&:first-child{
border-bottom-left-radius: .25em;
border-top-left-radius: .25em;
}
&:last-child{
border-bottom-right-radius: .25em;
border-top-right-radius: .25em;
}
}
}
2014-07-26 09:54:27 +05:30
// input form elements
.ipt {
2014-10-07 03:20:00 +05:30
&:focus {
border-color: @iptFocusBorderColor;
}
2014-07-26 09:54:27 +05:30
}
.ipt-radius {
2014-10-07 03:20:00 +05:30
border-radius: .25em;
2014-07-26 09:54:27 +05:30
}
.ipt-small {
2014-10-07 03:20:00 +05:30
font-size: .8*@baseFontSize;
2014-07-26 09:54:27 +05:30
}
.ipt-large {
2014-10-07 03:20:00 +05:30
font-size: 1.2*@baseFontSize;
}
.ipt-textarea {
height: auto !important;
width: auto;
2014-07-26 09:54:27 +05:30
}
.ipt-disabled,
input[disabled] {
background-color: @iptDisabledColor !important;
&:focus {
background-color: @iptDisabledColor !important;
}
color: #888;
cursor: not-allowed;
}
.ipt-readonly,
input[readonly] {
&:focus {
background-color: @iptDisabledColor !important;
}
}
.ipt-error {
border-color: @iptErrorBorderColor !important;
background-color: @iptErrorFocusColor !important;
}
.form {
label {
margin-right: 1em;
}
.help {
color: @formHelpFontColor;
padding-top: .6em;
display: inline-block;
}
}
.form-stack {
label {
display: block;
}
.field {
margin-bottom: 1em;
}
}
.form-align {
label,
.form-label {
display: inline-block;
width: 120px;
text-align: right;
margin-right: 1em;
}
.field {
margin-bottom: 1em;
}
}
2014-09-14 07:42:11 +05:30
label {
&.text-left {
text-align: left;
}
&.req {
&:after {
content: "*";
color: @labelRedColor;
}
}
2015-03-19 05:05:17 +05:30
}