From 0a6a41a3055ef909e743a9d60f59d905c1596572 Mon Sep 17 00:00:00 2001 From: Udit Jain Date: Thu, 9 Jan 2025 09:37:37 +0530 Subject: [PATCH] Replace deprecated darken with color.adjust for Sass compliance --- css/ion_icon_customization.css | 201 +++++++++++++++++++++++++++++ css/ion_icon_customization.css.map | 1 + css/ion_icon_customization.scss | 66 ++++------ 3 files changed, 229 insertions(+), 39 deletions(-) create mode 100644 css/ion_icon_customization.css create mode 100644 css/ion_icon_customization.css.map diff --git a/css/ion_icon_customization.css b/css/ion_icon_customization.css new file mode 100644 index 00000000..222e95e0 --- /dev/null +++ b/css/ion_icon_customization.css @@ -0,0 +1,201 @@ +.ion-sticky { + top: 50%; + transform: translateY(-50%); + left: 0; + position: fixed; + z-index: 2147483647; +} + +.ion-sticky-icon { + float: left; + display: block; + clear: both; + transition: padding 0.1s ease-out; + margin: 0; + padding: 9px; + color: white; +} +.ion-sticky-icon:hover { + padding-left: 15px; + color: white; +} +.ion-sticky-icon.ion-logo-facebook { + background: #1877f2; + text-indent: 3px; + margin-right: -1.5px; + border-radius: 0 0.25em 0 0; +} +.ion-sticky-icon.ion-logo-facebook:hover { + background: rgb(11.4549180328, 95.1639344262, 203.5450819672); +} +.ion-sticky-icon.ion-logo-github { + background: black; + text-indent: 1.5px; + margin-right: -1.5px; +} +.ion-sticky-icon.ion-logo-github:hover { + background: black; +} +.ion-sticky-icon.ion-logo-X { + background: black; + text-indent: 1px; + margin-right: -1px; +} +.ion-sticky-icon.ion-logo-X:hover { + background: black; +} +.ion-sticky-icon.ion-logo-instagram { + background: linear-gradient(rgba(76, 75, 219, 0.5215686275), transparent), linear-gradient(60deg, #ffff00, #ff00d3, #0e39dc); + text-indent: 2px; + margin-right: -3.5px; + font-size: 2rem; +} +.ion-sticky-icon.ion-logo-instagram:hover { + background: linear-gradient(rgba(41.625, 40.5, 202.5, 0.5215686275), rgba(0, 0, 0, 0)), linear-gradient(60deg, #cccc00, rgb(204, 0, 168.8), rgb(10.9487179487, 44.5769230769, 172.0512820513)); +} +.ion-sticky-icon.ion-logo-youtube { + background: red; + border-radius: 0 0 0.25em 0; +} +.ion-sticky-icon.ion-logo-youtube:hover { + background: #cc0000; +} +.ion-sticky-icon.ion-logo-mastodon { + background: #3088d4; + text-indent: 1px; + margin-right: -1px; +} +.ion-sticky-icon.ion-logo-mastodon:hover { + background: rgb(35.948, 109.516, 173.052); +} +.ion-sticky-icon.ion-logo-linkedin { + background: #0077b5; + text-indent: 1px; + margin-right: -1px; +} +.ion-sticky-icon.ion-logo-linkedin:hover { + background: rgb(0, 85.4696132597, 130); +} +.ion-sticky-icon.ion-logo-medium { + background: black; + text-indent: 1.5px; + margin-right: -1.5px; +} +.ion-sticky-icon.ion-logo-medium:hover { + background: black; +} + +.ion-icon { + padding: 1px 4px; + margin: 0.5rem; + display: inline-block; + border-radius: 50%; +} +.ion-icon.ion-logo-facebook { + color: white; + border: 1px solid #1877f2; + padding: 0.3rem 1rem; + background-color: #1877f2; + font-size: 2rem; + height: 3rem; + width: 3rem; + display: flex; + align-items: center; + justify-content: center; +} +.ion-icon.ion-logo-facebook:hover { + color: rgb(229.5, 229.5, 229.5); +} +.ion-icon.ion-logo-github { + color: white; + font-size: 3rem; + display: flex; + justify-content: center; + align-items: center; +} +.ion-icon.ion-logo-github:hover { + color: rgb(229.5, 229.5, 229.5); +} +.ion-icon.ion-logo-X { + color: white; + border: 1px solid black; + background-color: black; + font-size: 1.5rem; + height: 3rem; + width: 3rem; + display: flex; + align-items: center; + justify-content: center; +} +.ion-icon.ion-logo-X:hover { + color: rgb(229.5, 229.5, 229.5); +} +.ion-icon.ion-logo-instagram { + color: white; + background: linear-gradient(rgba(76, 75, 219, 0.5215686275), transparent), linear-gradient(60deg, #ffff00, #ff00d3, #0e39dc); + font-size: 2rem; + height: 3rem; + width: 3rem; + display: flex; + align-items: center; + justify-content: center; +} +.ion-icon.ion-logo-instagram:hover { + color: #d9a1f1; +} +.ion-icon.ion-logo-youtube { + color: white; + background-color: red; + font-size: 1.5rem; + height: 3rem; + width: 3rem; + display: flex; + align-items: center; + justify-content: center; +} +.ion-icon.ion-logo-youtube:hover { + color: rgb(229.5, 229.5, 229.5); +} +.ion-icon.ion-logo-mastodon { + color: white; + border: 1px solid #3088d4; + padding: 0.3rem 1rem; + background-color: #3088d4; + font-size: 2rem; + height: 3rem; + width: 3rem; + display: flex; + align-items: center; + justify-content: center; +} +.ion-icon.ion-logo-mastodon:hover { + color: rgb(229.5, 229.5, 229.5); +} +.ion-icon.ion-logo-linkedin { + color: white; + border: 1px solid #0077b5; + background-color: #0077b5; + font-size: 2rem; + height: 3rem; + width: 3rem; + display: flex; + align-items: center; + justify-content: center; +} +.ion-icon.ion-logo-linkedin:hover { + color: rgb(229.5, 229.5, 229.5); +} +.ion-icon.ion-logo-medium { + color: white; + font-size: 3rem; + height: 3rem; + width: 3rem; + display: flex; + align-items: center; + justify-content: center; +} +.ion-icon.ion-logo-medium:hover { + color: rgb(229.5, 229.5, 229.5); +} + +/*# sourceMappingURL=ion_icon_customization.css.map */ diff --git a/css/ion_icon_customization.css.map b/css/ion_icon_customization.css.map new file mode 100644 index 00000000..181641e8 --- /dev/null +++ b/css/ion_icon_customization.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["ion_icon_customization.scss"],"names":[],"mappings":"AAsDA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIA;EACE,YArEgB;EAsEhB;EACA;EACA;;AAEA;EACE,YA1EoB;;AA8ExB;EACE,YA1Ec;EA2Ed;EACA;;AAEA;EACE,YA/EY;;AAmFhB;EACE,YA9ES;EA+ET;EACA;;AAEA;EACE,YAlFa;;AAsFjB;EACE,YAlFiB;EAmFjB;EACA;EACA;;AAEA;EACE,YAvFqB;;AA2FzB;EACE,YAvFe;EAwFf;;AAEA;EACE,YA1FmB;;AA8FvB;EACE,YA1FgB;EA2FhB;EACA;;AAEA;EACE,YA9FoB;;AAkGxB;EACE,YA9FgB;EA+FhB;EACA;;AAEA;EACE,YAlGoB;;AAsGxB;EACE,YAlGc;EAmGd;EACA;;AAEA;EACE,YAtGkB;;;AA4G1B;EACE;EACA;EACA;EACA;;AAGE;EACE,OAjKW;EAkKX;EACA;EACA,kBAlKgB;EAmKhB;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,OA5Ke;;AAgLnB;EACE,OA5KS;EA6KT;EACA;EACA;EACA;;AAEA;EACE,OAlLa;;AAsLjB;EACE,OAlLI;EAmLJ;EACA,kBAlLS;EAmLT;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,OA5LQ;;AAgMZ;EACE,OA5LY;EA6LZ,YA3LiB;EA4LjB;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,OArMgB;;AAyMpB;EACE,OArMU;EAsMV,kBApMe;EAqMf;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,OA9Mc;;AAkNlB;EACE,OA9MW;EA+MX;EACA;EACA,kBA/MgB;EAgNhB;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,OAzNe;;AA6NnB;EACE,OAzNW;EA0NX;EACA,kBAzNgB;EA0NhB;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,OAnOe;;AAuOnB;EACE,OAnOS;EAoOT;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,OA3Oa","file":"ion_icon_customization.css"} \ No newline at end of file diff --git a/css/ion_icon_customization.scss b/css/ion_icon_customization.scss index 2d1249bb..5682bd5c 100644 --- a/css/ion_icon_customization.scss +++ b/css/ion_icon_customization.scss @@ -1,5 +1,3 @@ ---- ---- // Colors to use with ion icons // Somewhat based off Social Share Kit - https://github.com/darklow/social-share-kit/blob/master/dist/css/social-share-kit.css @@ -8,60 +6,55 @@ $darken-percent: 10%; // Facebook colors $facebook-color: white; -$facebook-color-hover: darken($facebook-color, $darken-percent); +$facebook-color-hover: color.adjust($facebook-color, $darken-percent); $facebook-background: #1877f2; -$facebook-background-hover: darken($facebook-background, $darken-percent); +$facebook-background-hover: color.adjust($facebook-background, $darken-percent); // Github colors $github-color: white; -$github-color-hover: darken($github-color, $darken-percent); +$github-color-hover: color.adjust($github-color, $darken-percent); $github-background: black; -$github-background-hover: darken($github-background, $darken-percent); +$github-background-hover: color.adjust($github-background, $darken-percent); // X colors $X-color: white; -$X-color-hover: darken($X-color, $darken-percent); +$X-color-hover: color.adjust($X-color, $darken-percent); $X-background: black; -$X-background-hover: darken($X-background, $darken-percent); +$X-background-hover: color.adjust($X-background, $darken-percent); // Instagram colors -// Instagram uses the background on both for both sticky and non sticky icons $instagram-color: white; $instagram-color-hover: #d9a1f1; $instagram-background: linear-gradient(#4c4bdb85, transparent), linear-gradient(60deg, #ffff00, #ff00d3, #0e39dc); -$instagram-background-hover: linear-gradient(darken(#4c4bdb85, $darken-percent), darken(transparent, $darken-percent)), linear-gradient(60deg, darken(#ffff00, $darken-percent), darken(#ff00d3, $darken-percent), darken(#0e39dc, $darken-percent)); +$instagram-background-hover: linear-gradient(color.adjust(#4c4bdb85, $darken-percent), color.adjust(transparent, $darken-percent)), linear-gradient(60deg, color.adjust(#ffff00, $darken-percent), darken(#ff00d3, $darken-percent), color.adjust(#0e39dc, $darken-percent)); // Youtube colors $youtube-color: white; -$youtube-color-hover: darken($youtube-color, $darken-percent); +$youtube-color-hover: color.adjust($youtube-color, $darken-percent); $youtube-background: red; -$youtube-background-hover: darken($youtube-background, $darken-percent); +$youtube-background-hover: color.adjust($youtube-background, $darken-percent); // Mastodon colors $mastodon-color: white; -$mastodon-color-hover: darken($mastodon-color, $darken-percent); +$mastodon-color-hover: color.adjust($mastodon-color, $darken-percent); $mastodon-background: #3088d4; -$mastodon-background-hover: darken($mastodon-background, $darken-percent); +$mastodon-background-hover: color.adjust($mastodon-background, $darken-percent); // LinkedIn colors $linkedin-color: white; -$linkedin-color-hover: darken($linkedin-color, $darken-percent); +$linkedin-color-hover: color.adjust($linkedin-color, $darken-percent); $linkedin-background: #0077b5; -$linkedin-background-hover: darken($linkedin-background, $darken-percent); +$linkedin-background-hover: color.adjust($linkedin-background, $darken-percent); // Medium colors $medium-color: white; -$medium-color-hover: darken($medium-color, $darken-percent); +$medium-color-hover: color.adjust($medium-color, $darken-percent); $medium-background: black; -$medium-background-hover: darken($medium-background, $darken-percent); +$medium-background-hover: color.adjust($medium-background, $darken-percent); .ion-sticky { top: 50%; transform: translateY(-50%); - -webkit-transform: translateY(-50%); - -moz-transform: translateY(-50%); - -ms-transform: translateY(-50%); - -o-transform: translateY(-50%); left: 0; position: fixed; z-index: 2147483647; @@ -72,10 +65,6 @@ $medium-background-hover: darken($medium-background, $darken-percent); display: block; clear: both; transition: padding 0.1s ease-out; - -webkit-transition: padding 0.1s ease-out; - -moz-transition: padding 0.1s ease-out; - -ms-transition: padding 0.1s ease-out; - -o-transition: padding 0.1s ease-out; margin: 0; padding: 9px; color: white; @@ -106,7 +95,7 @@ $medium-background-hover: darken($medium-background, $darken-percent); background: $github-background; } } - + &X { background: $X-background; text-indent: 1px; @@ -116,7 +105,7 @@ $medium-background-hover: darken($medium-background, $darken-percent); background: $X-background-hover; } } - + &instagram { background: $instagram-background; text-indent: 2px; @@ -127,7 +116,7 @@ $medium-background-hover: darken($medium-background, $darken-percent); background: $instagram-background-hover; } } - + &youtube { background: $youtube-background; border-radius: 0 0 0.25em 0; @@ -199,12 +188,12 @@ $medium-background-hover: darken($medium-background, $darken-percent); display: flex; justify-content: center; align-items: center; - + &:hover { color: $github-color-hover; } } - + &X { color: $X-color; border: 1px solid $X-background; @@ -215,14 +204,13 @@ $medium-background-hover: darken($medium-background, $darken-percent); display: flex; align-items: center; justify-content: center; - + &:hover { color: $X-color-hover; } } - + &instagram { - // Instagram uses background color color: $instagram-color; background: $instagram-background; font-size: 2rem; @@ -231,12 +219,12 @@ $medium-background-hover: darken($medium-background, $darken-percent); display: flex; align-items: center; justify-content: center; - + &:hover { color: $instagram-color-hover; } } - + &youtube { color: $youtube-color; background-color: $youtube-background; @@ -288,8 +276,8 @@ $medium-background-hover: darken($medium-background, $darken-percent); &medium { color: $medium-color; font-size: 3rem; - height: 3rem; - width: 3rem; + height: 3rem; + width: 3rem; display: flex; align-items: center; justify-content: center; @@ -299,4 +287,4 @@ $medium-background-hover: darken($medium-background, $darken-percent); } } } -} +} \ No newline at end of file