Commit 8f65c716 authored by fabio martelli's avatar fabio martelli
Browse files

provide responsive template for end-user

parent 8f1ed83f
......@@ -53,6 +53,7 @@
#captchaImg{
display: block;
margin: 0 auto;
width:100%;
}
.disable-link{
......
......@@ -13,9 +13,17 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*default stile*/
* {
box-sizing: border-box;
}
#form-container {
position: relative;
width: 100%;
margin-top:-4px;
margin: 0 auto;
text-align: center;
}
......@@ -24,9 +32,9 @@
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* IE10+ */
background: -ms-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* IE10+ */
margin: 1% 9%;
width: 83%; padding:10px;
width: 83%; padding:10px;
/* shadows and rounded borders */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
......@@ -35,10 +43,11 @@
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
#form-container .breadcrumb-header {
#form-container .breadcrumb-header {
margin: auto;
width: 80%;
padding:10px;
width: 80%;
padding:10px;
}
.signup-form {
......@@ -54,7 +63,7 @@
#attribute-derived,
#attribute-virtual {
padding: 0 155px;
padding: 155px;
}
.attribute-virtual-value-container {
......@@ -69,10 +78,6 @@
margin-bottom: 2%;
}
.minus{
}
.fileButton{
margin-top: 2%;
}
......@@ -84,101 +89,144 @@
.attribute-ui-select {
width: 100%;
/*margin-left: 20%;*/
list-style: none;
}
#previous {
background: -moz-linear-gradient(top, #a9db80 0%, #96c56f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* IE10+ */
float: left;
background: -moz-linear-gradient(top, #a9db80 0%, #96c56f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* IE10+ */
float: right;
color: black;
/*width: 30%;*/
width: 80px;
padding-left: 4px;
margin-left: 5px;
}
#previous:hover {
background: #658D5D;
}
#next{
background: -moz-linear-gradient(top, #a9db80 0%, #96c56f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* IE10+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* IE10+ */
margin-left: 5px;
float: right;
color: black;
/*width: 30%;*/
width: 78px;
}
#next:hover {
background: #658D5D;
}
#save{
background: -moz-linear-gradient(top, #a9db80 0%, #96c56f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* IE10+ */
background: -moz-linear-gradient(top, #a9db80 0%, #96c56f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* IE10+ */
color: black;
margin-left: 5px;
/*width: 15%;*/
/*margin-right: 5px;*/
width: 70px;
float: right;
}
#save:hover {
background: #658D5D;
}
#finish{
background: -moz-linear-gradient(top, #a9db80 0%, #96c56f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* IE10+ */
color: black;
margin-left: 5px;
/*margin-right: 5px;*/
width: 78px;
float:right;
}
#finish:hover {
background: #658D5D;
}
#cancel {
/*margin-top: 5%;*/
/*width: 15%;*/
margin-top: 0%;
width: 70px;
}
#captchaButtons {
width: 100%;
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
width: 63%;
}
#form-views { width:100%; }
/* basic styling for entering and leaving */
/* left and right to add to ensure full width: position:absolute; left:30px; right:30px; */
#form-views.ng-enter,
#form-views.ng-leave {
position: absolute;
transition:0.5s all ease-in; -moz-transition:0.5s all ease-in; -webkit-transition:0.5s all ease;
#form-views.ng-leave{
position: absolute;
transition:0.5s all ease-in; -moz-transition:0.5s all ease-in; -webkit-transition:0.5s all ease;
}
/* enter animation */
#form-views.ng-enter {
-webkit-animation:slideInRight 0.5s both ease;
-moz-animation:slideInRight 0.5s both ease;
animation:slideInRight 0.5s both ease;
#form-views.ng-enter{
-webkit-animation:slideInRight 0.5s ease;
-moz-animation:slideInRight 0.5s ease;
animation:slideInRight 0.5s ease;
}
/* leave animation */
#form-views.ng-leave {
#form-views.ng-leave{
position:absolute;
-webkit-animation:slideOutLeft 0.5s both ease;
-moz-animation:slideOutLeft 0.5s both ease;
animation:slideOutLeft 0.5s both ease;
-webkit-animation:slideOutLeft 0.5s ease;
-moz-animation:slideOutLeft 0.5s ease;
animation:slideOutLeft 0.5s ease;
}
.btn-group{
margin-top: 10px;
}
#datetime{
line-height: 34px;
float: left;
margin-top:35px;
margin-top:-30px;
padding: 0 3px 0px 0px;
display: inline-block !important;
display: -webkit-inline-box;
}
#date{
position: relative;
display: table;
display: table;
border-collapse: separate;
margin-bottom: -40px;
}
#timepicker{
line-height: 34px;
float: left;
line-height: 34px;
float: right;
padding: 0 3px 0px 0px;
margin-top: -65px;
margin-left: 39px;
}
/** Button breadcrumb **/
......@@ -196,6 +244,7 @@
left: 100%;
z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
content: " ";
display: block;
......@@ -254,6 +303,356 @@
color: #dd301b;
font-weight: 600;
}
/*--------------end default style*/
/*style for devices max width 350 */
@media only screen and (max-width: 350px) {
input[type=file] {
display: block;
color: white !important;
}
#form-container {
padding: 1px 0px 0px 0px;
}
.panel-body {
padding: 0px;
}
#timepicker{
width: 47px;
line-height: 34px;
float: right;
padding: 0 3px 0px 0px;
margin-top: -65px;
}
.btn-group{
position: relative;
display: inline-flex;
vertical-align: middle;
width: 90%;
margin-left: 35px;
margin-top: 10px;
padding: 0px 0px 1px 0px;
}
#previous {
width: 68px;
}
#next{
width: 68px;
}
#save{
width: 68px;
}
#finish{
width: 68px;
}
#finish:hover {
background: #658D5D;
}
#cancel {
width: 68px;
}
.container-fluid {
padding-right: 15px;
padding-left: 31px;
margin-right: auto;
margin-left: auto;
width: 100%;
}
#captchaButtons {
margin-left: 100px;
}
}
/*style for devices max width 400 */
@media only screen and (max-width: 400px) {
input[type=file] {
display: block;
}
.panel-body {
padding: 0px;
}
#datetime input {
width: 100%;
}
#form-container {
padding: 1px 0px 0px 0px;
}
#form-container .breadcrumb-header{
margin: auto;
width: 100%;
padding: 1px 0px 0px 0px;
text-align: left;
overflow: auto;
}
.btn-group{
position: relative;
display: inline-flex;
vertical-align: middle;
width: 70%;
margin-left: 35px;
margin-top: 10px;
padding: 0px 0px 1px 0px;
}
.btn-breadcrumb .btn {
padding:6px 12px 6px 12px;
}
.btn-breadcrumb .btn:first-child {
padding:6px 6px 6px 10px;
}
.btn-breadcrumb .btn:last-child {
padding:6px 18px 6px 24px;
}
#refresh{
margin-top:1px;
}
}
/*style for devices max width 500*/
@media only screen and (max-width: 500px) {
* {
font-size:12px;
}
#form-container {
padding: 1px 0px 0px -4px;
}
#form-container .breadcrumb-header{
margin: auto;
width: 118%;
text-align: left;
overflow: auto;
}
.panel-body {
padding: 0px;
}
.btn-group{
position: relative;
display: inline-flex;
vertical-align: middle;
width: 80%;
margin-left: 35px;
margin-top: 10px;
padding: 0px 0px 1px 0px;
}
.btn{
font-size: 12px;
}
.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
margin-left: 0px;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
width: 46%;
}
.card-container.card {
width: 295px;
padding: 40px 40px 0px;
}
.btn-breadcrumb .btn {
padding:6px 12px 6px 12px;
}
.btn-breadcrumb .btn:first-child {
padding:6px 6px 6px 10px;
}
.btn-breadcrumb .btn:last-child {
padding:6px 18px 6px 24px;
}
#resetpassword {
margin-left: 5px;
width: 70px;
}
#navButtons{
float: right;
width: 75%;
}
.container {
padding-right: 0px;
padding-left: 0px;
margin-right: auto;
margin-left: auto;
margin-top: -4px;
}
.input-group .form-control{
font-size: 12px;
}
label {
font-size: 12px;
}
.form-control{
font-size: 12px;
}
.select2-results .select2-result-label{
font-size: 12px;
}
.select2-container-multi .select2-choices .select2-search-field input{
font-size:12px;
}
#datetime{
line-height: 34px;
float: left;
margin-top:-30px;
padding: 0 3px 0px 0px;
display: inline-block !important;
width:100px;
}
#date{
position: relative;
display: table;
border-collapse: separate;
}
#timepicker{
line-height: 34px;
float: right;
padding: 0 3px 0px 0px;
margin-top: -65px;
}
.multivalue button{
width: 40px;
}
.row{
margin-left: -34px;
margin-right: -16px;
}
#datetime{
line-height: 34px;
float: left;
margin-top:-30px;
padding: 0 3px 0px 0px;
display: -webkit-inline-box;
}
#datetime input{
width: 105%;
margin-top: 0px;
}
#date{
position: relative;
display: table;
border-collapse: separate;
margin-bottom: -40px;
}
#calendar{
position:absolute;
margin-top: -33px;
margin-left: 99px;
width:40px;
}
#timepicker{
line-height: 34px;
float: right;
padding: 0 3px 0px 0px;
margin-top: -64px;
margin-left: 48px;
}
#captchaButtons {
width: 20%;
margin-left: 114px;
padding-bottom: 5px;
}
#refresh{
margin-top:1px;
}
.container-fluid {
padding-right: 15px;
padding-left: 31px;
margin-right: auto;
margin-left: auto;
width: 86%;
}
}
/*style for devices max width 800) */
@media only screen and (max-width: 800px) {
* {
font-size:12px;
}
#form-container .breadcrumb-header {
width: 97%;
padding: 1px 0px 0px 0px;
text-align: left;
overflow: auto;
}
.panel-body {
padding: 0px;
}
.btn-group{
position: relative;
display: inline-flex;
vertical-align: middle;
width: 80%;
margin-left: 35px;