Skip to content

Instantly share code, notes, and snippets.

@Lachee
Last active December 19, 2023 18:39
Show Gist options
  • Save Lachee/abc3c769206a0d9e07c69c5fe40d2f39 to your computer and use it in GitHub Desktop.
Save Lachee/abc3c769206a0d9e07c69c5fe40d2f39 to your computer and use it in GitHub Desktop.
SASS Mixin for Pride Flags
// Pride Flag Mixin
// Author: Lachee
// License: MIT (do what you want)
@mixin pride-background {
&.lgbt {
background: linear-gradient(180deg, #FE0000 16.66%, #FD8C00 16.66%, 33.32%, #FFE500 33.32%, 49.98%, #119F0B 49.98%, 66.64%, #0644B3 66.64%, 83.3%, #C22EDC 83.3%);
}
&.asexual {
background: linear-gradient(180deg, #181818 25%, #A3A3A3 25%, 50%, #FFFFFF 50%, 75%, #800080 75%);
}
&.bisexual {
background: linear-gradient(180deg, #D60270 40%, #9B4F96 40%, 60%, #0038A8 60%);
}
&.aromantic {
background: linear-gradient(180deg, #39A33E 20%, #A2CF72 20%, 40%, #FFFFFF 40%, 60%, #A3A3A3 60%, 80%, #181818 80%);
}
&.nonbinary {
background: linear-gradient(180deg, #FFF430 25%, #FFFFFF 25%, 50%, #9C59D1 50%, 75%, #181818 75%);
}
&.transgender {
background: linear-gradient(180deg, #5BCEFA 20%, #F5A9B8 20%, 40%, #FFFFFF 40%, 60%, #F5A9B8 60%, 80%, #5BCEFA 80%);
}
&.genderqueer {
background: linear-gradient(180deg, #B57EDC 33.33%, #FFFFFF 33.33%, 66.66%, #4A8123 66.66%);
}
&.genderfluid {
background: linear-gradient(180deg, #FF77A3 20%, #FFFFFF 20%, 40%, #BE18D6 40%, 60%, #181818 60%, 80%, #333EBD 80%);
}
&.pansexual {
background: linear-gradient(180deg, #FF218C 33.33%, #FFD800 33.33%, 66.66%, #21B1FF 66.66%);
}
&.philly {
background: linear-gradient(180deg, #181818 12.5%,
#784F17 12.5%, 25%, #FE0000 25%, 37.5%,
#FD8C00 37.5%, 50%, #FFE500 50%, 62.5%,
#119F0B 62.5%, 75%, #0644B3 75%, 87.5%,
#C22EDC 87.5%);
}
&.polysexual {
background: linear-gradient(180deg, #F61CB9 33.33%, #07D569 33.33%, 66.66%, #1C92F6 66.66%);
}
&.neutrois {
background: linear-gradient(180deg, #FFFFFF 33.33%, #1F9F00 33.33%, 66.66%, #181818 66.66%);
}
&.demigirl {
background: linear-gradient(180deg, #7F7F7F 14.285%,
#C3C3C3 14.285%, 28.57%, #FEAEC9 28.57%, 42.855%,
#FFFFFF 42.855%, 57.14%, #FEAEC9 57.14%, 71.425%,
#C3C3C3 71.425%, 85.71%, #7F7F7F 85.71%);
}
&.agender {
background: linear-gradient(180deg, #181818 14.285%,
#C3C3C3 14.285%, 28.57%, #FFFFFF 28.57%, 42.855%,
#B8F483 42.855%, 57.14%, #FFFFFF 57.14%, 71.425%,
#C3C3C3 71.425%, 85.71%, #181818 85.71%);
}
&.demiboy {
background: linear-gradient(180deg, #7F7F7F 14.285%,
#C3C3C3 14.285%, 28.57%, #9AD9EB 28.57%, 42.855%,
#FFFFFF 42.855%, 57.14%, #9AD9EB 57.14%, 71.425%,
#C3C3C3 71.425%, 85.71%, #7F7F7F 85.71%);
}
&.androgyne {
background: linear-gradient(9180deg, #FE007F 33.33%, #9832FF 33.33%, 66.66%, #00B8E7 66.66%);
}
&.lesbian {
background: linear-gradient(180deg, #A60061 14.285%,
#B95393 14.285%, 28.57%, #D260A7 28.57%, 42.855%,
#EDEDEB 42.855%, 57.14%, #E5ABD0 57.14%, 71.425%,
#C74D52 71.425%, 85.71%, #8C1D00 85.71%);
}
}
// Example Flag Class
// Results look like this: https://i.lu.je/2022/chrome_ytSOFEfHuL.png
.flag {
display: block;
max-width: 100%;
height: 1rem;
background: #ff4d6c;
padding: 10px;
margin-bottom: 0.5rem;
border-radius: 5px;
line-height: 11pt;
font-size: 12pt;
text-align: center;
text-transform: uppercase;
&.sm { font-size: 10pt; }
color: #6f09f5;
text-shadow: -1px 0px 0px #6f09f5,
-2px 1px 0px #73f7ed,
-3px 2px 0px #8eff47,
-4px 3px 0px #fff747,
-5px 4px 0px #ff7a47;
@include pride-background;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment