Upload files to '0.9.000'
This commit is contained in:
pournasseh
parent
0005c6465b
commit
160512fe1f
|
|
@ -0,0 +1,36 @@
|
|||
:root {
|
||||
--he_back: #fff;
|
||||
--he_back_alt: #f1f1f1;
|
||||
|
||||
--he_dark: #2f2f2f;
|
||||
--he_dark_alt: #3f3f3f;
|
||||
|
||||
--he_text: #000;
|
||||
--he_text_light: #666;
|
||||
|
||||
--he_text_alt: #2f4d6d;
|
||||
--he_text_alt_light: #456281;
|
||||
|
||||
--he_base: #2b78fe;
|
||||
--he_base_light: #0099ff;
|
||||
|
||||
--he_alt: rgb(46, 150, 46);
|
||||
--he_alt_light: rgb(61, 175, 61);
|
||||
|
||||
--he_alert: #f00000;
|
||||
--he_alert_light: #ff4242;
|
||||
|
||||
--he_disabled: #aaa;
|
||||
--he_disabled_light: #ccc;
|
||||
|
||||
--he_selected: #e6f7ff;
|
||||
|
||||
--he_font: Tahoma;
|
||||
--he_font_size: 14px;
|
||||
|
||||
--he_align: right;
|
||||
--he_rev_align: left;
|
||||
|
||||
--he_direction: rtl;
|
||||
--he_rev_direction: ltr;
|
||||
}
|
||||
|
|
@ -0,0 +1,455 @@
|
|||
@import "heh-variables.css";
|
||||
/* setting up */
|
||||
*{ box-sizing: border-box; }
|
||||
*:before, *:after { box-sizing: border-box; }
|
||||
html, body{ direction: var(--he_direction) !important; text-align: var(--he_align) !important; }
|
||||
h1,h2,h3,h4,h5,h6,p,div,td { line-height: 1.6em; }
|
||||
body, input, select, textarea { font-family: var(--he_font); }
|
||||
body { font-size: var(--he_font_size) !important; margin: 0; padding: 0; }
|
||||
table { border-spacing: 0; border-collapse: collapse; }
|
||||
img { border: 0; }
|
||||
svg:not(:root) { overflow: hidden; }
|
||||
a { text-decoration: none; cursor: pointer; }
|
||||
small { font-size: 80%; font-weight: 400; }
|
||||
blockquote { margin: 20px 0; padding: 0 1.5rem; border-left: 5px solid var(--he_alert_light); }
|
||||
blockquote.rtl { border-right: 5px solid var(--he_alert_light); border-left: 0; }
|
||||
form { display: block; overflow: inherit; }
|
||||
section { width: 100%; text-align: var(--he_align); direction: var(--he_direction); }
|
||||
input { height: 2em; }
|
||||
select { height: 2.22em; padding: 0 11px; }
|
||||
textarea { resize: none; }
|
||||
input, textarea{ font-size: 1.1em;}
|
||||
input[type="file"] { overflow: hidden; }
|
||||
input[type="checkbox"], input[type="radio"] { height: 1em; }
|
||||
input[type="color"] { height: 22px; direction: ltr; width: 50px; text-align: center; }
|
||||
input[type="submit"], input[type="button"], input[type="reset"] { font-size: 1em; min-width: 130px; line-height: 1em; height: 2.22em; padding-bottom: 3px; }
|
||||
input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], input[type="file"] { height: 29px; }
|
||||
|
||||
/* width and height */
|
||||
.he-wh-100 { width: 100%; height: 100%; }
|
||||
.he-h-100 { height: 100%; }
|
||||
.he-w-100{ width: 100%; }
|
||||
.he-w-95{ width: 95%; }
|
||||
.he-w-90{ width: 90%; }
|
||||
.he-w-85{ width: 85%; }
|
||||
.he-w-80{ width: 80%; }
|
||||
.he-w-75{ width: 75%; }
|
||||
.he-w-70{ width: 70%; }
|
||||
.he-w-60{ width: 60%; }
|
||||
.he-w-50{ width: 50%; }
|
||||
.he-w-45{ width: 45%; }
|
||||
.he-w-40{ width: 40%; }
|
||||
.he-w-35{ width: 33%; }
|
||||
.he-w-33{ width: 33%; }
|
||||
.he-w-30{ width: 30%; }
|
||||
.he-w-25{ width: 25%; }
|
||||
.he-w-20{ width: 20%; }
|
||||
.he-w-15{ width: 15%; }
|
||||
.he-w-10{ width: 10%; }
|
||||
.he-w-5{ width: 5%; }
|
||||
.he-w-1{ width: 1%; }
|
||||
.he-w-0{ width: 0; }
|
||||
|
||||
.he-w-p-42 { width: 42px; }
|
||||
.he-w-p-72 { width: 72px; }
|
||||
|
||||
/* font sizest */
|
||||
|
||||
.he-8 { font-size: 0.8em !important; }
|
||||
.he-9 { font-size: 0.9em !important; }
|
||||
.he-10 { font-size: 1.0em !important; }
|
||||
.he-11 { font-size: 1.1em !important; }
|
||||
.he-12 { font-size: 1.2em !important; }
|
||||
.he-13 { font-size: 1.3em !important; }
|
||||
.he-14 { font-size: 1.4em !important; }
|
||||
.he-15 { font-size: 1.5em !important; }
|
||||
.he-16 { font-size: 1.6em !important; }
|
||||
.he-18 { font-size: 1.8em !important; }
|
||||
.he-20 { font-size: 2.0em !important; }
|
||||
.he-22 { font-size: 2.2em !important; }
|
||||
.he-24 { font-size: 2.4em !important; }
|
||||
.he-25 { font-size: 2.5em !important; }
|
||||
.he-26 { font-size: 2.6em !important; }
|
||||
.he-28 { font-size: 2.8em !important; }
|
||||
.he-30 { font-size: 3.0em !important; }
|
||||
.he-33 { font-size: 3.3em !important; }
|
||||
.he-40 { font-size: 4.0em !important; }
|
||||
.he-45 { font-size: 4.5em !important; }
|
||||
.he-50 { font-size: 5.0em !important; }
|
||||
|
||||
/* box properties */
|
||||
.he-no-overflow { overflow: hidden; }
|
||||
|
||||
.he-max-740 { max-width: 740px; display: inline-block; width: 100%; }
|
||||
.he-max-960 { max-width: 960px; display: inline-block; width: 100%; }
|
||||
.he-max-1200 { max-width: 1200px; display: inline-block; width: 100%; }
|
||||
.he-max-1380 { max-width: 1380px; display: inline-block; width: 100%; }
|
||||
|
||||
.he-border { border: 1px var(--he_disabled) solid; }
|
||||
.he-border-top { border-top: 1px var(--he_disabled) solid; }
|
||||
.he-border-left { border-left: 1px var(--he_disabled) solid; }
|
||||
.he-border-right { border-right: 1px var(--he_disabled) solid; }
|
||||
.he-border-bottom { border-bottom: 1px var(--he_disabled) solid; }
|
||||
|
||||
.he-border-light { border: 1px var(--he_disabled_light) solid; }
|
||||
.he-border-top-light { border-top: 1px var(--he_disabled_light) solid; }
|
||||
.he-border-left-light { border-left: 1px var(--he_disabled_light) solid; }
|
||||
.he-border-right-light { border-right: 1px var(--he_disabled_light) solid; }
|
||||
.he-border-bottom-light { border-bottom: 1px var(--he_disabled_light) solid; }
|
||||
|
||||
.he-no-border { border: 0px; }
|
||||
.he-no-border-top { border-top: 0; }
|
||||
.he-no-border-left { border-left: 0; }
|
||||
.he-no-border-right { border-right: 0; }
|
||||
.he-no-border-bottom { border-bottom: 0; }
|
||||
|
||||
/* shadows */
|
||||
.he-shadow { box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); }
|
||||
.he-shadow-2 { box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3); }
|
||||
.he-shadow-3 { box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2); }
|
||||
.he-shadow-4 { box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2); }
|
||||
|
||||
/* tables */
|
||||
.he-rtable, .he-rtable-tablet, .he-table, .he-table-form, .he-table-form-tablet { display: table; }
|
||||
.he-row{ display: table-row; }
|
||||
.he-rcell, .he-cell, .he-rcell-tablet { display: table-cell; }
|
||||
.he-cell-input, .he-cell-input-tablet { display: table-cell; position: relative; padding: 0.5em; padding-bottom: 1em; }
|
||||
.he-cell-text, .he-cell-text-tablet { display: table-cell; vertical-align: top; padding: 0.5em 3px; line-height: 1.2em; padding-top: 1em; color: var(--he_text_alt); font-size: 0.9em; text-align: var(--he_rev_align); }
|
||||
.he-form-header { cursor: default; border-bottom: 1px var(--he_disabled_light) solid; font-weight: bold; padding: 0.5em 1em; margin: 1em 0; color: var(--he_text_alt_light) !important; }
|
||||
.he-form-buttons { background-color: var(--he_back_alt); padding: 7px; border-top: 1px var(--he_disabled_light) solid; text-align: var(--he_rev_align); min-height: 3.2em; }
|
||||
|
||||
/* transparency */
|
||||
.he-alpha-1 { opacity: 0.1; }
|
||||
.he-alpha-2 { opacity: 0.2; }
|
||||
.he-alpha-3 { opacity: 0.3; }
|
||||
.he-alpha-4 { opacity: 0.4; }
|
||||
.he-alpha-5 { opacity: 0.5; }
|
||||
.he-alpha-6 { opacity: 0.6; }
|
||||
.he-alpha-7 { opacity: 0.7; }
|
||||
.he-alpha-8 { opacity: 0.8; }
|
||||
.he-alpha-9 { opacity: 0.9; }
|
||||
|
||||
/* transform */
|
||||
.he-rotate-90 { transform: rotate(90deg); display: inline-block; }
|
||||
.he-rotate-180 { transform: rotate(180deg); display: inline-block; }
|
||||
.he-rotate-270 { transform: rotate(270deg); display: inline-block; }
|
||||
.he-reverse { transform: rotateY(180deg); display: inline-block; }
|
||||
|
||||
/* container preparation */
|
||||
.he-section, .he-table-form, .he-table-form-tablet { width: 100%; text-align: var(--he_align); direction: var(--he_direction); line-height: 1.6em; }
|
||||
.he-ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
|
||||
.he-pull { line-height: 1.6em; }
|
||||
.he-pull-more { line-height: 2em; }
|
||||
.he-push { line-height: 1.2em; }
|
||||
.he-push-more { line-height: 10px; }
|
||||
|
||||
/* tools */
|
||||
.he-toast { cursor: default; left: 50%; transform: translate(-50%, 0); z-index: 9999999; position: fixed; text-align: center; bottom: 7em; border: 1px dimgray solid; background-color: rgba(0,0,0,0.72); box-shadow: 2px 2px 2px rgba(0,0,0,0.2); color: white; display: inline-block; padding: 1em; line-height: 1em; width: 25%; min-width: 320px; border-radius: 4px; }
|
||||
.he-badge { display: inline-block; border-radius: 11px; color: var(--he_back); font-family: Arial; font-size: 11px; font-weight: 700; line-height: 13px; padding: 2px 4px; margin: 0; background-color: var(--he_alert); min-width: 16px; text-align: center; top: 1px; margin: 0 3px; vertical-align: middle; }
|
||||
|
||||
.he-tag, .he-tag-disabled, .he-tag-alt, .he-tag-alert { background-color: var(--he_base_light); color: var(--he_back) !important; border: 1px var(--he_base) solid; transition: .2s; border-radius: 4px; padding: 0 0.7em; display: inline-block; margin: 2px 3px; font-size: .9em; }
|
||||
.he-tag-disabled { background-color: var(--he_disabled_light); color: var(--he_dark_alt) !important; border-color: var(--he_disabled); }
|
||||
.he-tag-alt { background-color: var(--he_alt_light); color: var(--he_back) !important; border-color: var(--he_alt); }
|
||||
.he-tag-alert { background-color: var(--he_alert_light); color: var(--he_back) !important; border-color: var(--he_alert); }
|
||||
a.he-tag:hover, a.he-tag-disabled:hover, a.he-tag-alt:hover, a.he-tag-alert:hover { border-color: var(--he_selected); }
|
||||
|
||||
.he-button-circle, .he-button-circle-alt, .he-button-circle-cancel, .he-button-circle-red, .he-button-circle-clear { display: inline-block; color: var(--he_back); position: relative; overflow: hidden; z-index: 1; width: 42px; height: 42px; line-height: 40px; padding: 0; background-color: var(--he_base); border-radius: 50%; transition: background-color .3s; cursor: pointer; vertical-align: middle; text-align: center; }
|
||||
.he-button-circle.big, .he-button-circle-alt.big, .he-button-circle-cancel.big, .he-button-circle-red.big, .he-button-circle-clear.big { height: 54px; width: 54px; line-height: 54px; font-size: 1.3em; }
|
||||
.he-button, .he-button-alt, .he-button-red, .he-button-cancel, .he-button-clear { padding: 4px 1em; height: 2.22em; line-height: 1.6em; font-size: 1em; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; background-color: var(--he_base); color: var(--he_back) !important; display: inline-block; margin: 1px; text-align: center; border-radius: 3px; min-width: 142px; padding-bottom: 3px; vertical-align: middle; transition: .3s; }
|
||||
.he-button:hover, .he-button-circle:hover { background: var(--he_base_light); }
|
||||
.he-button-alt, .he-button-circle-alt { background-color: var(--he_alt_light); }
|
||||
.he-button-alt:hover, .he-button-circle-alt:hover { background-color: var(--he_alt); }
|
||||
.he-button-cancel, .he-button-circle-cancel { background-color: var(--he_disabled); }
|
||||
.he-button-cancel:hover, .he-button-circle-cancel:hover { background-color: var(--he_disabled_light); }
|
||||
.he-button-red, .he-button-circle-red { background-color: var(--he_alert); }
|
||||
.he-button-red:hover, .he-button-circle-red:hover { background-color: var(--he_alert_light); }
|
||||
.he-button-clear, .he-button-circle-clear { background-color: transparent; color: var(--he_dark_alt) !important; border: 1px var(--he_text_light) solid; }
|
||||
.he-button-clear:hover, .he-button-circle-clear:hover { border-color: var(--he_disabled); }
|
||||
.he-button span { padding: 0 2px; line-height: 1.8em; vertical-align: top; }
|
||||
.he-button:disabled, .he-button-alt:disabled, .he-button-red:disabled, .he-button-cancel:disabled, .he-button-clear:disabled { background-color: var(--he_disabled); opacity: 0.5; cursor: default; border: 0; }
|
||||
|
||||
.he-link, .he-link-alert, .he-link-red, .he-link-base, .he-link-alt { display: inline-block; color: var(--he_text_light) !important; margin: 3px; text-align: center; cursor: pointer; background-color: transparent; border: 0; }
|
||||
.he-link:hover { color: var(--he_dark_alt) !important; }
|
||||
.he-link-red { color: var(--he_alert_light) !important; }
|
||||
.he-link-alert:hover, .he-link-red:hover { color: var(--he_alert) !important; }
|
||||
.he-link-base { color: var(--he_base) !important; }
|
||||
.he-link-base:hover { color: var(--he_base_light) !important; }
|
||||
.he-link-alt { color: var(--he_alt_light) !important; }
|
||||
.he-link-alt:hover { color: var(--he_alt) !important; }
|
||||
|
||||
.he-list { list-style: none; width: 100%; }
|
||||
.he-list tr:nth-child(even), .he-list li:nth-child(even), .he-list .he-row:nth-child(even) { background: var(--he_back); }
|
||||
.he-list tr:nth-child(odd), .he-list li:nth-child(odd), .he-list .he-row:nth-child(odd) { background: var(--he_back_alt); }
|
||||
.he-list td, .he-list .he-cell, .he-list li { padding: 0.5em; }
|
||||
.he-list .he-row.selected, .he-list tr.selected, .he-list li.selected { background-color: var(--he_selected); }
|
||||
.he-list .he-row.disabled, .he-list tr.disabled, .he-list li.disabled { background-color: var(--he_disabled_light); }
|
||||
.he-list .he-row.alert, .he-list tr.alert, .he-list li.alert { background-color: var(--he_alert_light); color: var(--he_back); }
|
||||
|
||||
/* Tabs */
|
||||
.he-tabs { border-bottom: 0; width: 100%; height: 42px; }
|
||||
.he-tab-item { vertical-align: bottom; padding: 0 1px; width: 20%; min-width: 72px; color: var(--he_text); }
|
||||
.he-tab-item a { display: block; width: 100%; height: 31px; color: var(--he_text); font-size: 0.9em; text-align: center; background-color: var(--he_disabled_light); padding-top: 9px; line-height: 0.7em; }
|
||||
.he-tab-item a:hover { cursor: pointer; border: 1px var(--he_disabled_light) solid; border-bottom: 0; background: var(--he_base_light); color: var(--he_back) !important; }
|
||||
.he-tab-item.selected { cursor: default; text-align: center; color: var(--he_text); }
|
||||
.he-tab-item.selected a { background-color: var(--he_back_alt); margin-bottom: -1px; }
|
||||
.he-tab-item.selected a:hover { cursor: default; border: 0; background: var(--he_back_alt); color: var(--he_text) !important; }
|
||||
.he-tab-item.disabled a, .he-tab-item.disabled a:hover { border: 0 !important; cursor: default; background: var(--he_disabled_light); color: var(--he_text_light) !important; opacity: 0.7; }
|
||||
|
||||
.he-dropdown { width:100%; margin:0 auto; }
|
||||
.he-dropdown ul { padding: 0; margin: 0; list-style: none; }
|
||||
.he-dropdown ul li { padding: 0; margin:0; position: relative; }
|
||||
.he-dropdown ul li ul { display: none; position: absolute; font-size: 0.95em; background-color: var(--he_back); }
|
||||
.he-dropdown ul li ul li { float:none; margin:0; text-decoration:none; z-index:100; background-color: var(--he_back); }
|
||||
.he-dropdown ul li ul li a { white-space: nowrap; width: 100%; display: inline-block; }
|
||||
.he-dropdown ul li:hover > ul { display: block; }
|
||||
.he-dropdown ul > li > ul { border: 1px var(--he_back_alt) solid; border-radius: 2px; overflow: hidden; }
|
||||
.he-dropdown ul a { text-decoration: none; display: inline-block; padding: 0.5em; }
|
||||
.he-dropdown ul a:hover { background-color: var(--he_back_alt); }
|
||||
|
||||
/* special inputs */
|
||||
.he-switch { position: relative !important; display: inline-block !important; width: 40px !important; height: 22px !important; vertical-align: middle; }
|
||||
.he-switch input { display:none; }
|
||||
.he-switch-key { position: absolute !important; cursor: pointer; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 22px !important; background-color: var(--he_disabled); transition: .4s; border-radius: 34px !important; }
|
||||
.he-switch-key:before { border: 0!important; margin: 0!important; position: absolute; content: ""; height: 18px !important; top: 2px !important; width: 18px !important; left: 2px !important; bottom: 2px !important; background-color: var(--he_back); transition: .4s; border-radius: 50% !important; }
|
||||
input:checked + .he-switch-key { background-color: var(--he_base); }
|
||||
input:focus + .he-switch-key { box-shadow: 0 0 1px var(--he_base); }
|
||||
input:checked + .he-switch-key:before { transform: translateX(18px) !important; }
|
||||
|
||||
|
||||
|
||||
/* added content */
|
||||
.he-needed:before{ color: var(--he_alert_light); content: '*'; font-size: 1.1em; }
|
||||
.he-arrow-right:before{ content: '>'; display: inline-block; margin: 0 0.5em; }
|
||||
.he-arrow-left:before{ content: '<'; display: inline-block; margin: 0 0.5em; }
|
||||
.he-pipe:before{ content: '|'; display: inline-block; margin: 0 0.5em; }
|
||||
|
||||
code { padding: .2rem .5rem; margin: 0 .2rem; font-size: 90%; white-space: nowrap; background: var(--he_back_alt); border: 1px solid var(--he_disabled_light); border-radius: 4px; overflow-x: auto; }
|
||||
pre > code { display: block; padding: 0 1.5rem; white-space: pre; margin: 0 }
|
||||
|
||||
/* cursor */
|
||||
.he-pointer { cursor: pointer; }
|
||||
.he-label { cursor: default; }
|
||||
.he-handle { cursor: move; }
|
||||
|
||||
/* colors */
|
||||
.black {color: black;}
|
||||
.he-bg-black { background-color: black; }
|
||||
.gray { color: gray; }
|
||||
.he-bg-gray { background-color: gray; }
|
||||
.silver { color: silver; }
|
||||
.he-bg-silver { background-color: silver; }
|
||||
.white { color: white; }
|
||||
.he-bg-white { background-color: white; }
|
||||
.linen { color: linen; }
|
||||
.he-bg-linen { background-color: linen; }
|
||||
.red { color: red; }
|
||||
.he-bg-red { background-color: red; }
|
||||
.darkred { color: darkred; }
|
||||
.he-bg-darkred { background-color: darkred; }
|
||||
.orange{color: orange;}
|
||||
.he-bg-orange { background-color: orange; }
|
||||
.khaki{color: khaki;}
|
||||
.he-bg-khaki { background-color: khaki; }
|
||||
.peach{color: peachpuff;}
|
||||
.he-bg-peach { background-color: peachpuff; }
|
||||
.yellow { color: yellow; }
|
||||
.he-bg-yellow { background-color: yellow; }
|
||||
.green{ color: forestgreen; }
|
||||
.he-bg-green { background-color: forestgreen; }
|
||||
.lime{ color: lime; }
|
||||
.he-bg-lime { background-color: lime; }
|
||||
.lightgreen{ color: lightgreen; }
|
||||
.he-bg-lightgreen { background-color: lightgreen; }
|
||||
.brown{ color: saddlebrown; }
|
||||
.he-bg-brown { background-color: saddlebrown; }
|
||||
.purple { color: rebeccapurple; }
|
||||
.he-bg-purple { background-color: rebeccapurple; }
|
||||
.magenta { color: magenta; }
|
||||
.he-bg-magenta { background-color: magenta; }
|
||||
.orchid { color: orchid; }
|
||||
.he-bg-orchid { background-color: orchid; }
|
||||
.pink { color: pink; }
|
||||
.he-bg-pink { background-color: pink; }
|
||||
.blue { color: royalblue; }
|
||||
.he-bg-blue { background-color: dodgerblue; }
|
||||
.darkblue { color: royalblue; }
|
||||
.he-bg-darkblue { background-color: royalblue; }
|
||||
.teal { color: teal; }
|
||||
.he-bg-teal { background-color: teal; }
|
||||
|
||||
|
||||
.he-back { color: var(--he_back); }
|
||||
.he-bg-back { background-color: var(--he_back); }
|
||||
.he-back-alt { color: var(--he_back_alt); }
|
||||
.he-bg-back-alt { background-color: var(--he_back_alt); }
|
||||
|
||||
.he-dark { color: var(--he_dark); }
|
||||
.he-bg-dark { background-color: var(--he_dark); }
|
||||
.he-dark-alt { color: var(--he_dark_alt); }
|
||||
.he-bg-dark-alt { background-color: var(--he_dark_alt); }
|
||||
|
||||
.he-text { color: var(--he_text); }
|
||||
.he-bg-text { background-color: var(--he_text); }
|
||||
.he-text-light { color: var(--he_text_light); }
|
||||
.he-bg-text-light { background-color: var(--he_text_light); }
|
||||
|
||||
.he-text-alt { color: var(--he_text_alt); }
|
||||
.he-bg-text-alt { background-color: var(--he_text_alt); }
|
||||
.he-text-alt-light { color: var(--he_text_alt_light); }
|
||||
.he-bg-text-alt-light { background-color: var(--he_text_alt_light); }
|
||||
|
||||
.he-base { color: var(--he_base); }
|
||||
.he-bg-base { background-color: var(--he_base); }
|
||||
.he-base-light { color: var(--he_base_light); }
|
||||
.he-bg-base-light { background-color: var(--he_base_light); }
|
||||
|
||||
.he-alt { color: var(--he_alt); }
|
||||
.he-bg-alt { background-color: var(--he_alt); }
|
||||
.he-alt-light { color: var(--he_alt_light); }
|
||||
.he-bg-alt-light { background-color: var(--he_alt_light); }
|
||||
|
||||
.he-alert { color: var(--he_alert); }
|
||||
.he-bg-alert { background-color: var(--he_alert); }
|
||||
.he-alert-light { color: var(--he_alert_light); }
|
||||
.he-bg-alert-light { background-color: var(--he_alert_light); }
|
||||
|
||||
.he-disabled { color: var(--he_disabled); }
|
||||
.he-bg-disabled { background-color: var(--he_disabled); }
|
||||
.he-disabled-light { color: var(--he_disabled_light); }
|
||||
.he-bg-disabled-light { background-color: var(--he_disabled_light); }
|
||||
|
||||
.he-selected { color: var(--he_selected); }
|
||||
.he-bg-selected { background-color: var(--he_selected); }
|
||||
|
||||
|
||||
/* basics */
|
||||
.ltr { direction: ltr; text-align: left; }
|
||||
.rtl{ direction: rtl; text-align: right; }
|
||||
.left { text-align: left; }
|
||||
.right { text-align: right; }
|
||||
.center{ text-align:center; }
|
||||
.float-left { float: left; }
|
||||
.float-right { float: right; }
|
||||
.content-box { box-sizing: content-box; }
|
||||
.nowrap{ white-space: nowrap; }
|
||||
.absolute { position: absolute; }
|
||||
.relative{ position: relative;}
|
||||
.static{ position: static !important; }
|
||||
.fixed { position: fixed; }
|
||||
.block { display: block; }
|
||||
.flex { display: flex; }
|
||||
.inline{ display: inline-block;}
|
||||
.hidden { display: none; }
|
||||
.flex-none { flex: none; }
|
||||
|
||||
|
||||
/* font */
|
||||
.he-bold{ font-weight: 700;}
|
||||
.he-italic { font-style: italic; }
|
||||
.he-slim{ font-weight: 400;}
|
||||
|
||||
.he-underline { text-decoration: underline !important; }
|
||||
|
||||
/* spacing */
|
||||
.he-no-margin { margin: 0; }
|
||||
.he-margin-sides { margin: 0 1em; }
|
||||
.he-margin-sides-half { margin: 0 0.5em; }
|
||||
.he-margin-vsides { margin: 1em 0; }
|
||||
.he-margin-all { margin: 1em; }
|
||||
.he-margin-all-half { margin: 0.5em; }
|
||||
.he-margin-bottom-half { margin-bottom: .5em; }
|
||||
.he-margin-bottom { margin-bottom: 1em; }
|
||||
.he-margin-bottom-2 { margin-bottom: 2em; }
|
||||
.he-margin-bottom-3 { margin-bottom: 3em; }
|
||||
.he-margin-bottom-4 { margin-bottom: 4em; }
|
||||
.he-margin-bottom-5 { margin-bottom: 5em; }
|
||||
.he-margin-top { margin-top: 1em; }
|
||||
.he-margin-top-2 { margin-top: 2em; }
|
||||
.he-margin-top-3 { margin-top: 3em; }
|
||||
.he-margin-top-4 { margin-top: 4em; }
|
||||
.he-margin-top-5 { margin-top: 5em; }
|
||||
.he-margin-top-half { margin-top: 0.5em; }
|
||||
.he-margin-left { margin-left: 1em; }
|
||||
.he-margin-left-half { margin-left: 0.5em; }
|
||||
.he-margin-right { margin-right: 1em; }
|
||||
.he-margin-right-half { margin-right: 0.5em; }
|
||||
.he-no-margin-top { margin-top: 0; }
|
||||
.he-no-margin-bottom { margin-bottom: 0; }
|
||||
|
||||
.he-no-space { padding: 0; }
|
||||
.he-space-sides { padding: 0 1em; }
|
||||
.he-space-sides-half { padding: 0 0.5em; }
|
||||
.he-space-vsides { padding: 1em 0; }
|
||||
.he-space-all { padding: 1em; }
|
||||
.he-space-all-half { padding: 0.5em; }
|
||||
.he-space-bottom-half { padding-bottom: .5em; }
|
||||
.he-space-bottom { padding-bottom: 1em; }
|
||||
.he-space-bottom-2 { padding-bottom: 2em; }
|
||||
.he-space-bottom-3 { padding-bottom: 3em; }
|
||||
.he-space-bottom-4 { padding-bottom: 4em; }
|
||||
.he-space-bottom-5 { padding-bottom: 5em; }
|
||||
.he-space-top { padding-top: 1em; }
|
||||
.he-space-left { padding-left: 1em; }
|
||||
.he-space-left-half { padding-left: 0.5em; }
|
||||
.he-space-right { padding-right: 1em; }
|
||||
.he-space-right-half { padding-right: 0.5em; }
|
||||
.he-space-top-2 { padding-top: 2em; }
|
||||
.he-space-top-3 { padding-top: 3em; }
|
||||
.he-space-top-4 { padding-top: 4em; }
|
||||
.he-space-top-5 { padding-top: 5em; }
|
||||
.he-space-top-half { padding-top: 0.5em; }
|
||||
.he-no-space-top { padding-top: 0; }
|
||||
.he-no-space-bottom { padding-bottom: 0; }
|
||||
|
||||
/* vertical alignment */
|
||||
.he-top {vertical-align: top;}
|
||||
.he-bottom { vertical-align: bottom; }
|
||||
.he-middle { vertical-align: middle }
|
||||
|
||||
.he-top-0 { top: 0;}
|
||||
.he-bottom-0 { bottom: 0;}
|
||||
.he-left-0 { left: 0;}
|
||||
.he-right-0 { right: 0;}
|
||||
|
||||
.he-rounded { border-radius: 0.5em; }
|
||||
.he-rounded-less { border-radius: 4px; }
|
||||
.he-rounded-more { border-radius: 1em; }
|
||||
.he-rounded-full { border-radius: 9999px; }
|
||||
|
||||
/* functional */
|
||||
.he-for-mobile, .he-for-tablet { display: none; }
|
||||
|
||||
/* Animations */
|
||||
.he-spin { animation: he-spin 1s linear infinite; display: inline-block; }
|
||||
@keyframes he-spin { 100% { transform:rotate(360deg); } }
|
||||
.he-spin-reverse { animation: he-spin-reverse 1s linear infinite; display: inline-block; }
|
||||
@keyframes he-spin-reverse { 100% { transform:rotate(-360deg); } }
|
||||
.he-spin-hourglass { display: inline-block; animation: he-spin-hourglass 2s linear infinite; border: 0; background-color: transparent; }
|
||||
@keyframes he-spin-hourglass { 0% { transform: rotate(0deg); } 40% { transform: rotate(180deg); } 60% { transform: rotate(180deg); } 90% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } }
|
||||
.he-blink-gray, .he-blink-green, .he-blink-red { animation-duration: 1s; animation-iteration-count: infinite; width: 15px; height: 15px; display: inline-block; vertical-align: middle; border-radius: 50%; }
|
||||
.he-blink-gray { background-color: gray; }
|
||||
.he-blink-green { background-color: green; animation-name: he-blink; }
|
||||
.he-blink-red { background-color: red; animation-name: he-blink; }
|
||||
@keyframes he-blink { 0% {opacity:0;} 50% {opacity:1;} 100% {background-color:transparent;} }
|
||||
.he-pulse { overflow: visible; position: relative; }
|
||||
.he-pulse::before { content: ''; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: inherit; border-radius: inherit; transition: opacity .3s, -webkit-transform .3s; transition: opacity .3s, transform .3s; transition: opacity .3s, transform .3s, -webkit-transform .3s; animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; z-index: -1; }
|
||||
@keyframes pulse-animation{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(1.3);transform:scale(1.3)}100%{opacity:0;-webkit-transform:scale(1.3);transform:scale(1.3)}}
|
||||
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
.he-table-form-tablet, .he-table-form-tablet>.he-row, .he-cell-input-tablet, .he-cell-text-tablet, .he-rtable-tablet, .he-rtable-tablet>.he-row, .he-rcell-tablet { display: block; width: 100%; }
|
||||
.he-rcell-tablet, .he-cell-input-tablet, .he-cell-text-tablet { border-left: 0; }
|
||||
.he-cell-text-tablet { text-align: var(--he_align); padding: 1.3em 0 0.5em 0; }
|
||||
.he-only-desktop { display: none; }
|
||||
.he-for-tablet { display: block; }
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
.he-table-form, .he-table-form>.he-row, .he-cell-input, .he-cell-text, .he-rtable, .he-rtable>.he-row, .he-rcell { display: block; width: 100%; }
|
||||
.he-rcell, .he-cell-input, .he-cell-text { border-left: 0; }
|
||||
.he-cell-text { text-align: var(--he_align); padding: 1.3em 0 0.5em 0; }
|
||||
select { width: 100%; }
|
||||
.he-w-p-42 { width: 25%; }
|
||||
.he-w-p-72 { width: 50%; }
|
||||
.he-for-desktop, .he-for-tablet { display: none; }
|
||||
.he-for-mobile { display: block; } .he-for-mobile.he-cell, .he-for-mobile.he-rcell { display: table-cell; } .he-for-mobile.he-row { display: table-row; }
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue