Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(v0.1.7): update kryeion css reset styles #2

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

chore(v0.1.7): update kryeion css reset styles #2

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
51e38b8
Update kryeion.css
isocroft Dec 26, 2023
e9a68d3
chore: update units from px to rem
isocroft Jan 1, 2024
d08b67f
Update kryeion.css
isocroft Jul 22, 2024
47673cc
Update kryeion.css
isocroft Jul 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update kryeion.css
  • Loading branch information
@isocroft
isocroft authored Jul 22, 2024
commit d08b67f4dcd000c4d98663461b753ef42534a8e8
159 changes: 75 additions & 84 deletions src/kryeion.css
View file
Original file line number Diff line number Diff line change
@@ -2,9 +2,9 @@


/**!
* @version: v0.1.7
* @version: v0.1.8
* @name: Kryeion (https://github.com/isocroft/Kryeion)
* @copyright: Copyright (c) 2017 - 2024, Stitch - Oparand Ltd.
* @copyright: Copyright (c) 2017 - 2024, Coolcodes.
*
* @license: MIT (https://github.com/iscroft/Kryeion/blob/master/LICENSE)
*
@@ -16,19 +16,12 @@

/* ==== CUSTOM SETUPS [SETTINGS] ==== */

@supports (height: 100vh) {
.expand-fill-vertical {
height: 100vh;
height: 100svh;
height: 100dvh;
}
}

@supports not (height:100vh) {
.expand-fill-vertical {
height:100%;
}
}
.expand-fill-vertical {
height:100%;
height: 100vh;
height: 100svh;
height: 100dvh;
}

/* ===== CUSTOM RESET CSS [GENERICS] ===== */

@@ -82,12 +75,12 @@
select,
textarea {
font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", system-ui, sans-serif;
color: #000000;
color: var(--resetGlobalFgColor);
}

:focus,
:focus-visible {
outline: 0.05cm dotted #CBCBCB;
outline: var(--resetOutline);
}

/** Old IE Fixes **/
@@ -115,9 +108,14 @@

/* Lists */

/**** Remove list styles (bullets/numbers) */
ol, ul, menu {
list-style: none;
margin: 0;
}


[role] ol, [role] ul, [role] menu {
/**** Remove list styles (bullets/numbers) */
list-style: none;
}

/** Links **/
@@ -126,11 +124,6 @@
text-decoration: none;
}

a:focus,
a:focus-visible {
outline: thin dotted;
}

a:hover,
a:active {
outline: thin solid;
@@ -179,24 +172,24 @@

ins,
.ins {
background: #FFFF99;
color: #000000;
background-color: var(--resetInsBgColor);
color: var(--resetGlobalFgColor);
text-decoration: none;
}

mark,
.mark {
background: #FFFF00;
color: #000;
background-color: var(--resetMarkBgColor);
color: var(--resetGlobalFgColor);
font-style: italic;
}

hr {
display: block;
height: 1px;
height: var(--resetDefaultBoxDimension);
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
border-top: var(--resetHrTopBorder);
margin: var(--resetHrMargin);
padding: 0;
}

@@ -207,8 +200,8 @@
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: auto;
font-family: monospace, serif;
*font-family: 'Courier New'; /* supporting IE 6 / 7 */
font-size: 1em;
*font-family: var(--resetFontFamilyIE); /* supporting IE 6 / 7 */
font-size: var(--resetDefaultFontSize);
}

pre {
@@ -231,21 +224,17 @@
content: none;
}

ul, ol {
margin: 0;
padding: 0;
}

/* Normalizations */
/* Take care of Safari screen reader as well */

html,
body,
div,
p,
ol,
ul,
li,
dl,
ul[role="list"],
ol[role="list"],
dt,
dd,
blockquote,
@@ -270,7 +259,8 @@
/* Avoid text overflows */
h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
word-wrap: break-word;
white-space: pre-wrap;
word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, a {
@@ -310,16 +300,12 @@
text-align: left;
}

nav ul,
div ul,
aside ul,
nav ol,
[class*="widget"] ol,
[class*="widget"] ul,
form ul,
form ol,
fieldset ol,
fieldset ul {
nav > ul,
aside ul,
nav > ol,
[class] ol,
[class] ul,
form > ul {
list-style-image: none;
}

@@ -342,7 +328,7 @@
}

sub {
bottom: -0.25em;
bottom: var(--resetSubBottomOffsetStatic);
bottom: 1ex;
}

@@ -354,7 +340,7 @@

legend {
border: 0;
*margin-left: -0.438rem;
*margin-left: var(--resetLegendLeftOffsetStatic);
}

button, input, select, textarea {
@@ -400,12 +386,12 @@
*vertical-align: middle;
}

span.combo-box {
span[data-combobox] {
display:inline-block;
padding: 0 0.875rem 0.063rem 0;
padding: var(--utilityComboPadding);
margin:0;
position:relative;
border: 0.063rem solid #bdbdbd;
border: var(--utilityComboBorder);
}

/* IE 10+ only */
@@ -414,58 +400,61 @@
display: none;
}

span.combo-box select > option {
background-color:#a4a4a4;
color:#ffffff;
span[data-combobox] select > option {
background-color: var(--utilityComboBgColor);
color: var(--utilityComboFgColor);
}

span.combo-box > select {
span[data-combobox] > select {
display: inline-block;
position: absolute;
top: 0.188rem;
top: var(--utilityComboTopOffsetAbsolute);
left: 0;
border: none;
width: 100%;
-moz-apperance: -moz-none;
-webkit-appearance: none;
text-indent: 0.063rem; /* Firefox 30- */
text-overflow: clip;
-o-text-overflow: clip;
appearance: none;
opacity: 0;
}

span.combo-box[dimed]{
.yes-moz span[data-combobox] > select {
text-indent: var(--utilityComboTextIndent); /* Firefox 30- */
}

span[data-combobox][dimed]{
min-width: 3.75rem;
}

span.combo-box::before,
span.combo-box::after {
span[data-combobox]::before,
span[data-combobox]::after {
display: inline-block;
position: relative;
float: left;
}

span.combo-box::before {
text-indent: 0.375rem;
span[data-combobox]::before {
text-indent: var(--utilityComboBeforePseudoTextIndent);
pointer-events: none;
color: #A424BA;
color: var(--utilityComboBeforePseudoFgColor);
content: attr(placeholder) " ";
}

span.combo-box::after {
span[data-combobox]::after {
content: "\25bc";
width: 0.125rem;
width: var(--utilityComboAfterPseudoBoxDimension);
font-size: 60%;
height: 0.125rem;
height: var(--utilityComboAfterPseudoBoxDimension);
top: 0.313rem;
margin-left: 0.5rem;
pointer-events: none;
}

@supports (white-space: revert) {
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
.yes-safari textarea {
white-space: revert;
}
}
@@ -494,8 +483,8 @@
input[type="password"]:invalid,
input[type="text"]:invalid,
input[type="email"]:invalid {
border: 0.063rem solid #F2000B;
color: #F2000B;
border: var(--resetFormElementBorderColor);
color: var(--resetFormElementFgColor);
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
@@ -525,21 +514,23 @@

.yes-moz button::-moz-focus-inner,
.yes-moz input::-moz-focus-inner {
border: 0;
padding: 0;
border: 0;
padding: 0;
}

[aria-os-data="Macintosh"] input,
[aria-os-data="Macintosh"] textarea {
-webkit-text-stroke-width: 0.013rem;
[aria-os-data="MacIntel"] input,
[aria-os-data="Macintosh"] textarea,
[aria-os-data="MacIntel"] textarea {
-webkit-text-stroke-width: var(--resetTextStrokeWidth);
}

.yes-moz .full-screener:-moz-full-screen,
.yes-webkit .full-screener:-webkit-full-screen,
.yes-blink .full-screener:-webkit-full-screen,
.yes-ms .full-screener:-ms-fullscreen,
.full-screener:fullscreen {
background-color: rgba(0, 0, 0, 0.32);
background-color: var(--utilityFullscreenBgColor);
}

/* reset default text opacity of input placeholder */
@@ -550,7 +541,7 @@
.yes-ms :-ms-input-placeholder, /* Edge/IE 10 */
.yes-ms ::-ms-input-placeholder, /* Edge 15+/IE 11 */
::placeholder {
color: #E4E4E4;
color: var(--resetFormElementPlaceholderColor);
}

.yes-webkit input[type=date]::-webkit-clear-button,
@@ -579,10 +570,10 @@
.yes-webkit input[type=range]::-webkit-slider-thumb,
.yes-moz input[type=range]::-moz-range-thumb,
.yes-ms input[type=range]::-ms-thumb {
border: 1px solid transparent;
height: 16px;
width: 16px;
background-color: #777777;
border: var(--resetdefaultBorderHidden);
height: var(--resetDefaultWidgetDimension);
width: var(--resetDefaultWidgetDimension);
background-color: var(--resetDefaultFormElementBgColor);
cursor: pointer;
}