pyc-website

main website for pyc inc.

git clone https://9o.is/git/pyc-website.git

colorpicker.less

(2167B)


      1 /*!
      2  * Colorpicker for Bootstrap
      3  *
      4  * Copyright 2012 Stefan Petre
      5  * Licensed under the Apache License v2.0
      6  * http://www.apache.org/licenses/LICENSE-2.0
      7  *
      8  */
      9  
     10 .colorpicker-saturation {
     11 	width: 100px;
     12 	height: 100px;
     13 	background-image: url("@{base-url}/saturation.png");
     14 	cursor: crosshair;
     15 	float: left;
     16 	i {
     17 		display: block;
     18 		height: 5px;
     19 		width: 5px;
     20 		border: 1px solid #000;
     21 		//.border-radius();
     22 		position: absolute;
     23 		top: 0;
     24 		left: 0;
     25 		margin: -4px 0 0 -4px;
     26 		b{
     27 			display: block;
     28 			height: 5px;
     29 			width: 5px;
     30 			border: 1px solid #fff;
     31 			//.border-radius();
     32 		}
     33 	}
     34 }
     35 .colorpicker-hue,
     36 .colorpicker-alpha {
     37 	width: 15px;
     38 	height: 100px;
     39 	float: left;
     40 	cursor: row-resize;
     41 	margin-left: 4px;
     42 	margin-bottom: 4px;
     43 	i {
     44 		display: block;
     45 		height: 1px;
     46 		background: #000;
     47 		border-top: 1px solid #fff;
     48 		position: absolute;
     49 		top: 0;
     50 		left: 0;
     51 		width: 100%;
     52 		margin-top: -1px;
     53 	}
     54 }
     55 .colorpicker-hue {
     56 	background-image: url("@{base-url}/hue.png");
     57 }
     58 .colorpicker-alpha {
     59 	background-image: url("@{base-url}/alpha.png");
     60 	display:none;
     61 }
     62 .colorpicker {
     63 	.clearfix();
     64 	top: 0;
     65 	left: 0;
     66 	padding: 4px;
     67 	min-width: 120px;
     68 	margin-top: 1px;
     69 	.border-left-radius(4px);
     70 	.border-right-radius(4px);
     71 	.border-top-radius(4px);
     72 	.border-bottom-radius(4px);
     73 	&:before {
     74 		content: '';
     75 		display: inline-block;
     76 		border-left:   7px solid transparent;
     77 		border-right:  7px solid transparent;
     78 		border-bottom: 7px solid #ccc;
     79 		border-bottom-color: rgba(0,0,0,.2);
     80 		position: absolute;
     81 		top: -7px;
     82 		left: 6px;
     83 	}
     84 	&:after {
     85 		content: '';
     86 		display: inline-block;
     87 		border-left:   6px solid transparent;
     88 		border-right:  6px solid transparent;
     89 		border-bottom: 6px solid #fff;
     90 		position: absolute;
     91 		top: -6px;
     92 		left: 7px;
     93 	}
     94 	div {
     95 		position: relative;
     96 	}
     97 	&.alpha {
     98 		min-width: 140px;
     99 		.colorpicker-alpha {
    100 			display: block;
    101 		}
    102 	}
    103 }
    104 .colorpicker-color {
    105 	height: 10px;
    106 	margin-top: 5px;
    107 	clear: both;
    108 	background-image: url("@{base-url}/alpha.png");
    109 	background-position: 0 100%;
    110 	div {
    111 		height: 10px;
    112 	}
    113 }
    114 .input-append,
    115 .input-prepend {
    116 	&.color {
    117 		.add-on i {
    118 			display: block;
    119 			cursor: pointer;
    120 			width: 16px;
    121 			height: 16px;
    122 		}
    123 	}
    124 }