/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/athina.scss - Synnefo - Greek Research and Technology Network's projects

| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / athina.scss @ f46d245b

History | View | Annotate | Download (5.7 kB)

       // Global Foundation Settings
       @import "settings";
       //$primary-color: #919194; //grey
       //$secondary-color: #ff7bac; //pink
       /* NOT IN USE! styles for selection window (used for vm_list_v1.html) */
       /*
       .vm_options {
       	display: none;
       	border: 1px solid #ff7bac;
       	position: absolute;
       	top: -20%;
       	width: 100%;
       	height: 100%;
       	font-size: 27px;
       	font-weight: bold;
       	text-align: left;
       	background-color: white;
       	line-height: 45px;
       	padding-left: 1em;
       	padding-top: 0.65em;
       	.custom_checkbox {
       		display: inline-block;
       		margin: 0;
       		padding-left: 1em;
       		color: #ff7bac;
+      	}
+      }
       a.option:hover {
       	color: #ff7bac;
+      }
       .vm_container {
       	width: 200px;
       	display: inline-block;
       	height: 187px;
       	position: relative;
+      }
       */
       /* styles for the detailed info of each vm (used for vm_details.html) */
       .graph_container {
       	padding-bottom: 2em;
+      }
       .wrap {
       	position: relative;
+      }
       .section_header {
       	float: left;
       	width:22%;
       	margin-right: 2%;
       	font-weight: bold;
+      }
       .right_side {
       	overflow: hidden;
       	width: 76%;
+      }
       .info_simple {
       	display: inline-block;
       	margin-right: 10px;
+      }
       .action_links {
       	display: inline-block;
       	a {
       		color:  $secondary-color;
       		margin-right: 5px;
       		&:hover {
       		text-decoration: underline;
+      	}
       	span:first-child {
       	margin-right: 5px;
+      }
+      }
+      }
       a.black {
       	color: black;
       	&:hover {
       		color:  $secondary-color;
+      	}
+      }
       .btn_pinkb {
       	width: 11.5em;
       	height: 3.8em;
       	line-height: 3.8em;
       	border: 1px solid  $secondary-color;
       	position: absolute;
       	top: 0;
       	right: 0;
       	a {
       		display: block;
       		padding-left: 1em;
       		&:hover {
       			color:  $secondary-color;
+      		}
       		img {
       			position: absolute;
       			right: 0.6em;
       			top: 0.6em;
       			height: 2.5em;
+      		}
+      	}
+      }
       .row {
       	margin: 0 0 0.4em 0;
+      }
       .middle_side {
       	max-width: 70%;
+      }
       .txt_size {
       	height: 0.8em;
       	vertical-align: baseline;
+      }
        /* styles for network details */
        .big {
        	width: 60%;
+       }
        .small {
        	width: 170px;
+       }
       .wrapper .details .top {
       	padding: 70px 2.5em;
       	.actions ul li {
       		margin: 0 30px;
+      	}
+      }
       .height_up {
       	line-height: 1.3em;
+      }
       .set {
       	margin-bottom: 1em;
+      }
       /* main icon in details page */
       .network {
       	.top .img {
       	background: url("../images/network-green102x116.png") no-repeat center center;
       	width: 102px;
       	height: 116px;
       	display: inline-block;
       	text-indent: -2000px;
       	overflow: hidden;
       	background-size: 100%;
+      	}
       	.close-font{
       		position: absolute;
       		right: 0.8em;
       		top: 2em;
       		font-size: 2em;
       		color: #b3b3b3;
+      	}
+      }
       /* for scroll bar */
       .networks .items-list {
       	.img {
       		background: url("../images/network-green102x116.png") no-repeat center center;
       		height: 58px;
       		width: 51px;
       		display: inline-block;
       		text-indent: -2000px;
       		overflow: hidden;
       		background-size: 80%;
+      	}
       	/* for network list */
       	.container
+      	{
       		.img {
       			background-size: 100%
+      		}
       		.options .wrap a {
       			width: 50%;
+      		}
+      	}
+      }
       /* detailed pages: about the gaps that separate the area with the big img and the buttons from the rest of the page */
       .details .top .actions ul{
       	padding: 1em 1em 0;
       	margin-bottom: 0;
+      }
       .content {
       	position: relative;
       	.overlay-modal {
       		position: absolute;
       		left:0;
       		top:0;
       		width: 100%;
       		height: 100%;
       		z-index:98;
       		background:  $secondary-color;
+      	}
       	.overlay-div {
       		position:absolute; top:20%; left:25%; width:50%;
       		padding:25px;
       		background:white;
       		display:none; z-index:100;
       		.buttons {
       			margin-bottom:0;
       			a {
       				margin-right:20px;
+      			}
+      		}
+      	}
+      }
       .btn4 {
         color: white;
         border-color:  $secondary-color;
         background:  $secondary-color;
         &:hover, .current {
         	color: $secondary-color;
         	border-color:  $secondary-color;
         	background: white;
+        }
+      }
       .overlay .lt-sidebar.nav ul li:hover  {
       	background-color: transparent;
+      }
       .lt-sidebar.nav {
       	font-size: 1em
+      }
       .overlay {
       	.lt-sidebar.nav  {
       	overflow: auto;
+      	}
       	/* styles for close icons (created with fontIcon "snf-font") */
       	.close_char {
       		background: none;
       		text-indent: 0;
       		font-size: 1.8em; /* for the the character e (for d we can put 2em) */
       		color: white;
+      	}
+      }
       /* create network styles */
       .create-network {
       	color: white;
       	.check {
       		color: white;
+      	}
       	p {
       		font-size: 0.8em;
       		font-style: italic;
       		margin: 5px 0 0;
       		width: 545px;
+      	}
       	li {
       		list-style: none outside none;
+      	}
       	.custom_checkbox {
       		font-size: 1.3em;
+      	}
+      }
       .subnet_options {
       	margin: 0;
       	li {
       		margin-bottom: 6px;
       		padding-left: 155px;
+      	}
+      }
       .network_options {
       	position: relative;
       	width: 350px;
       	min-height: 285px;
       	.check {
       		position: absolute;
       		right: 0;
+      	}
       	li {
       		display: block;
       		margin-bottom: 13px;
       		form {
       			margin: 0;
       			input {
       				position: absolute;
       				display: inline-block;
       				right: 0;
       				width: 200px;
       				height: 20px;
       				font-size: 0.9em;
       				&.hidden {
       					display: none;
+      				}
+      			}
+      		}
       		&.manual form input {
       			right: -160px;
       			width: 150px;
+      		}
+      	}
+      }
       span.sub_title {
       	position: absolute;
+      }
       /* pithos: list of uploading files */
       .upload-widget {
       	.files {
       		color: white;
       		li {
       			padding: 10px 120px;
       			border: none;
       			position: relative;
       			.name-col {
       				width: 34%;
+      			}
       			.size-col {
       				text-align: left;
       				float: none;
+      			}
       			.dz-success-mark {
       				margin-left:10px;
+      			}
       			.dz-error-mark {
       				display: none;
+      			}
       			.cancel-col {
       				width: 100px;
       				position: absolute;
       				right: 50px;
       				top: 9px;
       				.cancel span {
       					display: block;
       					text-align: right;
+      				}
+      			}
+      		}
       		div {
       			display: inline-block;
+      		}
       		.progress-bar {
       			position: static;
       			padding: 0;
       			width: 25%;
       			border: none;
       			background-color: transparent;
       			.progress-wrap {
       				width: 100%;
       				margin: 0;
       				.progress {
       					display: block;
       					margin: 0;
       					border: 2px solid white;
       					padding: 0;
       					background-color:  $secondary-color;
       					.meter {
       						background-color: white;
+      					}
+      				}
+      			}
+      		}
+      	}
+      }