Last active
October 16, 2019 19:48
-
-
Save idomitori/5fa76a426b447063b7a230f60aa4ba1a to your computer and use it in GitHub Desktop.
Some useful things that I'm use not really often, but i want to keep it in one place instead of googling them every time i need it.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ref: https://codepen.io/HannahF/pen/wMNVbr */ | |
/* specify the progress cursor of updating elements */ | |
[aria-busy="true"] { | |
cursor: progress; | |
} | |
/* specify the pointer cursor of trigger elements */ | |
[aria-controls] { | |
cursor: pointer; | |
} | |
/* specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */ | |
[aria-disabled] { | |
cursor: default; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Cubic Bezier variations, for more see here: http://easings.net */ | |
:root { | |
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); | |
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); | |
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); | |
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); | |
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); | |
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); | |
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); | |
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); | |
--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); | |
--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); | |
--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); | |
--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); | |
--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); | |
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1); | |
--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Hides controls of default input with type number */ | |
input[type="number"]::-webkit-outer-spin-button, | |
input[type="number"]::-webkit-inner-spin-button { | |
-webkit-appearance: none; | |
margin: 0; | |
} | |
input[type="number"] { | |
-moz-appearance: textfield; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Change styles for selected text */ | |
:root { | |
--text-selection-background: black; | |
--text-selection-background: white; | |
} | |
*::selection { | |
background-color: var(--text-selection-background); | |
color: var(--text-selection-color); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* System fonts that used by default in different OS */ | |
:root { | |
--system-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, | |
Oxygen-Sans, Ubuntu, Cantarell, | |
"Helvetica Neue", Helvetica, Arial, sans-serif; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
--word-wrap { | |
overflow-wrap: break-word; | |
} | |
--ellipsis { | |
overflow: hidden; | |
white-space: nowrap; | |
text-overflow: ellipsis; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment