mirror of https://github.com/apache/cloudstack.git
141 lines
3.4 KiB
SCSS
141 lines
3.4 KiB
SCSS
// Licensed to the Apache Software Foundation (ASF) under one
|
|
// or more contributor license agreements. See the NOTICE file
|
|
// distributed with this work for additional information
|
|
// regarding copyright ownership. The ASF licenses this file
|
|
// to you under the Apache License, Version 2.0 (the
|
|
// "License"); you may not use this file except in compliance
|
|
// with the License. You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing,
|
|
// software distributed under the License is distributed on an
|
|
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
// KIND, either express or implied. See the License for the
|
|
// specific language governing permissions and limitations
|
|
// under the License.
|
|
@mixin csui-dropdown {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
text-indent: 0.01px;
|
|
text-overflow: '';
|
|
|
|
@include background(
|
|
url(csui/img/form/dropdown-arrow.png) no-repeat right 8px center,
|
|
linear-gradient(#fff, #b6b6b6)
|
|
);
|
|
|
|
border-radius: 3px;
|
|
border: 1px solid black;
|
|
font-size: 12px;
|
|
padding-right: 25px;
|
|
padding-left: 10px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
@mixin csui-dropdown-dark {
|
|
@include csui-dropdown;
|
|
|
|
background-color: #333333;
|
|
|
|
@include background(
|
|
url(csui/img/form/dropdown-arrow-white.png) no-repeat right 8px center,
|
|
linear-gradient(#4e4e4e, #242424)
|
|
);
|
|
|
|
color: white;
|
|
font-weight: bold;
|
|
text-shadow: 0px 1px 1px black;
|
|
}
|
|
|
|
@mixin csui-label {
|
|
font-size: 12px;
|
|
}
|
|
|
|
@mixin csui-textfield {
|
|
font-size: 12px;
|
|
padding: 10px;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
border: 2px solid gray;
|
|
text-indent: 15px;
|
|
padding-right: 15px;
|
|
|
|
&:focus {
|
|
border-left-width: 10px;
|
|
border-color: #15aaf3;
|
|
outline: none;
|
|
text-indent: 7px;
|
|
padding-right: 7px;
|
|
}
|
|
}
|
|
|
|
@mixin csui-checkbox {
|
|
margin-top: 25px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
@mixin csui-form {
|
|
.message {
|
|
@include row;
|
|
}
|
|
|
|
form {
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
border-bottom: 1px solid #ccc;
|
|
border-top: 1px solid #ccc;
|
|
}
|
|
|
|
.form-item {
|
|
@include row;
|
|
@include span-columns(12);
|
|
|
|
display: inline-block; // Needed for legacy code in JS
|
|
|
|
label {
|
|
@include span-columns(3);
|
|
@include shift(0.5);
|
|
|
|
text-align: right;
|
|
position: relative;
|
|
top: 20px;
|
|
}
|
|
|
|
input, select, .dynamic-input {
|
|
&:not([type=checkbox]) {
|
|
@include span-columns(7);
|
|
}
|
|
|
|
&[type=checkbox], [type=radio] {
|
|
@include span-columns(1);
|
|
}
|
|
|
|
@include shift(0.2);
|
|
}
|
|
}
|
|
|
|
.dynamic-input {
|
|
display: inline-block;
|
|
border: 1px solid #ccc;
|
|
background: lighten(#ccc, 15%);
|
|
border-radius: 3px;
|
|
|
|
.form-item {
|
|
margin: 0;
|
|
|
|
label {
|
|
@include span-columns(4);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Defaults
|
|
label { @include csui-label; }
|
|
select { @include csui-dropdown; }
|
|
input[type=text], input[type=password] { @include csui-textfield; }
|
|
input[type=checkbox], input[type=radio] { @include csui-checkbox; } |