Page MenuHomec4science
Files F62462046

form.css.scss
No OneTemporary
Actions

File Metadata

Created
Mon, May 13, 09:10

form.css.scss
View Options

.important {
color:red
}
div.missing_field input{
border-color:red
}
div.missing_field span.custom-file-control{
border-color:red
}
.margin_addon {
margin-right:10px
}
.card-text {
margin-bottom:15px;
}
label {
margin-bottom:2px;
}
.form-bool {
margin-left:1.25rem;
}
.group_field {
margin-bottom:5px;
}
.field_group_content{
padding:5px
}
.fold_bar {
background-color:grey;
text-align:right
}
.fold_bar i {
color:white;
text-align:right
}
.form-number-field {
max-width:80px;
overflow:hidden;
text-align:right;
}
.form_card {
height:50vh;
overflow-y:auto;
}
#customFile .custom-file-control:lang(en)::after {
content: "Select file...";
}
#customFile .custom-file-control:lang(en)::before {
content: "Click me";
}
/*when a value is selected, this class removes the content */
.custom-file-control.selected:lang(en)::after {
content: "" !important;
}
.custom-file {
overflow: hidden;
}
.custom-file-control {
white-space: nowrap;
}
.form-categ {
position:absolute;
border: solid 1px #999;
border-bottom: solid 4px #999;
padding:7px;
background-color:#f2f2f2;
color:#666;
height:90vh;
width:93%;
overflow:hidden;
overflow-y:auto;
-webkit-transition:max-height .6s ease, background-color .2s ease, border .2s ease;
-moz-transition:max-height .6s ease, background-color .2s ease, border .2s ease;
-ms-transition:max-height .6s ease, background-color .2s ease, border .2s ease;
transition:max-height .6s ease, background-color .2s ease, border .2s ease;
.indent-field {
margin-left:10px;
}
.bordered-top-field {
border-top:solid 1px #ccc;
padding-top:5px;
}
.form-tabs-selector {
margin-bottom:15px;
}
&:hover {
z-index:100;
height:auto;
max-height:110%;
overflow-y:auto;
border: solid 1px #333;
background-color: #fff;
color:#333;
-webkit-box-shadow: -1px 1px 2px 1px #B3B3B3;
-moz-box-shadow: -1px 1px 2px 1px #B3B3B3;
box-shadow: -1px 1px 2px 1px #B3B3B3;
}
}
.file_download {
margin-bottom:32px;
display:none;
&:hover,
&:focus,
&:active,
&.active {
color:#333;
}
}
.help-button {
.label-text,
.help-icon {
cursor:pointer;
color:#666;
&:hover,
&:focus,
&:active,
&.active {
color:#333;
}
}
.help-icon {
float:right;
margin-right:10px;
}
}
.help-block {
padding-top:8px;
max-height:0;
height:auto;
opacity:0;
visibility: hidden;
-webkit-transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.8s;
-moz-transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.8s;
-ms-transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.8s;
transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.8s;
.file_example {
margin-top:2px;
display:block;
}
}
.expandable {
display:block;
border: 1px solid #333;
border-radius:5px;
padding: 3px;
margin-top:2px;
margin-bottom:5px;
max-height:100%;
height:auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition:max-height 1.5s ease;
-moz-transition:max-height 1.5s ease;
-ms-transition:max-height 1.5s ease;
transition:max-height 1.5s ease;
.expandable-image {
position:absolute;
right:90px;
margin-left:2px;
background-color:#fff;
border: 1px solid #d9d9d9;
height:auto;
max-height:40px;
-webkit-box-shadow: 0;
-moz-box-shadow: 0;
box-shadow: 0;
-webkit-transition:max-height 0.7s ease, transform 0.7s ease, webkit-box-shadow 0.7s ease;
-moz-transition:max-height 0.7s ease, transform 0.7s ease, -moz-box-shadow 0.7s ease;
-ms-transition:max-height 0.7s ease, transform 0.7s ease, box-shadow 0.7s ease;
transition:max-height 0.7s ease, transform 0.7s ease, box-shadow 0.7s ease;
&:hover {
z-index:200;
max-height:120px;
transform:translate(0, -40px);
-webkit-box-shadow: -1px 1px 2px 1px #B3B3B3;
-moz-box-shadow: -1px 1px 2px 1px #B3B3B3;
box-shadow: -1px 1px 2px 1px #B3B3B3;
}
}
a {
color: #666;
&:hover,
&:focus,
&:active,
&.active {
color:#333;
}
}
.slide-open, .slide-close {
padding:3px;
float:right;
margin-right:7px;
}
.slider {
cursor: pointer;
}
.slide {
display: block;
max-height:0;
height:auto;
opacity:0;
visibility: hidden;
margin-top: -15px;
width: 98%;
padding:7px;
-webkit-transition:max-height 0.5s ease, opacity 0.5s ease, visibility 0.9s;
-moz-transition:max-height 0.5s ease, opacity 0.5s ease, visibility 0.9s;
-ms-transition:max-height 0.5s ease, opacity 0.5s ease, visibility 0.9s;
transition:max-height 0.5s ease, opacity 0.5s ease, visibility 0.9s;
}
}
.multiselect-btn-container {
height:35px;
position:relative;
display:block;
}
.form-text {
width:auto;
max-width:90%;
}
.input-group-number {
width:auto;
max-width:110px;
}
.form-number {
text-align:right;
}
.input-group-addon {
width:auto;
max-width:50%;
}
.text-field {
color:#333;
overflow: hidden;
display: inline-block;
padding: 0.4em 0.4em;
border:solid #999999 1px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 1);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
text-decoration: none;
font-weight: normal;
font-family: verdana, arial, helvetica, sans-serif;
white-space: nowrap;
outline: none;
}
.big-text-field {
width: 100%;
font-size: 20px;
line-height: 22px;
}
input[type=number] {-moz-appearance: textfield;}
::-webkit-inner-spin-button { -webkit-appearance: none;}
.form-text-field {
width:80%;
}
.form-select-field, .select-from-file-row, .select-from-field {
width:50%;
}
.text-field:hover,
.text-field:focus,
.text-field:active,
.text-field.active {
-webkit-box-shadow: 0px 0px 1px 1px #999999;
-moz-box-shadow: 0px 0px 1px 1px #999999;
box-shadow: 0px 0px 1px 1px #999999;
}
.parameters {
width: 400px;
border: solid 2px #599bdc;
margin:0;
padding: 7px;
background-color: #fff;
-webkit-box-shadow: -1px 3px 3px -1px #888888;
-moz-box-shadow: -1px 3px 3px -1px #888888;
box-shadow: -1px 3px 3px -1px #888888;
h1 {
color: #fff;
background-color:#599bdc;
padding: 1px 1px 1px 15px;
font-size: 22px;
margin-left: -7px;
margin-right: -7px;
margin-top: -7px;
margin-bottom: 15px;
}
p {
padding: 1px 15px 1px 15px;
font-size: 14px;
margin: -7px;
margin-bottom: 0px;
}
.select-from-file-category {
overflow: hidden;
padding:0;
border:none;
background-color:#fff;
width:100%;
height:38px;
option {
line-height: 25px;
border:1px solid #666666;
border-radius:50%;
padding:0px;
margin:3px;
width:25px;
height:25px;
text-align:center;
display:inline-block;
float:right;
background-color:#F4F4F4;
}
option:checked,
option:hover {
color:#fff;
background-color:#599bdc;
}
}
.select-from-file-category:disabled {
option {
width:auto;
border:none;
border-radius:0px;
color:#8F9499;
background-color:#fff;
background-image: none;
}
}
.field_categ {
padding: 7px;
.field {
margin:0px;
width: 100%;
overflow: hidden;
display: inline-block;
padding: 7px;
border:solid #999999 1px;
border-radius: 5px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
h1 {
padding: 0px 0px 0px 15px;
font-size: 18px;
margin: -7px;
background-color: #808080;
color: #fff;
-webkit-box-shadow: -1px 1px 2px 1px #B3B3B3;
-moz-box-shadow: -1px 1px 2px 1px #B3B3B3;
box-shadow: -1px 1px 2px 1px #B3B3B3;
}
.legend {
display:inline-block;
max-width:200px;
width:auto;
vertical-align:top;
background-color: #F3F4FF;
font-size:12px;
line-height: 18px;
border-radius:2px;
padding:2px;
overflow:hidden;
.legend-text {
display:inline;
}
}
.test-file {
display:inline-block;
width:250px;
line-height: 22px;
margin-top:5px;
margin-left:2px;
.test-select {
font-size:14px;
float:right;
}
.test-text {
display:inline-block;
font-size:14px;
float:left;
}
}
.comment {
margin-top:10px;
}
}
}

Event Timeline

c4science · Help