sections.waypoint.example-dialControls.xhtml Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of primefaces-extensions-showcase Show documentation
There is a newer version: 1.1.0.6-jre15
Show newest version




    
   		Font Size:
   		
   			8px
   			10px
   			12px
   			14px
   			16px
   			18px
   			24px
   			36px
   			48px
   			72px
   		
   		
   	
   	
   		Width:
   		
   			150px
   			200px
   			250px
   			300px
   			350px
   			400px
   			500px
   			600px
   			700px
   			800px
   			1024px
   			1280px
   		
   		
   	
   	
   		BG Color:
   		
   			#fff
   			#d1f2a5
   			#effab4
   			#ffc48c
   			#ff9f80
   			#f56991
   		
   		
   	

    

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit ultrices rutrum. Cras dignissim purus non purus
    mattis nec lobortis enim dignissim. Nulla a urna est. Proin volutpat odio id velit tempor sollicitudin. Aliquam lobortis
    nunc gravida orci fringilla in commodo lectus gravida. In hac habitasse platea dictumst. Maecenas tincidunt pulvinar
    blandit. Suspendisse a diam ligula. Mauris non tellus nisl, in interdum elit. Etiam rhoncus cursus lectus vel venenatis.
    Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer
    eleifend imperdiet lectus vitae aliquet. Mauris metus lorem, fermentum vitae malesuada quis, pretium id mi.
    


    

    

/*  */



    #wrapper {
    	width: 460px;
    	margin: 0 auto 0 auto;
    	overflow: hidden;
    }
    
    .dial {
    	float: left;
    	width: 140px;
    	margin-left: 20px;
    	position: relative;
    }
    
    .dial.first {
    	margin-left: 0;
    }
    
    .dial h2 {
    	font-weight: bold;
    }
    
    .dial ul {
    	background: #fff;
    	border: 1px solid #bbb;
    	padding: 25px 0 114px 0;
    	height: 1px;
    	overflow-y: scroll;
        margin: 0;
    }
    
    .dial ul:before {
    	content: "";
    	border: 10px solid #555;
    	width: 1px;
    	height: 1px;
    	display: block;
    	position: absolute;
    	bottom: 105px;
    	left: 0;
    	z-index: 3;
    	border-top-color: transparent;
    	border-right-color: transparent;
    	border-bottom-color: transparent;
    }
    
    .dial li {
    	height: 20px;
    	line-height: 20px;
    	padding: 10px 10px 10px 20px;
    	border-bottom: 1px solid #ddd;
    	font-size: 20px;
        margin: 0;
    }
    
    .dial li:first-child {
    	border-top: 1px solid #ddd;
    }
    
    li[data-value="#fff"] {
    	background: #fff;
    }
    li[data-value="#d1f2a5"] {
    	background: #d1f2a5;
    }
    li[data-value="#effab4"] {
    	background: #effab4;
    }
    li[data-value="#ffc48c"] {
    	background: #ffc48c;
    }
    li[data-value="#ff9f80"] {
    	background: #ff9f80;
    }
    li[data-value="#f56991"] {
    	background: #f56991;
    }
    
    .indicator {
    	position: absolute;
    	bottom: 115px;
    	left: 0;
    	height: 1px;
    	width: 120px;
    	background: red;
    }
    
    #textContainer {
    	font-size: 8px;
    	line-height: 1.5;
    	width: 150px;
    	background: #fff;
    	border: 1px solid #ccc;
    	margin: 15px auto auto auto;
    	padding: 10px;
    	-webkit-transition: all 500ms ease-in-out;
    	-moz-transition: all 500ms ease-in-out;
    	-ms-transition: all 500ms ease-in-out;
    	transition: all 500ms ease-in-out;
    }