diff --git a/demo/index.html b/index.html similarity index 85% rename from demo/index.html rename to index.html index bd04279..71873d1 100644 --- a/demo/index.html +++ b/index.html @@ -4,8 +4,8 @@ Synergy UI - - + +
@@ -65,13 +65,25 @@
- +
+
+ + + +
+
- + \ No newline at end of file diff --git a/src/_config.css b/src/_config.css new file mode 100644 index 0000000..cc91b87 --- /dev/null +++ b/src/_config.css @@ -0,0 +1,25 @@ +:root { + + --synergy-bg: rgba(249, 247, 244, 1); + + --synergy-border: rgba(134, 94, 60, 0.4); + --synergy-border-active: rgba(134, 94, 60, 1); + --synergy-border-width: 2px; + --synergy-border-radius: 0.375rem; + + --synergy-label: rgba(134, 94, 60, 0.8); + --synergy-label-active: rgba(134, 94, 60, 1); + + --synergy-text-color: rgba(99, 69, 44, 1); + + --synergy-btn-primary-bg: rgba(134, 94, 60, 0.8); + --synergy-btn-primary-bg-hover: rgba(134, 94, 60, 1); + --synergy-btn-primary-bg-active: rgba(134, 94, 60, 0.5); + + --synergy-btn-bg: rgba(153, 153, 153, 0.3); + --synergy-btn-bg-hover: rgba(153, 153, 153, 0.4); + --synergy-btn-bg-active: rgba(153, 153, 153, 0.6); + +} + +.btn.btn-primary {--synergy-text-color: rgba(255, 255, 255, 1);} \ No newline at end of file diff --git a/src/button.css b/src/button.css new file mode 100644 index 0000000..e1c73ac --- /dev/null +++ b/src/button.css @@ -0,0 +1,33 @@ +.btn-row { + display: flex; + flex-wrap: wrap; + gap: 15px; +} + +.btn { + background-color: var(--synergy-btn-bg); + padding: 12px 20px; + border: 0; + color: var(--synergy-text-color); + font: inherit; + font-weight: 700; + font-size: 1rem; + border-radius: var(--synergy-border-radius); + transition: .2s background-color; + cursor: pointer; +} + +.btn:hover { + background-color: var(--synergy-btn-bg-hover); +} + +.btn:active { + background-color: var(--synergy-btn-bg-active); +} + +.btn.btn-primary { + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1); + --synergy-btn-bg: var(--synergy-btn-primary-bg); + --synergy-btn-bg-hover: var(--synergy-btn-primary-bg-hover); + --synergy-btn-bg-active: var(--synergy-btn-primary-bg-active); +} diff --git a/src/input.css b/src/input.css new file mode 100644 index 0000000..5a5b00e --- /dev/null +++ b/src/input.css @@ -0,0 +1,85 @@ +.inp { + position: relative; + width: 100%; +} + +/* Label */ + +.inp label { + position: absolute; + top: 11px; + left: 7px; + font-size: 1rem; + font-weight: 700; + transform-origin: 0 0; + transform: translate3d(0, 0, 0); + transition: all .2s ease; + pointer-events: none; + background: var(--synergy-bg); + padding: 3px 8px; + border-radius: 10px; + line-height: 1; + color: var(--synergy-label); +} + +.inp :is( + :is(input, textarea, select):not(:placeholder-shown) + label, + :is(input, textarea):not(:-ms-input-placeholder) + label, + :is(input, textarea):not(:-moz-placeholder-shown) + label +), +.inp :is(input, textarea):focus + label { + color: var(--synergy-label-active); + transform: translate3d(0, -21px, 0) scale(.8); +} + +/* Common styles */ + +.inp :is(input, textarea, select) { + display: block; + width: 100%; + min-height: 47px; + font-family: inherit; + padding: 10px 12px; + font-size: 1rem; + font-weight: 500; + color: var(--synergy-text-color); + transition: border-color 0.15s ease; + border-radius: var(--synergy-border-radius); + border: var(--synergy-border-width) solid var(--synergy-border); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1); + background: var(--synergy-bg); + margin: 0px; +} + +.inp :is(input, textarea, select):focus { + outline: none; + border-color: var(--synergy-border-active); +} + +/* Specific styles */ + +.inp.select select { + appearance: none; + padding-right: 40px; +} + +.inp.select::after { + content: ""; + border: 2px solid var(--synergy-text-color); + border-top: 0; + border-left: 0; + display: block; + position: absolute; + top: 50%; + margin-top: -8.7px; + right: 15px; + padding: 5px; + transform: rotate(45deg); + pointer-events: none; +} + +.inp textarea { + height: 100px; + max-width: 100%; + resize: vertical; +} \ No newline at end of file diff --git a/src/radio.css b/src/radio.css new file mode 100644 index 0000000..20aad75 --- /dev/null +++ b/src/radio.css @@ -0,0 +1,32 @@ +label.radio > input[type="radio"] { + display: none; +} + +label.radio > input[type="radio"] + * { + display: flex; + flex-wrap: nowrap; + align-items: center; + cursor: pointer; + gap: 10px; +} + +label.radio > input[type="radio"] + *::before { + content: ""; + display: block; + width: 1rem; + height: 1rem; + border-radius: 50%; + aspect-ratio: 1 / 1; + border: 2px solid var(--synergy-border); + transition: background .2s; + background: var(--synergy-bg); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1); +} + +label.radio > input[type="radio"]:checked + *::before { + background: var(--synergy-border-active); +} + +.radio-row { + display: flex; gap: 25px; flex-wrap: wrap; +} \ No newline at end of file diff --git a/src/toggle.css b/src/toggle.css new file mode 100644 index 0000000..d721dd3 --- /dev/null +++ b/src/toggle.css @@ -0,0 +1,61 @@ +.toggle { + border: var(--synergy-border-width) solid var(--synergy-border); + background-color: var(--synergy-bg); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1); + border-radius: 100px; + padding: 3px; + display: flex; + max-width: 2.6rem; + height: 1.5rem; + width: 100%; + position: relative; +} + +.toggle input { + opacity: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + cursor: pointer; + z-index: 100; +} + +.toggle .indicator { + transition: all .2s; + display: flex; + height: 100%; +} + +.toggle .indicator::after { + transition: all .2s; + margin-left: auto; + display: inline-block; + height: 100%; + aspect-ratio: 1 / 1; + background-color: var(--synergy-border); + border-radius: 100%; + content: ""; +} + +.toggle input:checked + .indicator { + flex: 1; +} + +.toggle input:checked + .indicator::after { + background-color: var(--synergy-border-active); +} + +/* Toggle with label */ + +.toggle-text { + display: grid; + align-items: center; + gap: 20px; + grid-template-columns: 1fr 2.6rem; +} + +.toggle-text label { + cursor: pointer; +} \ No newline at end of file diff --git a/style.css b/style.css index 7caae6b..a94488c 100644 --- a/style.css +++ b/style.css @@ -1,221 +1,5 @@ -:root { - - --synergy-bg: rgba(249, 247, 244, 1); - - --synergy-border: rgba(134, 94, 60, 0.4); - --synergy-border-active: rgba(134, 94, 60, 1); - --synergy-border-width: 2px; - --synergy-border-radius: 0.375rem; - - --synergy-label: rgba(134, 94, 60, 0.8); - --synergy-label-active: rgba(134, 94, 60, 1); - - --synergy-text-color: rgba(99, 69, 44, 1); - - --synergy-btn-primary-bg: rgba(134, 94, 60, 0.8); - --synergy-btn-primary-bg-hover: rgba(134, 94, 60, 1); - --synergy-btn-primary-bg-active: rgba(134, 94, 60, 0.5); - - --synergy-btn-bg: rgba(153, 153, 153, 0.3); - --synergy-btn-bg-hover: rgba(153, 153, 153, 0.4); - --synergy-btn-bg-active: rgba(153, 153, 153, 0.6); - -} - -.btn.btn-primary {--synergy-text-color: rgba(255, 255, 255, 1);} - -/* -INPUTS -*/ - -.inp { - position: relative; - width: 100%; -} - -/* Label */ - -.inp label { - position: absolute; - top: 11px; - left: 7px; - font-size: 1rem; - font-weight: 700; - transform-origin: 0 0; - transform: translate3d(0, 0, 0); - transition: all .2s ease; - pointer-events: none; - background: var(--synergy-bg); - padding: 3px 8px; - border-radius: 10px; - line-height: 1; - color: var(--synergy-label); -} - -.inp :is( - :is(input, textarea, select):not(:placeholder-shown) + label, - :is(input, textarea):not(:-ms-input-placeholder) + label, - :is(input, textarea):not(:-moz-placeholder-shown) + label -), -.inp :is(input, textarea):focus + label { - color: var(--synergy-label-active); - transform: translate3d(0, -21px, 0) scale(.8); -} - -/* Common styles */ - -.inp :is(input, textarea, select) { - display: block; - width: 100%; - min-height: 47px; - font-family: inherit; - padding: 10px 12px; - font-size: 1rem; - font-weight: 500; - color: var(--synergy-text-color); - transition: border-color 0.15s ease; - border-radius: var(--synergy-border-radius); - border: var(--synergy-border-width) solid var(--synergy-border); - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1); - background: var(--synergy-bg); - margin: 0px; -} - -.inp :is(input, textarea, select):focus { - outline: none; - border-color: var(--synergy-border-active); -} - -/* Specific styles */ - -.inp.select select { - appearance: none; - padding-right: 40px; -} - -.inp.select::after { - content: ""; - border: 1px solid var(--synergy-text-color); - border-top: 0; - border-left: 0; - display: block; - position: absolute; - top: 50%; - margin-top: -8px; - right: 15px; - padding: 5px; - transform: rotate(45deg); - pointer-events: none; -} - -.inp textarea { - height: 100px; - max-width: 100%; - resize: vertical; -} - - -/* -TOGGLE -*/ - -.toggle { - border: var(--synergy-border-width) solid var(--synergy-border); - background-color: var(--synergy-bg); - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1); - border-radius: 100px; - padding: 3px; - display: flex; - max-width: 60px; - height: 30px; - width: 100%; - position: relative; -} - -.toggle input { - opacity: 0; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - cursor: pointer; - z-index: 100; -} - -.toggle .indicator { - transition: all .2s; - display: flex; - height: 100%; -} - -.toggle .indicator::after { - transition: all .2s; - margin-left: auto; - display: inline-block; - height: 100%; - aspect-ratio: 1 / 1; - background-color: var(--synergy-border); - border-radius: 100%; - content: ""; -} - -.toggle input:checked + .indicator { - flex: 1; -} - -.toggle input:checked + .indicator::after { - background-color: var(--synergy-border-active); -} - -/* Toggle with label */ - -.toggle-text { - display: grid; - align-items: center; - gap: 20px; - grid-template-columns: 1fr 50px; -} - -.toggle-text label { - cursor: pointer; -} - - -/* -BUTTON -*/ - -.btn-row { - display: flex; - flex-wrap: wrap; - gap: 15px; -} - -.btn { - background-color: var(--synergy-btn-bg); - padding: 12px 20px; - border: 0; - color: var(--synergy-text-color); - font: inherit; - font-weight: 700; - font-size: 1rem; - border-radius: var(--synergy-border-radius); - transition: .2s background-color; - cursor: pointer; -} - -.btn:hover { - background-color: var(--synergy-btn-bg-hover); -} - -.btn:active { - background-color: var(--synergy-btn-bg-active); -} - -.btn.btn-primary { - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1); - --synergy-btn-bg: var(--synergy-btn-primary-bg); - --synergy-btn-bg-hover: var(--synergy-btn-primary-bg-hover); - --synergy-btn-bg-active: var(--synergy-btn-primary-bg-active); -} +@import url("src/_config.css"); +@import url("src/button.css"); +@import url("src/input.css"); +@import url("src/toggle.css"); +@import url("src/radio.css"); diff --git a/demo/demo.css b/web/demo.css similarity index 100% rename from demo/demo.css rename to web/demo.css diff --git a/demo/demo.js b/web/demo.js similarity index 100% rename from demo/demo.js rename to web/demo.js