mirror of
https://github.com/konpa/devicon.git
synced 2025-01-17 21:48:28 +01:00
Add styling for color picker
This commit is contained in:
Thomas Bui
parent
d08971df1a
commit
cbb38dc2cc
@ -2,6 +2,13 @@
|
||||
@import '//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css';
|
||||
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
|
||||
@import url(https://fonts.googleapis.com/css?family=Damion);
|
||||
:root {
|
||||
--primaryColor: #60be86;
|
||||
--primaryColorDark: #2D804E;
|
||||
--primaryColorLight: #65d693;
|
||||
--grey: #4c6857;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box; }
|
||||
|
||||
@ -17,71 +24,6 @@ html {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.icon-brush:before {
|
||||
content: "\e600"; }
|
||||
|
||||
.icon-type:before {
|
||||
content: "\e601"; }
|
||||
|
||||
.icon-github:before {
|
||||
content: "\e602"; }
|
||||
|
||||
.icon-github2:before {
|
||||
content: "\e603"; }
|
||||
|
||||
.icon-bucket:before {
|
||||
content: "\e605"; }
|
||||
|
||||
.icon-github3:before {
|
||||
content: "\e604"; }
|
||||
|
||||
.icon-bucket2:before {
|
||||
content: "\e606"; }
|
||||
|
||||
/* Cachons la case à cocher */
|
||||
[type="checkbox"]:not(:checked),
|
||||
[type="checkbox"]:checked {
|
||||
position: absolute;
|
||||
left: -9999px; }
|
||||
|
||||
/* on prépare le label */
|
||||
[type="checkbox"]:not(:checked) + label,
|
||||
[type="checkbox"]:checked + label {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: inline-block;
|
||||
padding: 0.71429rem 1.07143rem;
|
||||
margin-left: 0.35714rem;
|
||||
font-family: "Lato", Calibri, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
color: #60be86;
|
||||
background: #4f755e;
|
||||
box-shadow: 0px 6px 0px #4a5c51;
|
||||
border-radius: 5px; }
|
||||
|
||||
/* Aspect si "cochée" */
|
||||
[type="checkbox"]:checked + label {
|
||||
top: 6px;
|
||||
box-shadow: 0px 0px 0px #4a5c51; }
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: inline-block;
|
||||
padding: 0.71429rem 1.07143rem;
|
||||
margin: 0 0.71429rem;
|
||||
font-family: "Lato", Calibri, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
color: #60be86;
|
||||
background: #4c6857;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 6px 0px #4a5c51; }
|
||||
.button:active {
|
||||
top: 6px;
|
||||
box-shadow: 0px 0px 0px #4a5c51; }
|
||||
|
||||
/* General Blueprint Style */
|
||||
*,
|
||||
*:after,
|
||||
@ -105,12 +47,11 @@ html {
|
||||
clear: both; }
|
||||
|
||||
body {
|
||||
color: #47a3da;
|
||||
font-family: 'Lato', Calibri, Arial, sans-serif; }
|
||||
|
||||
a {
|
||||
color: #f0f0f0;
|
||||
text-decoration: none; }
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #000; }
|
||||
@ -137,7 +78,7 @@ a:hover {
|
||||
.cbp-ig-grid li > span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
color: #60be86;
|
||||
color: var(--primaryColor);
|
||||
-webkit-transition: background 0.2s;
|
||||
-moz-transition: background 0.2s;
|
||||
transition: background 0.2s;
|
||||
@ -173,7 +114,7 @@ a:hover {
|
||||
.cbp-ig-grid .cbp-ig-title:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: #60be86;
|
||||
background: var(--primaryColor);
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
top: 0;
|
||||
@ -184,7 +125,7 @@ a:hover {
|
||||
transition: margin-top 0.2s; }
|
||||
|
||||
.cbp-ig-grid li > span:hover {
|
||||
background: #60be86; }
|
||||
background: var(--primaryColor); }
|
||||
|
||||
.cbp-ig-grid li > span:hover .cbp-ig-icon {
|
||||
-webkit-transform: translateY(10px);
|
||||
@ -252,7 +193,7 @@ header {
|
||||
padding: 0 2rem;
|
||||
width: 480px;
|
||||
color: whitesmoke;
|
||||
background: #60be86; }
|
||||
background: var(--primaryColor); }
|
||||
header > h1,
|
||||
header > h3 {
|
||||
font-weight: 400;
|
||||
@ -278,12 +219,13 @@ header {
|
||||
font-size: 3rem; }
|
||||
header .download a {
|
||||
padding: 1.3rem 1.8rem;
|
||||
border: 6px solid #60be86;
|
||||
color: #60be86;
|
||||
background: whitesmoke; }
|
||||
border: 6px solid var(--primaryColor);
|
||||
color: var(--primaryColor);
|
||||
background: whitesmoke;
|
||||
text-decoration: none;}
|
||||
header .download a:hover {
|
||||
border-color: whitesmoke;
|
||||
color: #60be86; }
|
||||
color: var(--primaryColor); }
|
||||
header > h3 {
|
||||
margin: 4rem 0 0;
|
||||
font-size: 3rem;
|
||||
@ -316,9 +258,9 @@ header {
|
||||
margin: .5rem .3rem;
|
||||
padding: .4rem;
|
||||
cursor: pointer;
|
||||
border: 5px solid #60be86; }
|
||||
border: 5px solid var(--primaryColor); }
|
||||
header .icons-list li:hover {
|
||||
border: 5px solid #65d693;
|
||||
border: 5px solid var(--primaryColorLight);
|
||||
border-radius: 5px; }
|
||||
header .icons-list li:hover::before {
|
||||
content: ' ';
|
||||
@ -330,9 +272,9 @@ header {
|
||||
height: 0px;
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-top: 15px solid #65d693; }
|
||||
border-top: 15px solid var(--primaryColorLight); }
|
||||
header .icons-list li.selected-version {
|
||||
border: 5px solid #65d693;
|
||||
border: 5px solid var(--primaryColorLight);
|
||||
border-radius: 5px; }
|
||||
header .icons-list li.selected-version::before {
|
||||
position: absolute;
|
||||
@ -341,7 +283,7 @@ header {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 15px solid #65d693;
|
||||
border-top: 15px solid var(--primaryColorLight);
|
||||
border-right: 15px solid transparent;
|
||||
border-left: 15px solid transparent;
|
||||
content: ' '; }
|
||||
@ -351,12 +293,51 @@ header {
|
||||
max-width: 100%; }
|
||||
|
||||
|
||||
/** color picker */
|
||||
.colorPicker {
|
||||
height: 0.8em;
|
||||
width: 0.8em;
|
||||
}
|
||||
|
||||
.colorPickerMenu {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
background-color: var(--primaryColor);
|
||||
border-radius: 1em;
|
||||
border: 2px solid var(--grey);
|
||||
transform: translate(0, -30%);
|
||||
padding: 0.5em;
|
||||
margin-left: 1em;
|
||||
font-weight: normal;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.colorPickerResetBtn {
|
||||
margin: auto;
|
||||
margin-top: 0.5em;
|
||||
display: block;
|
||||
width: min-content;
|
||||
background-color: var(--primaryColor);
|
||||
border-radius: 1em;
|
||||
border: 1px solid var(--grey);
|
||||
}
|
||||
|
||||
.checkerboardInput {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
position: relative;
|
||||
top: 0.2em;
|
||||
}
|
||||
|
||||
input[type='color'] {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-left: 0.5em;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/** Copy Btn */
|
||||
|
||||
.copyBtn {
|
||||
height: 1.25em;
|
||||
width: 1.25em;
|
||||
@ -371,12 +352,12 @@ input[type='color'] {
|
||||
|
||||
.copyBtn:hover {
|
||||
cursor: pointer;
|
||||
background-color: #2D804E;
|
||||
background-color: var(--primaryColorDark);
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
visibility: hidden;
|
||||
background-color: #2D804E;
|
||||
background-color: var(--primaryColorDark);
|
||||
border-radius: 0.25em;
|
||||
padding: 0.25em;
|
||||
}
|
||||
@ -388,7 +369,7 @@ input[type='color'] {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
border: 8px solid #60be86; }
|
||||
border: 8px solid var(--primaryColor); }
|
||||
|
||||
.main {
|
||||
margin: 0 0 0 480px; }
|
||||
@ -400,32 +381,34 @@ input[type='color'] {
|
||||
margin: 4rem;
|
||||
padding: .5rem 1rem;
|
||||
border: 0;
|
||||
border-bottom: 2px solid #60be86;
|
||||
color: #60be86;
|
||||
border-bottom: 2px solid var(--primaryColor);
|
||||
color: var(--primaryColor);
|
||||
background: none;
|
||||
font-size: 1.2rem;
|
||||
text-align: center; }
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #60be86; }
|
||||
color: var(--primaryColor); }
|
||||
|
||||
:-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
color: #60be86; }
|
||||
color: var(--primaryColor); }
|
||||
|
||||
::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
color: #60be86; }
|
||||
color: var(--primaryColor); }
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #60be86; }
|
||||
color: var(--primaryColor); }
|
||||
|
||||
/* Code related CSS */
|
||||
|
||||
.cde {
|
||||
white-space: nowrap;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
color: #4c6857;
|
||||
background: #65d693;
|
||||
color: var(--grey);
|
||||
background: var(--primaryColorLight);
|
||||
font-size: .9rem;
|
||||
font-family: courier;
|
||||
overflow: auto; }
|
||||
@ -434,7 +417,7 @@ input[type='color'] {
|
||||
padding: 0 0 0 .5rem; }
|
||||
|
||||
.cde-com {
|
||||
color: #4c6857;
|
||||
color: var(--grey);
|
||||
opacity: .5; }
|
||||
|
||||
.footer {
|
||||
|
||||
BIN
docs/assets/img/color_wheel.png
Normal file
BIN
docs/assets/img/color_wheel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
@ -61,7 +61,23 @@
|
||||
<h5>First select an icon on the right, then select the version below and copy/paste the code into your project.</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<h4>Font versions <input type='color' value='#60be86' ng-model="fontBackground"></h4>
|
||||
<h4>
|
||||
Font versions
|
||||
<img src="./assets/img/color_wheel.png" class='colorPicker'>
|
||||
<span class='colorPickerMenu'>
|
||||
<span>
|
||||
<input type='color' value='#60be86' ng-model="fontBackground">
|
||||
Background Color
|
||||
</span>
|
||||
<br>
|
||||
<span>
|
||||
<input type='checkbox' id='checkboardInput' class='checkerboardInput'>
|
||||
<label for='checkboardInput' >Checkerboard</label>
|
||||
</span>
|
||||
<br>
|
||||
<button class='colorPickerResetBtn'>Reset</button>
|
||||
</span>
|
||||
</h4>
|
||||
<p>
|
||||
Place this in your header (once per HTML file)
|
||||
<span>
|
||||
@ -152,7 +168,7 @@
|
||||
supported by various <a href="https://github.com/devicons/devicon/graphs/contributors">contributors</a>.<br />
|
||||
Copyright © 2015 <a href="https://github.com/konpa">Konpa</a><br />
|
||||
<br />
|
||||
Final font build with <a href="https://icomoon.io/">Icomoon app</a><br />
|
||||
Final font build with <a href="https://icomoon.io/">Icomoon</a><br />
|
||||
<br />
|
||||
<i>All product names, logos, and brandsare property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement.</i>
|
||||
</p>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user