Skip to content

Commit

Permalink
Add styling for color picker
Browse files Browse the repository at this point in the history
  • Loading branch information
@Thomas-Boi
Thomas-Boi committed Dec 21, 2021
1 parent d08971d commit cbb38dc
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 95 deletions.
169 changes: 76 additions & 93 deletions docs/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }

Expand All @@ -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,
Expand All @@ -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; }
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -252,7 +193,7 @@ header {
padding: 0 2rem;
width: 480px;
color: whitesmoke;
background: #60be86; }
background: var(--primaryColor); }
header > h1,
header > h3 {
font-weight: 400;
Expand All @@ -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;
Expand Down Expand Up @@ -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: ' ';
Expand All @@ -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;
Expand All @@ -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: ' '; }
Expand All @@ -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;
Expand All @@ -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;
}
Expand All @@ -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; }
Expand All @@ -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; }
Expand All @@ -434,7 +417,7 @@ input[type='color'] {
padding: 0 0 0 .5rem; }

.cde-com {
color: #4c6857;
color: var(--grey);
opacity: .5; }

.footer {
Expand Down
Binary file added docs/assets/img/color_wheel.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 18 additions & 2 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,23 @@ <h3>(Super) Quick Setup</h3>
<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>
Expand Down Expand Up @@ -152,7 +168,7 @@ <h5>If you prefer a local install, you can download all the files on the GitHub
supported by various <a href="https://github.com/devicons/devicon/graphs/contributors">contributors</a>.<br />
Copyright &copy; 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>
Expand Down

0 comments on commit cbb38dc

Please sign in to comment.