diff --git a/packages/style/src/Icons.css b/packages/style/src/Icons.css index be9122f1..ee679c27 100644 --- a/packages/style/src/Icons.css +++ b/packages/style/src/Icons.css @@ -1,6 +1,3 @@ -@import "fonts.css"; -@import "vars.css"; - svg { fill: var(--grey); } .dp-po-Icon.Icon--white svg { fill: #fff; } @@ -31,22 +28,22 @@ svg { fill: var(--grey); } .dp-po-Icon.Icon--pink-light svg { fill: #fae8f0; } .dp-po-Icon.Icon--purple-light svg { fill: #ebe4f2; } -.dp-IconsWrapper { +.dp-po-IconsWrapper.Icons-Demo { color: inherit; display: flex; flex-wrap: wrap; } -.dp-IconsWrapper > span { - align-items: center; - color: var(--grey-darkest); - display: flex; +.dp-po-IconsWrapper.Icons-Demo > span { flex: 0 0 14.2%; - font: var(--b-2); padding-bottom: 30px; + display: flex; + align-items: center; + font: var(--b-2); + color: var(--grey-darkest); } -.dp-IconsWrapper .dp-po-Icon { +.dp-po-IconsWrapper .dp-po-Icon { margin-right: 10px; } @@ -58,12 +55,12 @@ svg { fill: var(--grey); } /* Messenger - Icons */ -.dp-IconsWrapper.Messenger-Icons > span { +.dp-po-IconsWrapper.Messenger-Icons > span { flex: 0 0 50%; max-width: 400px; } .Messenger-Icons .dp-po-Icon { - height: 36px; width: 36px; -} + height: 36px; +} \ No newline at end of file diff --git a/packages/style/src/arrows.css b/packages/style/src/arrows.css index 055ad97d..98769b7d 100644 --- a/packages/style/src/arrows.css +++ b/packages/style/src/arrows.css @@ -1,63 +1,63 @@ /* arrow */ .dp-po-arrow { - cursor: pointer; - display: inline-block; - height: 12px; - position: relative; - width: 8px; + position: relative; + display: inline-block; + cursor: pointer; + width: 8px; + height: 12px; } -.dp-po-arrow::before, -.dp-po-arrow::after { - background-color: var(--grey); - content: ""; - height: 7px; - position: absolute; - width: 1px; +.dp-po-arrow:before, +.dp-po-arrow:after { + content: ""; + position: absolute; + background-color: var(--grey); + width: 1px; + height: 7px; } -.dp-po-arrow.arrow--brand-primary::before, -.dp-po-arrow.arrow--brand-primary::after { - background-color: var(--brand-primary); +.dp-po-arrow.arrow--brand-primary:before, +.dp-po-arrow.arrow--brand-primary:after { + background-color: var(--brand-primary); } -.dp-po-arrow::before { - left: 50%; - top: 0; - transform: rotate(-45deg); +.dp-po-arrow:before { + top: 0; + left: 50%; + transform: rotate(-45deg); } -.dp-po-arrow::after { - bottom: 0; - left: 50%; - transform: rotate(45deg); +.dp-po-arrow:after { + bottom: 0; + left: 50%; + transform: rotate(45deg); } .dp-po-arrow.arrow--left { - transform: rotate(180deg); + transform: rotate(180deg); } .dp-po-arrow.arrow--bottom { - transform: rotate(90deg); + transform: rotate(90deg); } .dp-po-arrow.arrow--top { - transform: rotate(-90deg); + transform: rotate(-90deg); } -/* arrow avatars */ +/*arrow avatars*/ .dp-po-Avatar .dp-po-arrow { - height: 15px; - width: 10px; + width: 10px; + height: 15px; } -.dp-po-Avatar .dp-po-arrow::before, -.dp-po-Avatar .dp-po-arrow::after { - height: 10px; +.dp-po-Avatar .dp-po-arrow:before, +.dp-po-Avatar .dp-po-arrow:after { + height: 10px; } -.dp-po-Avatar .dp-po-arrow::before { - top: -2px; +.dp-po-Avatar .dp-po-arrow:before { + top: -2px; } diff --git a/packages/style/src/colours.css b/packages/style/src/colours.css index fc265595..f71d03e6 100644 --- a/packages/style/src/colours.css +++ b/packages/style/src/colours.css @@ -1,21 +1,21 @@ .dp-Bg-ColorDemonstration { display: flex; - flex-wrap: wrap; + flex-wrap: wrap } .dp-Bg-ColorDemonstration > div { - align-items: center; - color: #050505; - display: flex; flex: 0 0 14%; + display: flex; + align-items: center; font: var(--s-2); + color: #050505; } .dp-Bg-ColorDemonstration div > div { - border-radius: 3px; + min-width: 40px; height: 40px; + border-radius: 3px; margin: 6px; - min-width: 40px; } .dp-Bg-ColorDemonstration h4 { @@ -120,43 +120,43 @@ /* background color */ .Bg-Gradients--fusia { - background: linear-gradient(270deg, #e16aff 0.91%, #dc68f8 14.56%, #ce61e5 34.18%, #b856c6 57.4%, #99469b 83.16%, #833b7c 99.46%); + background: linear-gradient(270deg, #E16AFF 0.91%, #DC68F8 14.56%, #CE61E5 34.18%, #B856C6 57.4%, #99469B 83.16%, #833B7C 99.46%); } .Bg-Gradients--violet { - background: linear-gradient(270deg, #9e8ef1 0.87%, #9788e6 15.36%, #8477c9 40.73%, #665c9a 73.72%, #4b4471 99.5%); + background: linear-gradient(270deg, #9E8EF1 0.87%, #9788E6 15.36%, #8477C9 40.73%, #665C9A 73.72%, #4B4471 99.5%); } .Bg-Gradients--indigo { - background: linear-gradient(270deg, #6f88fc 0.87%, #6c85f8 20.01%, #617eec 39.44%, #5071d7 59.01%, #3760bb 78.67%, #184a97 98.24%, #164894 99.5%); + background: linear-gradient(270deg, #6F88FC 0.87%, #6C85F8 20.01%, #617EEC 39.44%, #5071D7 59.01%, #3760BB 78.67%, #184A97 98.24%, #164894 99.5%); } .Bg-Gradients--blue { - background: linear-gradient(90deg, #3467a4 0%, #3a8dde 49.48%, #77b5e7 100%); + background: linear-gradient(90deg, #3467A4 0%, #3A8DDE 49.48%, #77B5E7 100%); } .Bg-Gradients--cyan { - background: linear-gradient(270deg, #2fb1db 0.87%, #2971ae 99.5%); + background: linear-gradient(270deg, #2FB1DB 0.87%, #2971AE 99.5%); } .Bg-Gradients--sea { - background: linear-gradient(270deg, #8af0fc 0.87%, #6ec6cf 31.41%, #2a5e5e 99.5%); + background: linear-gradient(270deg, #8AF0FC 0.87%, #6EC6CF 31.41%, #2A5E5E 99.5%); } .Bg-Gradients--grass { - background: linear-gradient(270deg, #31eaa6 0.91%, #34e59f 23.4%, #3dd88c 55.7%, #4bc36d 93.77%, #4dbf68 99.42%); + background: linear-gradient(270deg, #31EAA6 0.91%, #34E59F 23.4%, #3DD88C 55.7%, #4BC36D 93.77%, #4DBF68 99.42%); } .Bg-Gradients--yellow { - background: linear-gradient(270deg, #f5d16d 0.91%, #f5cc66 18.72%, #f4bd53 44.31%, #f3a534 74.44%, #f28d15 99.5%); + background: linear-gradient(270deg, #F5D16D 0.91%, #F5CC66 18.72%, #F4BD53 44.31%, #F3A534 74.44%, #F28D15 99.5%); } .Bg-Gradients--rust { - background: linear-gradient(270deg, #ff8f6d 0.91%, #fb8966 19.14%, #f07953 45.33%, #de5f34 76.18%, #cd4718 99.5%); + background: linear-gradient(270deg, #FF8F6D 0.91%, #FB8966 19.14%, #F07953 45.33%, #DE5F34 76.18%, #CD4718 99.5%); } .Bg-Gradients--rose { - background: linear-gradient(270deg, #ff4c85 0.99%, #f8497f 21.34%, #e5416d 50.57%, #c6334f 85.01%, #b72c41 99.5%); + background: linear-gradient(270deg, #FF4C85 0.99%, #F8497F 21.34%, #E5416D 50.57%, #C6334F 85.01%, #B72C41 99.5%); } /* color */ diff --git a/packages/style/src/components/dp-po-Information.css b/packages/style/src/components/dp-po-Information.css index 75106669..6c33f419 100644 --- a/packages/style/src/components/dp-po-Information.css +++ b/packages/style/src/components/dp-po-Information.css @@ -1,26 +1,26 @@ .dp-po-Info { - background-color: var(--grey-lightest); - border: 1px solid var(--brand-primary); - border-left: 5px solid var(--brand-primary); - border-radius: 6px; - color: var(--grey-darkest); - display: flex; - font: var(--p-2-bold); - max-width: 670px; - padding: 15px; - width: 100%; + display: flex; + font: var(--p-2-bold); + color: var(--grey-darkest); + border: 1px solid var(--brand-primary); + border-left: 5px solid var(--brand-primary); + background-color: var(--grey-lightest); + border-radius: 6px; + width: 100%; + max-width: 670px; + padding: 15px; } .dp-po-Info .dp-po-info-txt { - padding-left: 15px; + padding-left: 15px; } .dp-po-Info.Info--danger { - border: 1px solid var(--danger); - border-left: 5px solid var(--danger); + border: 1px solid var(--danger); + border-left: 5px solid var(--danger); } .dp-po-Info .dp-po-Icon { - height: 23px; - min-width: 23px; + min-width: 23px; + height: 23px; } diff --git a/packages/style/src/components/dp-po-avatars.css b/packages/style/src/components/dp-po-avatars.css index 81909bbc..afa90fb3 100644 --- a/packages/style/src/components/dp-po-avatars.css +++ b/packages/style/src/components/dp-po-avatars.css @@ -1,45 +1,59 @@ .dp-po-Avatar { - align-items: center; - display: flex; + display: flex; + align-items: center; } .dp-po-Avatar-icon { - height: 23px; - width: 23px; + width: 23px; + height: 23px; + cursor: pointer; } .dp-po-Avatar-name { - color: var(--grey-darkest); - font: var(--h-6); - margin-left: 10px; + font: var(--h-6); + color: var(--grey-darkest); + margin-left: 10px; } -/* Avatar--medium */ +/*Avatar--medium*/ .dp-po-Avatar.Avatar--medium .dp-po-Avatar-icon { - height: 28px; - width: 28px; + width: 28px; + height: 28px; } .dp-po-Avatar.Avatar--medium .dp-po-Avatar-name { - font: var(--h-5-medium); + font: var(--h-5-medium); } -/* Avatar--small */ +/*Avatar--small*/ .dp-po-Avatar.Avatar--circle.Avatar--small .dp-po-Avatar-icon { - height: 25px; - width: 25px; + width: 25px; + height: 25px; } .dp-po-Avatar-name + .dp-po-arrow { - margin-left: 10px; + margin-left: 10px; } -/* avatar/circular */ +/*avatar/circular*/ .dp-po-Avatar.Avatar--circle .dp-po-Avatar-icon { - border-radius: 50%; - height: 30px; - width: 30px; -} + border-radius: 50%; + width: 30px; + height: 30px; +} + +/*Avatar name*/ + +.Avatar--name { + color: var(--white); + font: var(--p-2-bold); + text-transform: uppercase; + background-color: var(--grey); + border-radius: 50%; + min-width: 30px; + height: 30px; + justify-content: center; +} \ No newline at end of file diff --git a/packages/style/src/components/dp-po-breadcrumbs.css b/packages/style/src/components/dp-po-breadcrumbs.css index bd269476..5a1ceddd 100644 --- a/packages/style/src/components/dp-po-breadcrumbs.css +++ b/packages/style/src/components/dp-po-breadcrumbs.css @@ -1,22 +1,24 @@ -/* breadcrumbs */ +/*breadcrumbs*/ +.dp-po-Breadcrumbs-wrap { + border-bottom: 2px solid var(--grey-light); +} .dp-po-Breadcrumbs { - align-items: center; - border-bottom: 2px solid var(--grey-light); display: flex; + align-items: center; justify-content: flex-start; - list-style: none; - margin: 0; padding: 5px 10px 5px 0; position: relative; width: 100%; + list-style: none; + margin: 0; } .dp-po-Breadcrumb-item { - display: flex; margin: 0; margin-right: 25px; position: relative; + display: flex; } .dp-po-Breadcrumb-item:not(:first-child)::before { @@ -24,8 +26,8 @@ content: ""; display: block; height: 8px; - left: -14px; position: absolute; + left: -14px; top: calc(50% - 6px); transform: rotate(-45deg); width: 1px; @@ -37,8 +39,8 @@ content: ""; display: block; height: 8px; - left: -14px; position: absolute; + left: -14px; transform: rotate(45deg); width: 1px; } @@ -48,24 +50,24 @@ background-color: var(--brand-primary); } -.dp-po-Breadcrumb-item:last-child .dp-po-Breadcrumb-link::after { - background-color: var(--brand-primary); - content: ""; - height: 2px; - left: 0; - position: absolute; - top: calc(100% + 5px); - width: 100%; +.dp-po-Breadcrumb-item:last-child .dp-po-Breadcrumb-link:after { + position: absolute; + content: ""; + left: 0; + top: calc(100% + 5px); + width: 100%; + height: 2px; + background-color: var(--brand-primary); } .dp-po-Breadcrumb-link { align-items: center; - color: var(--grey-darkest); cursor: pointer; display: flex; - font: var(--p-2-bold); - position: relative; text-decoration: none; + position: relative; + font: var(--p-2-bold); + color: var(--grey-darkest); } .dp-po-Breadcrumb-item .dp-po-Breadcrumb-link { @@ -73,20 +75,20 @@ } .dp-po-Breadcrumb-item:hover .dp-po-Breadcrumb-link { - color: var(--brand-primary); + color: var(--brand-primary); } -.dp-po-Breadcrumb-item:hover + .dp-po-Breadcrumb-item::before, -.dp-po-Breadcrumb-item:hover + .dp-po-Breadcrumb-item::after { +.dp-po-Breadcrumb-item:hover + .dp-po-Breadcrumb-item:before, +.dp-po-Breadcrumb-item:hover + .dp-po-Breadcrumb-item:after { background-color: var(--brand-primary); -} +} .dp-po-Breadcrumb-item:hover:not(:first-child)::before, .dp-po-Breadcrumb-item:hover:not(:first-child)::after { - background-color: var(--brand-primary); + background-color: var(--brand-primary); } .dp-po-Breadcrumb-item:first-child .dp-po-Breadcrumb-link, .dp-po-Breadcrumb-item.is-selected .dp-po-Breadcrumb-link { - color: var(--grey-darkest); + color: var(--grey-darkest); } diff --git a/packages/style/src/components/dp-po-buttons.css b/packages/style/src/components/dp-po-buttons.css index eb081ca9..24893097 100644 --- a/packages/style/src/components/dp-po-buttons.css +++ b/packages/style/src/components/dp-po-buttons.css @@ -1,66 +1,66 @@ /* main buttons style */ .dp-po-Button { - align-items: center; background-repeat: no-repeat; - border: none; border-radius: 4px; + border: none; cursor: pointer; - display: flex; - height: 100%; - justify-content: center; line-height: 100%; position: relative; width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; } -/* Button--small */ +/*Button--small*/ .dp-po-Button.Button--small { - background-color: var(--brand-primary); - color: var(--white); font: var(--p-2-bold); - height: 39px; - max-width: max-content; + color: var(--white); + background-color: var(--brand-primary); min-width: 125px; + max-width: max-content; + height: 39px; } .dp-po-Button.Button--small:hover { background-color: rgba(58, 141, 222, 0.6); } -/* button/small/secondary */ +/*button/small/secondary*/ .dp-po-Button.Button--secondary { background-color: var(--white); - border: 2px solid var(--grey-light); color: var(--grey-dark); + border: 2px solid var(--grey-light); } .dp-po-Button.Button--secondary:hover { background-color: var(--grey-lighter); } -/* Button--medium */ +/*Button--medium*/ .dp-po-Button.Button--medium { - background-color: var(--grey-light); - color: var(--grey-darkest); font: var(--h-5); - height: 39px; width: 240px; + height: 39px; + color: var(--grey-darkest); + background-color: var(--grey-light); } .dp-po-Button.Button--medium:hover { background-color: rgba(211, 214, 215, 0.6); } -/* Button--large */ +/*Button--large*/ .dp-po-Button.Button--large { + font: var(--p-2-bold); background: var(--brand-primary); color: var(--white); - font: var(--p-2-bold); max-height: 44px; min-width: 254px; padding: 14px 0; @@ -70,18 +70,18 @@ background-color: rgba(58, 141, 222, 0.6); } -/* Button--large-icon */ +/*Button--large-icon*/ .dp-po-Button.Button--large-icon { - justify-content: space-between; max-width: max-content; + justify-content: space-between; } .dp-po-Button.Button--large-icon .dp-po-Icon { margin: 0 0 0 25px; } -/* Button--xlarge */ +/*Button--xlarge*/ .dp-po-Button.Button--xlarge { max-width: 254px; @@ -93,94 +93,94 @@ border-radius: 2px; color: var(--grey-dark); font: var(--p-xl); - justify-content: flex-start; - max-height: 18px; max-width: 74px; + max-height: 18px; padding: 1px 5px; + justify-content: flex-start; } .Button--filter:hover { background-color: var(--grey-lightest); } -/* button/icon-text/large */ +/*button/icon-text/large*/ .dp-po-Button.Button--icon { background-color: var(--white); border: 1.5px solid var(--grey-lighter); color: var(--grey-dark); font: var(--h-5); - height: 44px; justify-content: flex-start; padding: 0; + height: 44px; } .Button--large.Button--icon .dp-po-Icon { - background-size: 28px 27px; - height: 27px; width: 28px; + height: 27px; + background-size: 28px 27px; } .dp-po-Button.Button--icon:hover { background-color: var(--info-light); - border-color: var(--brand-primary); color: var(--brand-primary); + border-color: var(--brand-primary); } .dp-po-Button.Button--icon .dp-po-Icon { margin: 0 10px; } -/* button/icon-text/small */ +/*button/icon-text/small*/ .dp-po-Button.Button--small.Button--icon { - background-color: var(--grey-lighter); - border: none; - border-radius: 2px; - color: var(--grey-dark); font: var(--font-p1); + color: var(--grey-dark); max-height: 24px; + border: none; + border-radius: 2px; + background-color: var(--grey-lighter); } .dp-po-Button.Button--small.Button--icon:hover { - background-color: var(--brand-primary); color: var(--white); + background-color: var(--brand-primary); } .Button--small.Button--icon .dp-po-Icon { - background-size: 7px 13px; - height: 13px; width: 7px; + height: 13px; + background-size: 7px 13px; } -/* button/text-icon */ +/*button/text-icon*/ .dp-po-Button.Button--texticon { background-color: var(--grey-light); - color: var(--grey-darkest); font: var(--p-2-bold); + color: var(--grey-darkest); + width: max-content; height: 44px; - justify-content: space-between; min-width: 160px; + justify-content: space-between; padding: 0 12px; - width: max-content; } .dp-po-Button.Button--texticon:hover { - background-color: var(--brand-primary); color: var(--white); + background-color: var(--brand-primary); } .dp-po-Button:hover .dp-po-Icon svg { fill: var(--white); } -/* button/votes */ +/*button/votes*/ .split-button { + display: flex; align-items: center; border-radius: 2px; - display: flex; list-style: none; padding: 0; text-transform: uppercase; @@ -195,48 +195,48 @@ } .split-button li { - align-items: center; - background: rgba(58, 141, 222, 0.6); - background-color: var(--brand-primary); color: var(--white); - cursor: pointer; + background-color: var(--brand-primary); display: flex; - font: var(--h-s-semibold); + align-items: center; justify-content: center; margin: 0; - max-height: 24px; padding: 5px 10px; text-align: center; + background: rgba(58, 141, 222, 0.6); + font: var(--h-s-semibold); + max-height: 24px; + cursor: pointer; } .split-button li:first-child { + font: var(--h-l-semibold); background-color: var(--brand-primary); + border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-right: 1px solid var(--white); - border-top-left-radius: 3px; - font: var(--h-l-semibold); padding: 5px 15px; } .split-button li:last-child { - border-bottom-right-radius: 3px; border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } -/* button/icon-text */ +/*button/icon-text*/ .dp-po-Button.Button--icon-text { background-color: var(--grey-lighter); border-radius: 2px; color: var(--grey-dark); font: var(--h-l-semibold); - max-height: 24px; max-width: max-content; + max-height: 24px; } .Button--icon-text:hover { - background-color: var(--brand-primary); color: var(--white); + background-color: var(--brand-primary); } .Button--icon-text:hover svg { @@ -275,9 +275,9 @@ /* Forms/radiobutton */ .dp-po-RadioWrapper .dp-po-RadioItem { - align-items: center; - display: flex; margin-bottom: 15px; + display: flex; + align-items: center; } .dp-po-RadioWrapper input[type="radio"] { @@ -290,10 +290,10 @@ border-radius: 100%; content: ""; display: inline-block; - height: 16px; margin: 0; outline: none; padding: 2px; + height: 16px; width: 16px; } @@ -303,8 +303,8 @@ .dp-po-RadioWrapper [type="radio"]:checked + label, .dp-po-RadioWrapper [type="radio"]:not(:checked) + label { - color: var(--grey-darkest); cursor: pointer; font: var(--h-6); padding-left: 10px; + color: var(--grey-darkest); } diff --git a/packages/style/src/components/dp-po-calender.css b/packages/style/src/components/dp-po-calender.css new file mode 100644 index 00000000..03ac5960 --- /dev/null +++ b/packages/style/src/components/dp-po-calender.css @@ -0,0 +1,23 @@ + +.dp-calendar { + border: 1px solid var(--grey-light); + background-color: var(--grey-lighter); + border-radius: 4px; + display: inline-block; + list-style: none; + padding: 0; + margin: 0; +} + +.dp-calendar li { + color: var(--grey-darkest); + font-size: 19px; + text-align: center; + margin: 0; + line-height: 1.2; + padding: 5px; +} + +.dp-calendar li:first-child { + border-bottom: 1px solid var(--grey-light); +} diff --git a/packages/style/src/components/dp-po-cards.css b/packages/style/src/components/dp-po-cards.css index da8b1d65..12b95002 100644 --- a/packages/style/src/components/dp-po-cards.css +++ b/packages/style/src/components/dp-po-cards.css @@ -1,39 +1,39 @@ .dp-po-card-atom { - border: 2px solid var(--grey-light); - border-radius: 6px; - max-width: 300px; + border: 2px solid var(--grey-light); + border-radius: 6px; + max-width: 300px; } .dp-po-card-atom:hover { - border-color: var(--brand-primary); - box-shadow: var(--shadow-bottom-right); + border-color: var(--brand-primary); + box-shadow: var(--shadow-bottom-right); } .dp-po-card-title { - background-color: var(--grey-lightest); - border-bottom: 1px solid var(--grey-light); - border-top-left-radius: 6px; - border-top-right-radius: 6px; - font: var(--h-3); - padding: 15px; + font: var(--h-3); + background-color: var(--grey-lightest); + border-bottom: 1px solid var(--grey-light); + padding: 15px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; } .dp-po-card-content { - padding: 15px; + padding: 15px; } .dp-po-content-txt { - color: var(--grey-darkest); - font: var(--p-1); - margin-bottom: 15px; + font: var(--p-1); + color: var(--grey-darkest); + margin-bottom: 15px; } .dp-po-content-txt.content-txt--large { - font: var(--h-5-medium); + font: var(--h-5-medium); } -/* card-atom--long */ +/*card-atom--long*/ .dp-po-card-atom.card-atom--long { - max-width: 100%; + max-width: 100%; } diff --git a/packages/style/src/components/dp-po-date.css b/packages/style/src/components/dp-po-date.css index 7a397ffb..b99ac02f 100644 --- a/packages/style/src/components/dp-po-date.css +++ b/packages/style/src/components/dp-po-date.css @@ -1,23 +1,23 @@ .dp-calendar { - background-color: var(--grey-lighter); - border: 1px solid var(--grey-light); - border-radius: 4px; - display: inline-block; - list-style: none; - margin: 0; - padding: 0; + border: 1px solid var(--grey-light); + background-color: var(--grey-lighter); + border-radius: 4px; + display: inline-block; + list-style: none; + padding: 0; + margin: 0; } .dp-calendar li { - color: var(--grey-darkest); - font: var(--h-3); - line-height: 1.2; - margin: 0; - padding: 5px; - text-align: center; + color: var(--grey-darkest); + font: var(--h-3); + text-align: center; + margin: 0; + line-height: 1.2; + padding: 5px; } .dp-calendar li:first-child { - border-bottom: 1px solid var(--grey-light); + border-bottom: 1px solid var(--grey-light); } diff --git a/packages/style/src/components/dp-po-dividers.css b/packages/style/src/components/dp-po-dividers.css index cdd497d1..efa473fb 100644 --- a/packages/style/src/components/dp-po-dividers.css +++ b/packages/style/src/components/dp-po-dividers.css @@ -1,28 +1,28 @@ .dp-po-divider { - border-bottom: 2px solid var(--grey-light); - display: flex; + display: flex; + border-bottom: 2px solid var(--grey-light); } .dp-po-divider-title { - align-items: center; - border-bottom: 2px solid var(--brand-primary); - color: var(--grey-darkest); - display: flex; - font: var(--h-2); - margin-bottom: -2px; + display: flex; + align-items: center; + color: var(--grey-darkest); + border-bottom: 2px solid var(--brand-primary); + font: var(--h-2); + margin-bottom: -2px; } .dp-po-divider-link { - align-items: flex-end; - background-color: var(--white); - color: var(--brand-primary); - display: flex; - font: var(--b-1-semibold); - line-height: 1; - margin: 0 0 -8px auto; - padding-left: 5px; + color: var(--brand-primary); + font: var(--b-1-semibold); + display: flex; + align-items: flex-end; + line-height: 1; + background-color: var(--white); + margin: 0 0 -8px auto; + padding-left: 5px; } .dp-po-divider-link .dp-po-arrow { - margin-left: 5px; + margin-left: 5px; } diff --git a/packages/style/src/components/dp-po-dropdown.css b/packages/style/src/components/dp-po-dropdown.css index 42363fca..88627329 100644 --- a/packages/style/src/components/dp-po-dropdown.css +++ b/packages/style/src/components/dp-po-dropdown.css @@ -1,74 +1,76 @@ .dp-po-Dropdown-container { - max-width: 236px; - position: relative; - width: 100%; + position: relative; + width: 100%; + max-width: 236px; } .dp-po-dropdown-atom { - align-items: center; - background-color: var(--grey-lighter); - border-radius: 4px; - color: var(--grey-darkest); - cursor: pointer; - display: flex; - font: var(--p-1); - justify-content: space-between; - padding: 6px 10px; - position: relative; + color: var(--grey-darkest); + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + font: var(--p-1); + position: relative; + background-color: var(--grey-lighter); + border-radius: 4px; + padding: 6px 10px; } .dp-po-dropdown-atom .dp-po-arrow { - background-color: transparent; - border: 0; + border: 0; + background-color: transparent } .dp-po-dropdown-atom + .dp-po-dropdown-menu { - display: none; + display: none; } .dp-po-dropdown-atom.is-active + .dp-po-dropdown-menu { - display: block; + display: block; } .dp-po-dropdown-atom.is-active { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } .dp-po-dropdown-atom.is-active .dp-po-arrow { - transform: rotate(-90deg); + transform: rotate(-90deg); } .dp-po-dropdown-menu { - background-color: var(--grey-lighter); - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - list-style: none; - margin-bottom: 0; - padding: 0; + list-style: none; + padding: 0; + background-color: var(--grey-lighter); + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + margin-bottom: 0; } .dp-po-dropdown-menu .dp-po-dropdown-menu-item { - cursor: pointer; - font: var(--p-2); - margin: 0; - padding: 5px 10px; + margin: 0; + padding: 5px 10px; + cursor: pointer; + font: var(--p-2); + display: flex; + align-items: center; } .dp-po-dropdown-menu .dp-po-dropdown-menu-item:hover { - background-color: var(--info-light); - color: var(--brand-primary); + color: var(--brand-primary); + background-color: var(--info-light); } -/* dropdown/search-expand/text-icon */ +/*dropdown/search-expand/text-icon*/ .dp-po-dropdown-atom.dp-po-search-expand { - background-color: transparent; - border-bottom: 1px solid var(--grey-lighter); - border-radius: 0; - padding: 6px 0; + background-color: transparent; + border-bottom: 1px solid var(--grey-lighter); + border-radius: 0; + padding: 6px 0; } .dp-po-search-expand:hover > .dp-po-txt { - color: var(--brand-primary); + color: var(--brand-primary); } diff --git a/packages/style/src/components/dp-po-icontext.css b/packages/style/src/components/dp-po-icontext.css index 63e6b0b5..139ffd69 100644 --- a/packages/style/src/components/dp-po-icontext.css +++ b/packages/style/src/components/dp-po-icontext.css @@ -1,83 +1,83 @@ .dp-po-Icon-wrapper { - align-items: center; - color: var(--grey-darkest); - display: flex; + color: var(--grey-darkest); + display: flex; + align-items: center; } .dp-po-Icon-wrapper.Icon--large { - color: var(--brand-primary); - font: var(--h-3); + font: var(--h-3); + color: var(--brand-primary); } .dp-po-Icon-wrapper .dp-po-Icon { - position: relative; + position: relative; } -.dp-po-Icon-wrapper .dp-po-Icon::after { - border-radius: 50%; - content: ""; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - z-index: -1; +.dp-po-Icon-wrapper .dp-po-Icon:after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + border-radius: 50%; } .dp-po-Icon-wrapper.Icon--large .dp-po-Icon, .dp-po-Icon-wrapper.Icon--medium .dp-po-Icon { - border-radius: 50%; + border-radius: 50%; } .dp-po-Icon-wrapper.Icon--large .dp-po-Icon { - height: 55px; - width: 55px; + width: 55px; + height: 55px; } .dp-po-Icon-wrapper.Icon--medium .dp-po-Icon { - height: 43px; - width: 43px; + width: 43px; + height: 43px; } -.dp-po-Icon-wrapper.Wrapper--light-primary .dp-po-Icon::after { - background: rgba(58, 141, 222, 0.35); +.dp-po-Icon-wrapper.Wrapper--light-primary .dp-po-Icon:after { + background: rgba(58, 141, 222, 0.35); } -.dp-po-Icon-wrapper.Wrapper--brand-primary .dp-po-Icon::after { - background: var(--brand-primary); +.dp-po-Icon-wrapper.Wrapper--brand-primary .dp-po-Icon:after { + background: var(--brand-primary); } .dp-po-Icon-wrapper.Icon--medium { - font: var(--h-3); + font: var(--h-3); } .dp-po-Icon-wrapper.Icon--small { - font: var(--p-2-bold); + font: var(--p-2-bold); } .dp-po-Icon-wrapper .dp-po-Icon { - margin-right: 6px; + margin-right: 6px; } .dp-po-Icon-wrapper.Icon--centred-stacked { - display: flex; - flex-direction: column; - max-width: max-content; + display: flex; + flex-direction: column; + max-width: max-content; } .dp-po-Icon-wrapper.Icon--centred-stacked.Icon--medium, .dp-po-Icon-wrapper.Icon--centred-stacked.Icon--large { - font: var(--h-5-medium); + font: var(--h-5-medium); } .dp-po-Icon-wrapper.Icon--centred-stacked .dp-po-Icon { - margin: 0 0 5px; + margin: 0 0 5px; } .dp-po-Icon-wrapper.Icon--centred-stacked .dp-po-Icon.Icon--elephant { - background-position: 70% 70%; + background-position: 70% 70%; } .dp-po-Icon-wrapper.Icon--centred-stacked .dp-po-Icon.Icon--article { - background-size: 21px 26px; + background-size: 21px 26px; } diff --git a/packages/style/src/components/dp-po-labels.css b/packages/style/src/components/dp-po-labels.css index 7dd9d7c7..df20abae 100644 --- a/packages/style/src/components/dp-po-labels.css +++ b/packages/style/src/components/dp-po-labels.css @@ -1,295 +1,272 @@ -@import "../fonts.css"; -@import "../vars.css"; - /* labels */ .dp-po-label { - align-items: center; - background: var(--white); - border: none; - border-radius: 2px; - color: var(--grey-darkest); - cursor: pointer; - display: flex; - font: var(--b-3); - justify-content: center; - line-height: 1; - max-width: max-content; - padding: 5px; - position: relative; + background: var(--white); + color: var(--grey-darkest); + font: var(--b-3); + border-radius: 2px; + cursor: pointer; + line-height: 1; + border: none; + padding: 5px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + max-width: max-content; } .dp-po-label.label--small { - font: var(--b-3-semibold); - height: 15px; - text-transform: uppercase; + height: 15px; + font: var(--b-3-semibold); + text-transform: uppercase; } .dp-po-label.label--medium { - font: var(--p-3-semibold); - height: 22px; - padding: 4px 10px; + height: 22px; + font: var(--p-3-semibold); + padding: 4px 10px; } .dp-po-label.label--large { - font: var(--p-3-semibold); - height: 22px; - padding: 4px 15px; + height: 22px; + padding: 4px 15px; + font: var(--p-3-semibold); } -/* .dp-po-label:hover { background: var(--grey-light); } */ +/*.dp-po-label:hover { background: var(--grey-light); }*/ .dp-po-label.label--brand-primary { - background-color: var(--brand-primary); - border: 1px solid var(--brand-primary); - color: var(--white); + background-color: var(--brand-primary); + border: 1px solid var(--brand-primary); + color: var(--white); } .dp-po-label.label--white { - background: var(--white); - border: 1px solid var(--white); - color: var(--grey-darkest); - - & - :hover { - background: var(--grey-light); - } - + background: var(--white); + border: 1px solid var(--white); + color: var(--grey-darkest); + &:hover { background: var(--grey-light); } } .dp-po-label.label--transparent { - background: transparent; - border: 1px solid #6e8293; - color: #6e8293; - - & - :hover { - background: var(--grey-light); - } - + background: transparent; + border: 1px solid #6e8293; + color: #6e8293; + &:hover { background: var(--grey-light); } } .dp-po-label.label--disabled { - background-color: #e1e0e0; - border: 1px solid #d3d6d7; - color: #4e4d4d; - - & - :hover { - background-color: rgba(225, 224, 224, 0.5); - } - + background-color: #e1e0e0; + border: 1px solid #d3d6d7; + color: #4e4d4d; + &:hover { background-color: rgba(225, 224, 224, 0.5); } } .dp-po-label.label--close { - background: #fafafa; - border: 1px solid #dde0e0; - color: #4e4d4d; - padding: 1px 20px 1px 9px; - - & - :hover { - background: color-mod(#fafafa blackness(20%)); - } - + background: #fafafa; + border: 1px solid #dde0e0; + color: #4e4d4d; + padding: 1px 20px 1px 9px; + &:hover { background: color-mod(#fafafa blackness(20%)); } } .dp-po-label.label--primary-light { - background-color: var(--primary-light); - color: var(--white); + background-color: var(--primary-light); + color: var(--white); } .dp-po-label.label--grey-darkest { - background-color: var(--grey-darkest); - color: var(--white); + background-color: var(--grey-darkest); + color: var(--white); } .dp-po-label.label--grey-dark { - background-color: var(--grey-dark); - color: var(--white); + background-color: var(--grey-dark); + color: var(--white); } .dp-po-label.label--grey-light { - background-color: var(--grey-light); - color: var(--white); + background-color: var(--grey-light); + color: var(--white); } .dp-po-label.label--grey-lightest { - background-color: var(--grey-lightest); - color: var(--white); + background-color: var(--grey-lightest); + color: var(--white); } .dp-po-label.label--info { - background-color: var(--info); - color: var(--white); + background-color: var(--info); + color: var(--white); } .dp-po-label.label--info-light { - background-color: var(--info-light); - border: 1px solid var(--info-light); - color: var(--grey-darkest); + background-color: var(--info-light); + border: 1px solid var(--info-light); + color: var(--grey-darkest); } .dp-po-label.label--warning-light { - background-color: var(--warning-light); + background-color: var(--warning-light); } .dp-po-label.label--grey-lighter { - background: var(--grey-lighter); - border: 1px solid var(--grey-lighter); - color: var(--grey-dark); + background: var(--grey-lighter); + border: 1px solid var(--grey-lighter); + color: var(--grey-dark); } .dp-po-label.label--grey { - background: var(--grey); - border: 1px solid var(--grey); - color: var(--white); + background: var(--grey); + border: 1px solid var(--grey); + color: var(--white); } .dp-po-label.label--purple { - background: var(--purple-light); - border: 1px solid var(--purple); - color: var(--grey-darkest); + background: var(--purple-light); + border: 1px solid var(--purple); + color: var(--grey-darkest); } .dp-po-label.label--pink { - background: var(--pink); - border: 1px solid var(--pink); - color: var(--white); + background: var(--pink); + border: 1px solid var(--pink); + color: var(--white); } .dp-po-label.label--success { - background: var(--success); - border: 1px solid var(--success); - color: var(--white); + background: var(--success); + border: 1px solid var(--success); + color: var(--white); } .dp-po-label.label--warning { - background: var(--warning); - border: 1px solid var(--warning); - color: var(--white); + background: var(--warning); + border: 1px solid var(--warning); + color: var(--white); } .dp-po-label.label--danger { - background: var(--danger); - border: 1px solid var(--danger); - color: var(--white); + background: var(--danger); + border: 1px solid var(--danger); + color: var(--white); } .dp-po-label.label--neutral { - background: var(--neutral); - border: 1px solid var(--neutral); - color: var(--white); + background: var(--neutral); + border: 1px solid var(--neutral); + color: var(--white); } .dp-po-label.label--neutral-light { - background: var(--neutral-light); - border: 1px solid var(--neutral-light); - color: var(--grey-darkest); + background: var(--neutral-light); + border: 1px solid var(--neutral-light); + color: var(--grey-darkest); } .dp-po-label + .dp-po-label { - margin-left: 5px; + margin-left: 5px; } .dp-po-labels:first-child { - margin-left: 0; + margin-left: 0; } -/* label/time-ago/box */ +/*label/time-ago/box*/ .dp-po-label.label--time-box { - background-color: var(--grey-lighter); - font: var(--b-1-semibold); + background-color: var(--grey-lighter); + font: var(--b-1-semibold); } .label--time .dp-po-Icon, .label--time-box .dp-po-Icon { - margin-right: 5px; + margin-right: 5px; } .dp-po-label.label--time { - font: var(--b-2-semibold); - font-weight: 400; - padding: 0; + font: var(--b-2-semibold); + font-weight: 400; + padding: 0; } /* label/box-icon-text */ .dp-po-filter { - background-color: var(--white); - border: 1px solid var(--grey-light); - border-radius: 2px; - color: var(--grey-dark); - cursor: pointer; - display: inline-block; - font: var(--b-2); - padding: 0 10px 0 20px; - position: relative; + display: inline-block; + border: 1px solid var(--grey-light); + color: var(--grey-dark); + font: var(--b-2); + cursor: pointer; + padding: 0 10px 0 20px; + border-radius: 2px; + position: relative; + background-color: var(--white); } .dp-po-filter:hover { - background-color: var(--grey-lightest); + background-color: var(--grey-lightest); } .dp-po-filter .dp-po-iconClose { - left: 5px; - right: auto; - top: calc(50% - 5px); + right: auto; + left: 5px; + top: calc(50% - 5px); } .dp-po-filter:not(:last-child) { - margin-right: 10px; + margin-right: 10px; } /* Badges */ .dp-po-Badge { - align-items: center; - border-radius: 50%; - box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.1); - color: var(--white); - cursor: pointer; - display: flex; - font: var(--p-n-semibold); - height: 22px; - justify-content: center; - width: 22px; + display: flex; + align-items: center; + justify-content: center; + color: var(--white); + font: var(--p-n-semibold); + cursor: pointer; + border-radius: 50%; + box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.1); + width: 22px; + height: 22px; } .dp-po-Badge.Badge--large { - font: var(--h-3--medium); - height: 34px; - width: 34px; + font: var(--h-3--medium); + height: 34px; + width: 34px; } .dp-po-Badge.Badge--small { - font: var(--b-2-semibold); - height: 22px; - width: 22px; + font: var(--b-2-semibold); + height: 22px; + width: 22px; } .dp-po-Badge.Badge--danger { - background-color: var(--danger); + background-color: var(--danger); } .dp-po-Badge.Badge--brand-primary { - background-color: var(--brand-primary); + background-color: var(--brand-primary); } .dp-po-Badge.Badge--bottom { - bottom: 0; - position: absolute; - right: 0; + position: absolute; + bottom: 0; + right: 0; } .dp-po-Badge.Badge--top { - position: absolute; - right: 0; - top: 0; + position: absolute; + top: 0; + right: 0; } .dp-po-Icon .dp-po-Badge.Badge--brand-primary { - background-color: var(--brand-primary); - color: var(--white); + background-color: var(--brand-primary); + color: var(--white); } diff --git a/packages/style/src/components/dp-po-link.css b/packages/style/src/components/dp-po-link.css index 086a9b2d..c61b4e85 100644 --- a/packages/style/src/components/dp-po-link.css +++ b/packages/style/src/components/dp-po-link.css @@ -1,34 +1,34 @@ .dp-po-Link { - align-items: center; - color: var(--grey-darkest); - display: flex; - line-height: 1; - position: relative; - text-decoration: none; + color: var(--grey-darkest); + text-decoration: none; + display: flex; + align-items: center; + line-height: 1; + position: relative; } -.dp-po-Link .dp-po-arrow { - margin: 0 5px; +.dp-po-Link .dp-po-arrow{ + margin: 0 5px; } .dp-po-Link:hover { - color: var(--info); + color: var(--info); } .dp-po-Link.Link--small { - color: var(--brand-primary); - display: flex; - font: var(--b-1-semibold); - justify-content: space-between; - max-width: 120px; - width: 100%; + font: var(--b-1-semibold); + color: var(--brand-primary); + width: 100%; + max-width: 120px; + display: flex; + justify-content: space-between; } .dp-po-Link.Link--medium { - color: var(--brand-primary); - font: var(--p-2-bold); + font: var(--p-2-bold); + color: var(--brand-primary); } .dp-po-Link.Link--large { - font: var(--h-3); + font: var(--h-3); } diff --git a/packages/style/src/components/dp-po-lists.css b/packages/style/src/components/dp-po-lists.css index e9ae37a1..f236cb89 100644 --- a/packages/style/src/components/dp-po-lists.css +++ b/packages/style/src/components/dp-po-lists.css @@ -1,119 +1,119 @@ .dp-po-list { - color: var(--grey); - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; + color: var(--grey); } .dp-po-list .dp-po-title-item { - color: var(--grey-darkest); - display: flex; - font: var(--h-2); - margin-bottom: 10px; + font: var(--h-2); + color: var(--grey-darkest); + margin-bottom: 10px; + display: flex; } .dp-po-list input { - border: none; - border-bottom: 1px solid var(--grey-light); - color: var(--grey-darkest); - font: var(--p-1); - outline: none; - padding: 10px 0; + border: none; + border-bottom: 1px solid var(--grey-light); + outline: none; + padding: 10px 0; + color: var(--grey-darkest); + font: var(--p-1); } .dp-po-list input::placeholder { - color: var(--grey); + color: var(--grey); } .dp-po-subtitle { - align-items: center; - display: flex; - font: var(--p-2-bold); + display: flex; + align-items: center; + font: var(--p-2-bold); } .dp-po-subtitle .dp-po-Avatar { - margin-right: 10px; + margin-right: 10px; } -.dp-po-Icon.Icon--date { - margin-left: 20px; - position: relative; +.dp-po-list .dp-po-subtitle .dp-po-Icon.Icon--date { + margin-left: 20px; + position: relative; } -.dp-po-Icon.Icon--comment { - margin-left: 20px; - position: relative; +.dp-po-list .dp-po-subtitle .dp-po-Icon.Icon--comment { + margin-left: 20px; + position: relative; } -.dp-po-list .dp-po-subtitle .dp-po-Icon.Icon--date::after, -.dp-po-list .dp-po-subtitle .dp-po-Icon.Icon--comment::after { - background-color: var(--grey); - content: ""; - height: 100%; - left: -10px; - position: absolute; - top: 0; - width: 1px; +.dp-po-list .dp-po-subtitle .dp-po-Icon.Icon--date:after, +.dp-po-list .dp-po-subtitle .dp-po-Icon.Icon--comment:after { + content: ''; + position: absolute; + width: 1px; + height: 100%; + background-color: var(--grey); + top: 0; + left: -10px; } .dp-po-list .dp-po-subtitle .dp-po-Icon { - margin-right: 10px; + margin-right: 10px; } .label-knowledgebase { - align-items: center; - display: flex; + display: flex; + align-items: center; } .label-knowledgebase .dp-po-Icon { - margin-right: 5px; + margin-right: 5px; } -/* small-title-list-item */ +/*small-title-list-item*/ .small--title-list-item .dp-po-title-item { - font: var(--p-2-bold); - justify-content: space-between; + font: var(--p-2-bold); + justify-content: space-between; } input.dp-po-input-avatar { - padding-left: 30px; + padding-left: 30px; } -/* large-icon-list-item */ +/*large-icon-list-item*/ .dp-po-list.large--title-list-item { - flex-direction: row; + flex-direction: row; } .dp-po-list.large--title-list-item .dp-po-title-item { - font: var(--h-3); - line-height: 1; - margin-bottom: 0; + margin-bottom: 0; + font: var(--h-3); + line-height: 1; } .dp-po-list.large--title-list-item input { - border-bottom: none; - border-right: 2px solid var(--grey-lighter); - margin-right: 25px; - max-width: 185px; - padding: 0 10px 0 30px; + border-bottom: none; + padding: 0 10px 0 30px; + margin-right: 25px; + max-width: 185px; + border-right: 2px solid var(--grey-lighter); } .dp-po-Button.Button--texticon { - margin-left: auto; - margin-right: 0; + margin-right: 0; + margin-left: auto; } .dp-po-zip { - align-items: center; - background-color: var(--grey-lighter); - border-radius: 2px; - display: flex; - justify-content: center; - margin-right: 20px; - padding: 5px 10px; + display: flex; + align-items: center; + justify-content: center; + padding: 5px 10px; + background-color: var(--grey-lighter); + border-radius: 2px; + margin-right: 20px; } .dp-po-large-input { - display: flex; -} + display: flex; +} \ No newline at end of file diff --git a/packages/style/src/components/dp-po-pagination.css b/packages/style/src/components/dp-po-pagination.css index 08776555..1641b03b 100644 --- a/packages/style/src/components/dp-po-pagination.css +++ b/packages/style/src/components/dp-po-pagination.css @@ -57,8 +57,8 @@ .dp-po-PageNumber.is-disabled { background: var(--grey-light); - border: none; color: var(--white); + border: none; } .dp-po-PaginationArrows { @@ -66,12 +66,12 @@ } .dp-po-PaginationArrows { - align-items: center; - display: flex; - height: 20px; - justify-content: center; outline: none; width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; } .dp-po-Pagination-container a:hover { @@ -110,13 +110,13 @@ color: var(--grey-darkest); font: var(--p-n); height: 20px; - line-height: 2; margin-left: 10px; margin-right: 5px; max-width: 34px; - outline: none; position: relative; text-align: center; + line-height: 2; + outline: none; } .dp-po-PageJump .dp-po-PageJump-page:focus { @@ -133,11 +133,11 @@ border-radius: 3px; color: var(--white); font: var(--b-2-semibold); - max-height: 20px; max-width: 25px; - min-width: auto; + max-height: 20px; padding: 3px 4px; width: auto; + min-width: auto; } .dp-po-PageJump .dp-po-Button.Button--grey { diff --git a/packages/style/src/components/dp-po-popups.css b/packages/style/src/components/dp-po-popups.css index 87aa24c2..2cfa010f 100644 --- a/packages/style/src/components/dp-po-popups.css +++ b/packages/style/src/components/dp-po-popups.css @@ -1,49 +1,49 @@ -/* Popup--icon */ +/*Popup--icon*/ .dp-po-Popup.Popup--icon { - align-items: center; - background-color: var(--grey-lightest); - border-radius: 3px; - box-shadow: var(--shadow-bottom-right); - color: var(--grey-dark); - display: flex; - font: var(--p-2-bold); - padding: 15px; - position: relative; + color: var(--grey-dark); + font: var(--p-2-bold); + box-shadow: var(--shadow-bottom-right); + background-color: var(--grey-lightest); + border-radius: 3px; + align-items: center; + position: relative; + display: flex; + padding: 15px; } .dp-po-Popup.Popup--icon .dp-po-Icon { - margin-right: 10px; + margin-right: 10px; } .dp-po-iconClose { - cursor: pointer; - height: 100%; - height: 10px; - position: absolute; - right: 10px; - top: 10px; - width: 10px; + cursor: pointer; + height: 100%; + position: absolute; + right: 10px; + top: 10px; + width: 10px; + height: 10px; } -.dp-po-iconClose::before, -.dp-po-iconClose::after { - background-color: var(--grey-light); - bottom: 0; - content: ""; - height: 2px; - left: 0; - margin: auto; - position: absolute; - right: 0; - top: 0; - width: 10px; +.dp-po-iconClose:before, +.dp-po-iconClose:after { + content: ""; + background-color: var(--grey-light); + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 10px; + height: 2px; + margin: auto; + position: absolute; } -.dp-po-iconClose::before { - transform: rotate(45deg); +.dp-po-iconClose:before { + transform: rotate(45deg); } -.dp-po-iconClose::after { - transform: rotate(135deg); +.dp-po-iconClose:after { + transform: rotate(135deg); } diff --git a/packages/style/src/components/dp-po-progressbar.css b/packages/style/src/components/dp-po-progressbar.css index 56b31ca4..7fc3c7e4 100644 --- a/packages/style/src/components/dp-po-progressbar.css +++ b/packages/style/src/components/dp-po-progressbar.css @@ -1,36 +1,36 @@ .dp-po-progressbar { - color: var(--grey-dark); - display: flex; - justify-content: flex-end; - position: relative; - width: 100%; - z-index: 1; + display: flex; + width: 100%; + position: relative; + color: var(--grey-dark); + justify-content: flex-end; + z-index: 1; } -.dp-po-progressbar::before { - background-color: var(--grey-light); - content: ""; - height: 2px; - left: 0; - position: absolute; - top: calc(50% - 1px); - width: 100%; +.dp-po-progressbar:before { + content: ""; + position: absolute; + top: calc(50% - 1px); + left: 0; + width: 100%; + height: 2px; + background-color: var(--grey-light); } -.dp-po-progressbar::after { - background-color: var(--brand-primary); - content: ""; - height: 2px; - left: 0; - position: absolute; - top: calc(50% - 1px); - width: 58%; +.dp-po-progressbar:after { + content: ""; + position: absolute; + top: calc(50% - 1px); + left: 0; + width: 58%; + height: 2px; + background-color: var(--brand-primary); } .dp-po-progress { - background-color: var(--white); - display: flex; - font: var(--b-1-semibold); - padding-left: 20px; - z-index: 2; + z-index: 2; + display: flex; + padding-left: 20px; + background-color: var(--white); + font: var(--b-1-semibold); } diff --git a/packages/style/src/components/dp-po-scrollbar.css b/packages/style/src/components/dp-po-scrollbar.css index 2ee521d6..14df03ed 100644 --- a/packages/style/src/components/dp-po-scrollbar.css +++ b/packages/style/src/components/dp-po-scrollbar.css @@ -1,20 +1,20 @@ .dp-po-scrollbar { - background-color: var(--grey-lighter); - border-radius: 6px; - display: block; - height: 100%; - position: relative; - width: 6px; + display: block; + position: relative; + width: 6px; + height: 100%; + background-color: var(--grey-lighter); + border-radius: 6px; } .dp-po-dragger { - background-color: var(--grey-dark); - border-radius: 6px; - cursor: pointer; - height: 15%; - left: 0; - min-height: 95px; - position: absolute; - top: 0; - width: 100%; + position: absolute; + left: 0; + top: 0; + background-color: var(--grey-dark); + border-radius: 6px; + width: 100%; + height: 15%; + min-height: 95px; + cursor: pointer; } diff --git a/packages/style/src/components/dp-po-tables.css b/packages/style/src/components/dp-po-tables.css index f4568f1e..520006ac 100644 --- a/packages/style/src/components/dp-po-tables.css +++ b/packages/style/src/components/dp-po-tables.css @@ -1,64 +1,64 @@ .dp-po-TableWrapper { - display: block; - position: relative; + display: block; + position: relative; } .dp-po-Tableview { - display: block; + display: block; } .dp-po-TableRow.dp-po-TableControl { - color: var(--grey-dark); + color: var(--grey-dark); } .dp-po-TableControl .dp-po-TableItem { - font: var(--p-2-bold); + font: var(--p-2-bold); } .dp-po-TableRow { - align-items: center; - color: var(--grey-darkest); - display: flex; + align-items: center; + display: flex; + color: var(--grey-darkest); } .dp-po-TableRow > div { - align-items: center; - display: flex; - padding: 6px 13px; + align-items: center; + display: flex; + padding: 6px 13px; } .dp-po-TableRow > div:first-child { - padding: 6px 13px 6px 35px; + padding: 6px 13px 6px 35px; } .dp-po-TableItem { - font: var(--p-1); - position: relative; + position: relative; + font: var(--p-1); } .dp-po-TableControl .dp-po-TableItem .dp-po-Icon { - margin-left: 10px; + margin-left: 10px; } .dp-po-ticket { - font: var(--p-2-bold); + font: var(--p-2-bold); } .dp-po-ticket-Icon { - background-color: var(--danger); - border-radius: 50%; - height: 12px; - left: 10px; - position: absolute; - top: calc(50% - 6px); - width: 12px; + position: absolute; + left: 10px; + top: calc(50% - 6px); + background-color: var(--danger); + border-radius: 50%; + width: 12px; + height: 12px; } .dp-po-TableItem .dp-po-Avatar-icon + .dp-po-Icon { - background-color: var(--white); - margin-left: -5px; + margin-left: -5px; + background-color: var(--white); } .dp-po-TableRow.TableRow--chat > div:first-child { - padding: 6px 13px; + padding: 6px 13px; } diff --git a/packages/style/src/components/dp-po-tabs.css b/packages/style/src/components/dp-po-tabs.css index 81d04b9c..fa9eddc3 100644 --- a/packages/style/src/components/dp-po-tabs.css +++ b/packages/style/src/components/dp-po-tabs.css @@ -1,63 +1,63 @@ .dp-po-Tabs, .dp-po-Tabs .dp-po-Tabs-item { - display: flex; + display: flex; } .dp-po-Tabs { - margin: 0; - padding: 0; + padding: 0; + margin: 0; } .dp-po-Tabs-item { - align-items: center; - color: var(--grey); - cursor: pointer; - cursor: pointer; - display: flex; - font: var(--h-2); - margin-right: 20px; - margin-top: 0; - padding: 5px 0; - position: relative; + color: var(--grey); + font: var(--h-2); + cursor: pointer; + margin-right: 20px; + margin-top: 0; + padding: 5px 0; + position: relative; + cursor: pointer; + display: flex; + align-items: center; } .Tabs--Large .dp-po-Tabs-item { - border-bottom: 2px solid var(--grey-lighter); + border-bottom: 2px solid var(--grey-lighter); } .Tabs--Large .dp-po-Tabs-item:hover { - border-bottom: 2px solid var(--grey); - color: var(--grey); + color: var(--grey); + border-bottom: 2px solid var(--grey); } .Tabs--Small .dp-po-Tabs-item:hover { - color: var(--grey-dark); + color: var(--grey-dark); } .dp-po-Tabs-item.is-selected { - color: var(--grey-darkest); + color: var(--grey-darkest); } .Tabs--Large .dp-po-Tabs-item.is-selected { - border-bottom: 2px solid var(--brand-primary); + border-bottom: 2px solid var(--brand-primary); } .dp-po-Tabs-item .dp-po-qt { - margin-left: 5px; + margin-left: 5px; } .dp-po-Tabs-item .dp-po-Icon { - margin-right: 10px; + margin-right: 10px; } .dp-po-Tabs.Tabs--Large .dp-po-Tabs-item { - font: var(--h-2); - margin-right: 40px; + margin-right: 40px; + font: var(--h-2); } .dp-po-Tabs.Tabs--Small .dp-po-Tabs-item { - font: var(--p-2-bold); + font: var(--p-2-bold); } .dp-po-Tabs-item .dp-po-Icon.Icon--knowledgebase { - background-size: 15px 20px; + background-size: 15px 20px; } diff --git a/packages/style/src/components/dp-po-tooltips.css b/packages/style/src/components/dp-po-tooltips.css index 9c9090d9..f77298b2 100644 --- a/packages/style/src/components/dp-po-tooltips.css +++ b/packages/style/src/components/dp-po-tooltips.css @@ -1,8 +1,8 @@ .dp-po-Tooltip { - box-shadow: var(--shadow-bottom-right); - color: var(--grey-dark); - display: flex; - font: var(--p-1); - padding: 15px; - position: relative; + color: var(--grey-dark); + font: var(--p-1); + box-shadow: var(--shadow-bottom-right); + position: relative; + display: flex; + padding: 15px; } diff --git a/packages/style/src/custom.css b/packages/style/src/custom.css index da029f78..22f06a33 100755 --- a/packages/style/src/custom.css +++ b/packages/style/src/custom.css @@ -1,16 +1,133 @@ -/* your custom css */ +.dp-po-bold { + font-weight: var(--is-bold); +} +.dp-po-container { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} -@media only screen and (min-device-width: 360px) and (max-device-width: 736px) { +@media (min-width: 576px) { + .dp-po-container { + max-width: 540px; + } } -@media only screen and (min-width: 1024px) { +@media (min-width: 768px) { + .dp-po-container { + max-width: 720px; + } } -@media only screen and (max-width: 1023px) { +@media (min-width: 992px) { + .dp-po-container { + max-width: 960px; + } } -@media only screen and (min-width: 1400px) { +@media (min-width: 1200px) { + .dp-po-container { + max-width: 1140px; + } } -@media only screen and (min-width: 1500px) { +.dp-po-container-fluid { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; } + +.dp-po-row { + display: flex; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px; +} + +.dp-po-col-1, .dp-po-col-2, .dp-po-col-3, .dp-po-col-4, .dp-po-col-5, .dp-po-col-6, .dp-po-col-7, .dp-po-col-8, .dp-po-col-9, .dp-po-col-10, .dp-po-col-11, .dp-po-col-12, .dp-po-col, +.dp-po-col-auto, .dp-po-col-sm-1, .dp-po-col-sm-2, .dp-po-col-sm-3, .dp-po-col-sm-4, .dp-po-col-sm-5, .dp-po-col-sm-6, .dp-po-col-sm-7, .dp-po-col-sm-8, .dp-po-col-sm-9, .dp-po-col-sm-10, .dp-po-col-sm-11, .dp-po-col-sm-12, .dp-po-col-sm, +.dp-po-col-sm-auto, .dp-po-col-md-1, .dp-po-col-md-2, .dp-po-col-md-3, .dp-po-col-md-4, .dp-po-col-md-5, .dp-po-col-md-6, .dp-po-col-md-7, .dp-po-col-md-8, .dp-po-col-md-9, .dp-po-col-md-10, .dp-po-col-md-11, .dp-po-col-md-12, .dp-po-col-md, +.dp-po-col-md-auto, .dp-po-col-lg-1, .dp-po-col-lg-2, .dp-po-col-lg-3, .dp-po-col-lg-4, .dp-po-col-lg-5, .dp-po-col-lg-6, .dp-po-col-lg-7, .dp-po-col-lg-8, .dp-po-col-lg-9, .dp-po-col-lg-10, .dp-po-col-lg-11, .dp-po-col-lg-12, .dp-po-col-lg, +.dp-po-col-lg-auto, .dp-po-col-xl-1, .dp-po-col-xl-2, .dp-po-col-xl-3, .dp-po-col-xl-4, .dp-po-col-xl-5, .dp-po-col-xl-6, .dp-po-col-xl-7, .dp-po-col-xl-8, .dp-po-col-xl-9, .dp-po-col-xl-10, .dp-po-col-xl-11, .dp-po-col-xl-12, .dp-po-col-xl, +.dp-po-col-xl-auto { + position: relative; + width: 100%; + padding-right: 15px; + padding-left: 15px; +} + +.dp-po-col { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; +} + +.dp-po-col-auto { + flex: 0 0 auto; + width: auto; + max-width: 100%; +} + +.dp-po-col-1 { + flex: 0 0 8.333333%; + max-width: 8.333333%; +} + +.dp-po-col-2 { + flex: 0 0 16.666667%; + max-width: 16.666667%; +} + +.dp-po-col-3 { + flex: 0 0 25%; + max-width: 25%; +} + +.dp-po-col-4 { + flex: 0 0 33.333333%; + max-width: 33.333333%; +} + +.dp-po-col-5 { + flex: 0 0 41.666667%; + max-width: 41.666667%; +} + +.dp-po-col-6 { + flex: 0 0 50%; + max-width: 50%; +} + +.dp-po-col-7 { + flex: 0 0 58.333333%; + max-width: 58.333333%; +} + +.dp-po-col-8 { + flex: 0 0 66.666667%; + max-width: 66.666667%; +} + +.dp-po-col-9 { + flex: 0 0 75%; + max-width: 75%; +} + +.dp-po-col-10 { + flex: 0 0 83.333333%; + max-width: 83.333333%; +} + +.dp-po-col-11 { + flex: 0 0 91.666667%; + max-width: 91.666667%; +} + +.dp-po-col-12 { + flex: 0 0 100%; + max-width: 100%; +} \ No newline at end of file diff --git a/packages/style/src/demo/breadcrumbs-demo.css b/packages/style/src/demo/breadcrumbs-demo.css index 3a57eddd..10ca5cc7 100644 --- a/packages/style/src/demo/breadcrumbs-demo.css +++ b/packages/style/src/demo/breadcrumbs-demo.css @@ -1,13 +1,13 @@ .dp-po-Breadcrumb-item.Breadcrumb-item-demo { - margin-left: 15px; - margin-right: 0; + margin-left: 15px; + margin-right: 0; } .Breadcrumbs-demo .dp-po-Breadcrumb-item.is-hover .dp-po-Breadcrumb-link { - color: var(--brand-primary); + color: var(--brand-primary); } -.Breadcrumbs-demo .dp-po-Breadcrumb-item.is-hover + .dp-po-Breadcrumb-item::before, -.Breadcrumbs-demo .dp-po-Breadcrumb-item.is-hover + .dp-po-Breadcrumb-item::after { +.Breadcrumbs-demo .dp-po-Breadcrumb-item.is-hover + .dp-po-Breadcrumb-item:before, +.Breadcrumbs-demo .dp-po-Breadcrumb-item.is-hover + .dp-po-Breadcrumb-item:after { background-color: var(--brand-primary); -} +} \ No newline at end of file diff --git a/packages/style/src/demo/buttons-demo.css b/packages/style/src/demo/buttons-demo.css index 13d9de20..421d05bf 100644 --- a/packages/style/src/demo/buttons-demo.css +++ b/packages/style/src/demo/buttons-demo.css @@ -10,9 +10,9 @@ .dp-po-ButtonItem-demo { display: flex; + width: 254px; flex-direction: column; margin: 0 30px 30px 0; - width: 254px; } .Small--ButtonItem-demo { @@ -40,7 +40,7 @@ } .dp-po-StateWrapper-demo + .dp-po-ButtonItem-demo { - margin-top: 30px; + margin-top: 30px; } .dp-po-ButtonState { @@ -50,7 +50,7 @@ margin-right: 10px; } -/* Hover */ +/*Hover*/ .dp-po-Button.Button--small.is-hover { background-color: rgba(58, 141, 222, 0.6); @@ -74,18 +74,18 @@ .dp-po-Button.Button--icon.is-hover { background-color: var(--info-light); - border-color: var(--brand-primary); color: var(--brand-primary); + border-color: var(--brand-primary); } .dp-po-Button.Button--small.Button--icon.is-hover { - background-color: var(--brand-primary); color: var(--white); + background-color: var(--brand-primary); } .dp-po-Button.Button--texticon.is-hover { - background-color: var(--brand-primary); color: var(--white); + background-color: var(--brand-primary); } .split-button.is-hover li:first-child { diff --git a/packages/style/src/demo/cards-demo.css b/packages/style/src/demo/cards-demo.css index 4838c881..9b5c4cfe 100644 --- a/packages/style/src/demo/cards-demo.css +++ b/packages/style/src/demo/cards-demo.css @@ -1,8 +1,8 @@ .card-atom--demo { - height: 44px; + height: 44px; } .dp-po-card-atom.is-hover { - border-color: var(--brand-primary); - box-shadow: var(--shadow-bottom-right); + border-color: var(--brand-primary); + box-shadow: var(--shadow-bottom-right); } diff --git a/packages/style/src/demo/checkbox-demo.css b/packages/style/src/demo/checkbox-demo.css index 583da72f..8a6b8bb1 100644 --- a/packages/style/src/demo/checkbox-demo.css +++ b/packages/style/src/demo/checkbox-demo.css @@ -1,7 +1,7 @@ .dp-po-CustomCheckbox.CustomCheckbox--medium.is-hover { - background-color: var(--grey-lighter); + background-color: var(--grey-lighter); } .dp-po-CustomCheckbox.CustomCheckbox--medium.is-hover .dp-po-Checkbox-description { - display: block; + display: block; } diff --git a/packages/style/src/demo/dropdown-demo.css b/packages/style/src/demo/dropdown-demo.css index d6bfcb1a..69e30be0 100644 --- a/packages/style/src/demo/dropdown-demo.css +++ b/packages/style/src/demo/dropdown-demo.css @@ -1,8 +1,8 @@ .dp-po-dropdown-menu .dp-po-dropdown-menu-item.is-hover { - background-color: var(--info-light); - color: var(--brand-primary); + color: var(--brand-primary); + background-color: var(--info-light); } .dp-po-search-expand.is-hover > .dp-po-txt { - color: var(--brand-primary); + color: var(--brand-primary); } diff --git a/packages/style/src/demo/fonts-demo.css b/packages/style/src/demo/fonts-demo.css index 8712142f..181e2956 100644 --- a/packages/style/src/demo/fonts-demo.css +++ b/packages/style/src/demo/fonts-demo.css @@ -1,183 +1,183 @@ -/* Header sizes */ +/*Header sizes*/ .h-1 { - font: var(--h-1); + font: var(--h-1); } .h-2 { - font: var(--h-2); + font: var(--h-2); } .h-3 { - font: var(--h-3); + font: var(--h-3); } .h-3-medium { - font: var(--h-3--medium); + font: var(--h-3--medium); } .h-4 { - font: var(--h-4); + font: var(--h-4); } .h-5 { - font: var(--h-5); + font: var(--h-5); } .h-5-medium { - font: var(--h-5-medium); + font: var(--h-5-medium); } .h-6 { - font: var(--h-6); + font: var(--h-6); } -/* Body sizes */ +/*Body sizes*/ .p-1 { - font: var(--p-1); + font: var(--p-1); } .p-2-bold { - font: var(--p-2-bold); + font: var(--p-2-bold); } .p-3-semibold { - font: var(--p-3-semibold); + font: var(--p-3-semibold); } -/* Button sizes */ +/*Button sizes*/ .b-1-semibold { - font: var(--b-1-semibold); + font: var(--b-1-semibold); } .b-2-semibold-caps { - font: var(--b-2-semibold); - text-transform: uppercase; + font: var(--b-2-semibold); + text-transform: uppercase; } .b-3-semibold-caps { - font: var(--b-3-semibold); - text-transform: uppercase; + font: var(--b-3-semibold); + text-transform: uppercase; } -/* Inline Text */ +/*Inline Text*/ .s-2 { - font: var(--font-s2); + font: var(--font-s2); } -/* Mobile Header sizes */ +/*Mobile Header sizes*/ .mh-1 { - font: var(--mh-1); + font: var(--mh-1); } .mh-2 { - font: var(--mh-2); + font: var(--mh-2); } .mh-3 { - font: var(--mh-3); + font: var(--mh-3); } .mh-3-medium { - font: var(--mh-3-medium); + font: var(--mh-3-medium); } -/* Mobile Body sizes */ +/*Mobile Body sizes*/ .mp1 { - font: var(--mp-1); + font: var(--mp-1); } .mp-1--bold { - font: var(--mp-1-bold); + font: var(--mp-1-bold); } .mp3 { - font: var(--mp-3); + font: var(--mp-3); } -/* Messenger Typography */ +/*Messenger Typography*/ .Messenger-h-1 { - font: var(--messenger-h-1); + font: var(--messenger-h-1); } .Messenger-h-2 { - font: var(--messenger-h-2); + font: var(--messenger-h-2); } .Messenger-h-3 { - font: var(--messenger-h-3-medium); + font: var(--messenger-h-3-medium); } .Messenger-p-1 { - font: var(--messenger-p-1); + font: var(--messenger-p-1); } .Messenger-p-2 { - font: var(--messenger-p-2); + font: var(--messenger-p-2); } .Messenger-p-2-medium { - font: var(--messenger-p-2-medium); + font: var(--messenger-p-2-medium); } .Messenger-p-3 { - font: var(--messenger-p-3); + font: var(--messenger-p-3); } .Messenger-b-1 { - font: var(--messenger-b-1); + font: var(--messenger-b-1); } .Messenger-b-2 { - font: var(--messenger-b-2); + font: var(--messenger-b-2); } .Messenger-b-3 { - color: var(--brand-primary); - font: var(--messenger-b-3); + font: var(--messenger-b-3); + color: var(--brand-primary); } .Messenger-it-small { - font: var(--messenger-it-small); - font-style: italic; + font: var(--messenger-it-small); + font-style: italic; } .Messenger-s-1 { - color: var(--grey-dark); - font: var(--messenger-s-1); + font: var(--messenger-s-1); + color: var(--grey-dark); } /* main DEMO style */ .dp-po-FontsDemonstration { - color: var(--grey-darkest); + color: var(--grey-darkest); } .dp-po-FontsDemonstration .dp-po-Title { - border: none; - color: var(--black); - font: var(--p-2); + font: var(--p-2); + border: none; + color: var(--black); } .dp-po-FontsDemonstration > * { - align-items: center; - border-bottom: 1px solid var(--grey-light); - display: flex; - height: 75px; + border-bottom: 1px solid var(--grey-light); + height: 75px; + display: flex; + align-items: center; } .dp-po-FontsDemonstration > div { - display: flex; + display: flex; } .dp-po-FontsDemonstration > div > * { - flex: 0 0 40%; + flex: 0 0 40%; } .dp-po-FontsDemonstration h1, @@ -187,5 +187,5 @@ .dp-po-FontsDemonstration h5, .dp-po-FontsDemonstration h6, .dp-po-FontsDemonstration p { - margin: 0; + margin: 0; } diff --git a/packages/style/src/demo/form-demo.css b/packages/style/src/demo/form-demo.css index 5f0dc902..81d76936 100644 --- a/packages/style/src/demo/form-demo.css +++ b/packages/style/src/demo/form-demo.css @@ -1,36 +1,36 @@ .dp-po-Forms.is-focus input { - border-color: var(--brand-primary); + border-color: var(--brand-primary); } .dp-po-Forms.dp-po-Search-bar.is-focus input { - box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15); - padding-left: 10px; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15); + padding-left: 10px; } .dp-po-Forms.dp-po-Search-bar.is-focus input + .dp-po-Icon { - display: none; + display: none; } .dp-po-Forms.dp-po-Search-bar.is-focus input::placeholder { - color: var(--grey-darkest); + color: var(--grey-darkest); } .dp-po-Forms.is-focus input::placeholder, .dp-po-Forms .dp-po-Textarea.is-focus textarea::placeholder { - color: var(--grey-darkest); + color: var( --grey-darkest); } -.dp-po-Forms .Forms--item-login.is-focus::after { - background-color: var(--brand-primary); - content: ""; - height: 100%; - left: -20px; - position: absolute; - top: 0; - width: 4px; +.dp-po-Forms .Forms--item-login.is-focus:after { + content: ""; + position: absolute; + top: 0; + left: -20px; + width: 4px; + height: 100%; + background-color: var(--brand-primary); } .dp-po-Forms .Forms--item-login.is-focus input:focus + .dp-po-login-title, .dp-po-Forms .Forms--item-login.is-focus .dp-po-login-title { - color: var(--brand-primary); -} + color: var(--brand-primary); +} \ No newline at end of file diff --git a/packages/style/src/demo/full-demo.css b/packages/style/src/demo/full-demo.css index 4fe72ab3..04b0771b 100644 --- a/packages/style/src/demo/full-demo.css +++ b/packages/style/src/demo/full-demo.css @@ -1,82 +1,493 @@ .dp-po-nav { - justify-content: space-between; - padding: 10px 0; + justify-content: space-between; + padding: 10px 0; + margin: 0; } .dp-po-nav, .dp-po-nav-control ul { - align-items: center; - display: flex; - list-style: none; + display: flex; + align-items: center; + list-style: none; } .dp-po-nav .dp-po-nav-control { - margin: 0; + margin: 0; } .dp-po-nav-control ul { - padding: 0; + padding: 0; } .dp-po-nav li, .dp-po-nav-control li { - margin: 0 30px 0 0; + margin: 0 30px 0 0; } .dp-po-nav .dp-po-Avatar-icon { - margin-right: 11px; + margin-right: 11px; } .dp-po-Logo-wrap { - align-items: center; - display: flex; + display: flex; + align-items: center; } .dp-po-Logo-wrap .dp-po-Icon { - margin-right: 55px; - position: relative; + margin-right: 55px; + position: relative; } .dp-po-nav .dp-po-Button { - position: relative; + position: relative; } -.dp-po-Logo-wrap .dp-po-Icon::after, -.dp-po-nav .dp-po-Button::after { - background-color: var(--grey-light); - content: ""; - height: 100%; - position: absolute; - right: -15px; - top: 0; - width: 1px; +.dp-po-Logo-wrap .dp-po-Icon:after, +.dp-po-nav .dp-po-Button:after { + content: ""; + position: absolute; + top: 0; + right: -15px; + width: 1px; + height: 100%; + background-color: var(--grey-light); } -.dp-po-Logo-wrap .dp-po-Icon::after { - right: -25px; +.dp-po-Logo-wrap .dp-po-Icon:after { + right: -25px; } .dp-po-Header-container { - align-items: center; - background: var(--brand-primary-gradient); - display: flex; - justify-content: center; - padding: 100px 0; + background: var(--brand-primary-gradient); + padding: 100px 0; + display: flex; + align-items: center; + justify-content: center; } .dp-po-Header-container .dp-po-Forms.dp-po-Search-bar input { - margin: auto; + margin: auto; } .dp-po-Select-Language { - align-items: center; - display: flex; + display: flex; + align-items: center; } .dp-po-Select-Language .dp-po-Icon { - margin-right: 10px; + margin-right: 10px; } .dp-po-Select-Language .dp-po-arrow { - margin-left: 10px; + margin-left: 10px; +} + +.dp-Template .dp-po-Breadcrumbs li:nth-child(2)::before, +.dp-Template .dp-po-Breadcrumbs li:nth-child(2)::after { + display: none; +} + +.dp-Template .dp-po-Breadcrumbs .dp-po-Icon { + width: 21px; + height: 21px; + background-size: 21px; + position: relative; +} + +.dp-Template .dp-po-Breadcrumbs .dp-po-Icon:after { + position: absolute; + content: ""; + top: -5px; + right: -15px; + width: 1px; + height: calc(100% + 10px); + background-color: var(--grey-light); +} + +.dp-po-main { + color: var(--grey-darkest); + background-color: var(--grey-lightest); +} + +.dp-po-main .dp-po-Title-page { + display: flex; + align-items: center; + font: var(--h-1); +} + +.dp-po-main .dp-po-Title-page .dp-po-Icon { + margin-right: 10px; +} + +.dp-po-main .dp-po-Sidebar { + padding-top: 170px; +} + +.dp-po-Sidebar-title { + color: var(--grey-dark); + font: var(--h-3--medium); + border-bottom: 1px solid var(--grey); + display: flex; + width: 100%; + padding: 20px 0; +} + +.dp-po-List { + display: flex; + align-items: center; + list-style: none; + padding: 0; +} + +.dp-po-List.List--col { + flex-direction: column; + margin: 0; + align-items: flex-start; +} + +.dp-po-List li { + margin: 0; +} + +.dp-po-List.List--avatars { + width: max-content; +} + +.dp-po-List.List--avatars:hover li { + opacity: .5; +} + +.dp-po-List.List--avatars li { + margin-right: -10px; + border: 5px solid var(--grey-lightest); + border-radius: 50%; +} + +.dp-po-List.List--avatars li:hover { + opacity: 1; + z-index: 2; +} + +.dp-po-List.List--avatars li .dp-po-Avatar { + border: 2px solid transparent; +} + +.dp-po-List.List--avatars li:hover .dp-po-Avatar { + border: 2px solid var(--brand-primary); + border-radius: 50%; + opacity: 1; + z-index: 2; +} + +.dp-po-List.List--avatars + .dp-po-description { + color: var(--grey-dark); + font: var(--mp-1); +} + +.dp-po-publish-date { + border: 2px solid var(--danger); + border-radius: 1px; + display: flex; + margin: 20px 0; +} + +.dp-po-publish-date .dp-po-publish-icon { + padding: 20px; + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 60px; + background-color: var(--white); +} + +.dp-po-publish-date .dp-po-description { + padding: 20px; + font: var(--p-1); + color: var(--grey-darkest); + background-color: var(--danger-light); + border-left: 2px solid var(--danger); + width: 100%; +} + +.dp-po-description-wrap { + display: flex; + justify-content: space-between; + align-items: center; +} + +.dp-po-description-wrap .dp-IconsWrapper .dp-po-Icon { + background-color: var(--white); + border-radius: 50%; + border: 1px solid var(--grey-light); + padding: 20px; +} + +.dp-po-description-wrap .dp-IconsWrapper .dp-po-Icon:hover { + border: 1px solid var(--brand-primary); +} + +.dp-po-description-wrap .dp-po-Icon:not(:last-child) { + margin-right: 10px; +} + +.dp-po-tex-wrap { + background-color: var(--white); + box-shadow: var(--shadow-bottom); + border-radius: 4px; + padding: 30px; + color: var(--grey-darkest); + font: var(--p-1); + line-height: 1.5; + margin-bottom: 50px; +} + +.dp-po-tex-wrap .dp-po-title { + font: var(--h-2); +} + +.dp-po-Image-knowledgabse { + border: 1px solid var(--grey-light); + display: flex; +} + +.dp-po-Image-knowledgabse img { + border: 1px solid var(--grey); + padding: 5px; + margin: 3px; + overflow: hidden; +} + +.dp-po-image-description { + font: var(--p-3); + color: var(--grey-dark); + font-style: italic; +} + +.dp-po-comments { + display: flex; + align-items: center; + font: var(--h-2); + margin-bottom: 75px; + cursor: pointer; +} + +.dp-po-comments .dp-po-Icon { + margin-left: 10px; +} + +.dp-po-tex-wrap .dp-po-tooltip-wrap { + background-color: var(--info-light); + position: relative; + cursor: pointer; + margin: 0 10px 0 5px; + padding: 0 5px; +} + +.dp-po-tex-wrap .dp-po-tooltip-wrap:hover .dp-po-tooltip { + display: block; +} + +.dp-po-tex-wrap .dp-po-tooltip-wrap .dp-po-tooltip-title { + font: var(--p-2-bold); + display: flex; + margin-bottom: 5px; +} + +.dp-po-tex-wrap .dp-po-tooltip-wrap .dp-po-tooltip { + position: absolute; + border: 1px solid var(--grey-light); + box-shadow: var(--shadow-bottom-left); + border-radius: 2px; + max-width: 270px; + width: max-content; + top: 100%; + left: 100%; + color: var(--grey-darkest); + font: var(--p-3-semibold); + line-height: 1.5; + padding: 10px; + background-color: var(--white); + display: none; + z-index: 2; +} + +.dp-po-Sidebar.Sidebar--right .dp-po-Dropdown-container { + max-width: 100%; +} + +.dp-po-Sidebar.Sidebar--right .dp-po-dropdown-atom .dp-po-Icon { + margin: 0 10px; +} + +.dp-po-Sidebar.Sidebar--right .dp-po-dropdown-atom .dp-po-Icon.Icon--check { + background-size: 18px 16px; + width: 18px; + height: 16px; + margin-right: 10px; + margin-left: auto; +} + +.dp-po-Sidebar.Sidebar--right .dp-po-dropdown-atom { + background-color: var(--white); + border: 1.5px solid var(--grey-lighter); + color: var(--grey-dark); + font: var(--h-5); + justify-content: flex-start; + padding: 0; + height: 44px; +} + +.dp-po-Sidebar.Sidebar--right .dp-po-dropdown-atom:hover, +.dp-po-Sidebar.Sidebar--right .dp-po-dropdown-atom.is-active { + color: var(--white); + background-color: var(--brand-primary); +} + +.dp-po-Sidebar.Sidebar--right .dp-po-dropdown-atom + .dp-po-dropdown-menu { + background-color: var(--white); + margin-top: 5px; + border: 1px solid var(--brand-primary); + border-radius: 4px; + box-shadow: var(--shadow-bottom-right); +} + +.dp-po-dropdown-menu .dp-po-dropdown-menu-item.is-disabled, +.dp-po-dropdown-menu .dp-po-dropdown-menu-item.is-disabled:hover, +.dp-po-Sidebar.Sidebar--right .dp-po-dropdown-menu .dp-po-dropdown-menu-item.is-disabled:hover { + color: var(--grey); +} + +.dp-po-dropdown-menu .dp-po-dropdown-menu-item a { + font: var(--b-1-semibold); + color: var(--brand-primary); +} + +.dp-po-dropdown-menu .dp-po-dropdown-menu-item .dp-po-Icon { + margin-right: 10px; +} + +.dp-po-Sidebar.Sidebar--right .dp-po-dropdown-menu .dp-po-dropdown-menu-item:hover { + background-color: transparent; + color: var(--brand-primary); +} + +.dp-po-dropdown-menu-item .Icon--check { + display: none; +} + +.dp-po-dropdown-menu-item.is-selected .Icon--check { + display: block; + margin: 0 0 0 auto; +} + +.dp-po-dropdown-menu-item.is-selected { + color: var(--brand-primary); +} + +.dp-po-main .dp-po-tex-wrap .dp-po-Icon { + background-size: 10px; + width: 10px; + height: 10px; + position: absolute; + bottom: calc(100% - 5px); + left: 100%; + cursor: pointer; +} + +.dp-po-List-question { + color: var(--grey-dark); + list-style: none; + padding: 0; + margin-top: 20px; +} + +.dp-po-List-question li a { + color: var(--grey-dark); +} + +.dp-po-List-question li:hover { + text-decoration: underline; +} + +.dp-po-List-question li { + font: var(--mp-1); + margin-bottom: 20px; + position: relative; +} + +.dp-po-List-question li.is-active { + font: var(--mp-1-bold); +} + +.dp-po-List-question li.is-active:after { + content: ""; + position: absolute; + left: -15px; + top: calc(50% - 8px); + width: 0; + height: 0; + border-style: solid; + border-width: 8px 0 8px 8px; + border-color: transparent transparent transparent var(--brand-primary); +} + +.dp-po-wrap-item { + background-color: var(--white); + padding: 10px 20px 20px; + border: 1px solid var(--grey-light); + border-radius: 4px; + margin-bottom: 20px; +} + +.dp-po-wrap-item .dp-po-title { + font: var(--h-3); + color: var(--grey-dark); +} + +.dp-po-labels-wrap .dp-po-label { + margin-top: 10px; +} + +.dp-po-related-list { + padding: 0; + list-style: none; +} + +.dp-po-related-list .dp-po-Icon { + min-width: 25px; + height: 20px; + background-size: 19px 20px; + display: flex; + background-position: 0 0; +} + +.dp-po-related-list li { + margin: 10px 0 0; + display: flex; + align-items: center; +} + +.dp-po-related-list a { + font: var(--mp-1); + display: flex; +} + +.dp-po-share-list { + display: flex; + align-items: center; + list-style: none; + justify-content: space-between; + padding: 0; + margin: 10px 0 0; +} + +.dp-po-user-list { + color: var(--grey-darkest); + font: var(--p-1); +} + +.dp-po-user-list .dp-po-title { + color: var(--grey-dark); + font: var(--p-2-bold); + margin-top: 10px; } diff --git a/packages/style/src/demo/icons-demo.css b/packages/style/src/demo/icons-demo.css index df60034a..dee8d98d 100644 --- a/packages/style/src/demo/icons-demo.css +++ b/packages/style/src/demo/icons-demo.css @@ -1,17 +1,17 @@ .Icon--history { - background-image: url('data:image/svg+xml,'); - height: 20px; - width: 20px; +background-image: url('data:image/svg+xml,'); +width: 20px; +height: 20px; } .Icon--history.Icon--primary { - background-image: url('data:image/svg+xml,'); +background-image: url('data:image/svg+xml,') } .Icon--ticket { background-image: url('data:image/svg+xml,'); - height: 14px; width: 21px; + height: 14px; } .Icon--ticket.Icon--primary { @@ -20,18 +20,24 @@ .Icon--check { background-image: url('data:image/svg+xml,'); - height: 12px; width: 14px; + height: 12px; } .Icon--check.Icon--success { background-image: url('data:image/svg+xml,'); } +.Icon--check.Icon--white, +.dp-po-Sidebar.Sidebar--right .dp-po-dropdown-atom:hover .Icon--check, +.dp-po-Sidebar.Sidebar--right .dp-po-Dropdown-container.is-active .dp-po-dropdown-atom .Icon--check { + background-image: url('data:image/svg+xml,'); +} + .Icon--caret-down { background-image: url('data:image/svg+xml,'); - height: 9px; width: 15px; + height: 9px; } .Icon--caret-down.Icon--primary { @@ -44,38 +50,38 @@ .Icon--caret-up { background-image: url('data:image/svg+xml,'); - height: 9px; width: 15px; + height: 9px; } .Icon--caret-right { background-image: url('data:image/svg+xml,'); - height: 15px; width: 9px; + height: 15px; } .Icon--caret-left { background-image: url('data:image/svg+xml,'); - height: 15px; width: 9px; + height: 15px; } .Icon--knowledgebase { background-image: url('data:image/svg+xml,'); - height: 24px; width: 20px; + height: 24px; } .Icon--knowledgebase.Icon--grey { background-image: url('data:image/svg+xml,'); - height: 24px; width: 20px; + height: 24px; } .Icon--guides { background-image: url('data:image/svg+xml,'); - height: 20px; width: 21px; + height: 20px; } .Icon--guides.Icon--white { @@ -84,8 +90,8 @@ .Icon--date { background-image: url('data:image/svg+xml,'); - height: 14px; width: 14px; + height: 14px; } .Icon--date.Icon--grey { @@ -94,26 +100,26 @@ .Icon--news { background-image: url('data:image/svg+xml,'); - height: 18px; - width: 19px; +width: 19px; +height: 18px; } .Icon--getting-started { background-image: url('data:image/svg+xml,'); - height: 23px; - width: 24px; +width: 24px; +height: 23px; } .Icon--getting-started.Icon--primary-white { background-image: url('data:image/svg+xml,'); - height: 42px; - width: 42px; +width: 42px; +height: 42px; } .Icon--find { background-image: url('data:image/svg+xml,'); - height: 17px; - width: 17px; +width: 17px; +height: 17px; } .Icon--find.Icon--primary { @@ -122,14 +128,14 @@ .Icon--user { background-image: url('data:image/svg+xml,'); - height: 22px; - width: 21px; +width: 21px; +height: 22px; } .Icon--sort { background-image: url('data:image/svg+xml,'); - height: 15px; - width: 17px; +width: 17px; +height: 15px; } .Icon--sort.Icon--primary { @@ -138,8 +144,8 @@ .Icon--close { background-image: url('data:image/svg+xml,'); - height: 16px; - width: 16px; +width: 16px; +height: 16px; } .Icon--close.Icon--danger { @@ -152,26 +158,26 @@ .Icon--feedback { background-image: url('data:image/svg+xml,'); - height: 17px; - width: 19px; +width: 19px; +height: 17px; } .Icon--comment { background-image: url('data:image/svg+xml,'); - height: 16px; - width: 16px; +width: 16px; +height: 16px; } .Icon--comment.Icon--grey { background-image: url('data:image/svg+xml,'); - height: 16px; - width: 16px; +width: 16px; +height: 16px; } .Icon--article { background-image: url('data:image/svg+xml,'); - height: 18px; - width: 15px; +width: 15px; +height: 18px; } .Icon--article.Icon--primary-white { @@ -180,86 +186,95 @@ .Icon--agent { background-image: url('data:image/svg+xml,'); - height: 22px; - width: 22px; +width: 22px; +height: 22px; } .Icon--server { background-image: url('data:image/svg+xml,'); - height: 22px; - width: 21px; +width: 21px; +height: 22px; } .Icon--billing { background-image: url('data:image/svg+xml,'); - height: 23px; - width: 21px; +width: 21px; +height: 23px; } .Icon--feedback-alt { background-image: url('data:image/svg+xml,'); - height: 21px; - width: 21px; +width: 21px; +height: 21px; } .Icon--anchor { background-image: url('data:image/svg+xml,'); - height: 17px; - width: 19px; +width: 19px; +height: 17px; } .Icon--alert { background-image: url('data:image/svg+xml,'); - height: 15px; - width: 12px; +width: 12px; +height: 15px; } .Icon--zip-file-rigth { background-image: url('data:image/svg+xml,'); - height: 23px; - width: 19px; +width: 19px; +height: 23px; } .Icon--app-file { background-image: url('data:image/svg+xml,'); - height: 22px; - width: 18px; +width: 18px; +height: 22px; } .Icon--zip-file-left { background-image: url('data:image/svg+xml,'); - height: 22px; - width: 18px; +width: 18px; +height: 22px; +} + +.Icon--zip-file-left.Icon--grey-dark { + background-image: url('data:image/svg+xml,'); +} + +.Icon--zip-file-left.Icon--brand-primary, +.dp-po-description-wrap .dp-IconsWrapper .dp-po-Icon.Icon--zip-file-left:hover { + background-image: url('data:image/svg+xml,'); } .Icon--download { background-image: url('data:image/svg+xml,}'); - height: 15px; - width: 11px; +width: 11px; +height: 15px; } .Icon--file { background-image: url('data:image/svg+xml,'); - height: 15px; - width: 13px; +width: 13px; +height: 15px; } .Icon--file.Icon--grey-dark { background-image: url('data:image/svg+xml,'); - height: 15px; - width: 13px; +width: 13px; +height: 15px; } .Icon--drag-drop { background-image: url('data:image/svg+xml,'); - height: 16px; - width: 17px; +width: 17px; +height: 16px; } .Icon--complete { background-image: url('data:image/svg+xml,'); - height: 21px; - width: 21px; +width: 21px; +height: 21px; } .Icon--complete.Icon--success { @@ -268,56 +283,56 @@ .Icon--edit { background-image: url('data:image/svg+xml, '); - height: 14px; - width: 14px; +width: 14px; +height: 14px; } .Icon--edit.Icon--primary { - background-image: url('data:image/svg+xml,'); - height: 12px; - width: 12px; +background-image: url('data:image/svg+xml,'); +width: 12px; +height: 12px; } .Icon--submit { background-image: url('data:image/svg+xml,'); - height: 20px; - width: 20px; +width: 20px; +height: 20px; } .Icon--submit.Icon--primary { background-image: url('data:image/svg+xml,'); - height: 20px; - width: 20px; +width: 20px; +height: 20px; } .Icon--list { background-image: url('data:image/svg+xml,'); - height: 12px; - width: 14px; +width: 14px; +height: 12px; } .Icon--status-change { background-image: url('data:image/svg+xml,'); - height: 10px; - width: 28px; +width: 28px; +height: 10px; } .Icon--votes { background-image: url('data:image/svg+xml,'); - height: 17px; - width: 18px; +width: 18px; +height: 17px; } .Icon--reload { background-image: url('data:image/svg+xml,'); - height: 15px; - width: 18px; +width: 18px; +height: 15px; } .Icon--warning { background-image: url('data:image/svg+xml,'); - height: 20px; - width: 20px; +width: 20px; +height: 20px; } .Icon--warning.Icon--danger { @@ -326,56 +341,69 @@ .Icon--code { background-image: url('data:image/svg+xml,'); - height: 17px; - width: 21px; +width: 21px; +height: 17px; } .Icon--share { background-image: url('data:image/svg+xml,'); - height: 16px; - width: 14px; +width: 14px; +height: 16px; } .Icon--rss { background-image: url('data:image/svg+xml,'); - height: 16px; - width: 16px; +width: 16px; +height: 16px; } .Icon--rate-support { background-image: url('data:image/svg+xml,'); - height: 21px; - width: 26px; +width: 26px; +height: 21px; } .Icon--info { background-image: url('data:image/svg+xml,'); - height: 21px; - width: 21px; +width: 21px; +height: 21px; } .Icon--info.Icon--primary { background-image: url('data:image/svg+xml,'); - height: 21px; - width: 21px; +} + +.Icon--info.Icon--primary { + background-image: url('data:image/svg+xml,'); +width: 21px; +height: 21px; } .Icon--print { background-image: url('data:image/svg+xml,'); - height: 17px; - width: 19px; +width: 19px; +height: 17px; +} + +.Icon--print.Icon--grey-dark { + background-image: url('data:image/svg+xml,'); +} + +.Icon--print.Icon--brand-primary, +.dp-po-description-wrap .dp-IconsWrapper .dp-po-Icon.Icon--print:hover { + background-image: url('data:image/svg+xml,'); } .Icon--pdf-file { background-image: url('data:image/svg+xml,'); - height: 22px; - width: 18px; +width: 18px; +height: 22px; } .Icon--face-smile { background-image: url('data:image/svg+xml,'); - height: 24px; - width: 24px; +width: 24px; +height: 24px; } .Icon--face-smile.Icon--success { @@ -384,26 +412,26 @@ .Icon--face-sad { background-image: url('data:image/svg+xml,'); - height: 24px; - width: 24px; +width: 24px; +height: 24px; } .Icon--refresh { background-image: url('data:image/svg+xml,'); - height: 16px; - width: 20px; +width: 20px; +height: 16px; } .Icon--refresh.Icon--primary { background-image: url('data:image/svg+xml,'); - height: 16px; - width: 20px; +width: 20px; +height: 16px; } .Icon--bolt { background-image: url('data:image/svg+xml,'); - height: 18px; - width: 10px; +width: 10px; +height: 18px; } .Icon--bolt.Icon--grey { @@ -412,46 +440,52 @@ .Icon--subscribe { background-image: url('data:image/svg+xml,'); - height: 21px; - width: 30px; +width: 30px; +height: 21px; +} + +.Icon--subscribe.Icon--white, +.dp-po-Sidebar.Sidebar--right .dp-po-dropdown-atom:hover .Icon--subscribe, +.dp-po-Sidebar.Sidebar--right .dp-po-Dropdown-container.is-active .dp-po-dropdown-atom .Icon--subscribe { + background-image: url('data:image/svg+xml,'); } .Icon--elephant { background-image: url('data:image/svg+xml,'); - height: 38px; - width: 39px; +width: 39px; +height: 38px; } .Icon--elephant.Icon--primary { background-image: url('data:image/svg+xml,'); - height: 38px; - width: 39px; +width: 39px; +height: 38px; } .Icon--medium-avatar { - background-color: var(--grey-light); - background-image: url('data:image/svg+xml,'); - border-radius: 3px; - height: 30px; - width: 30px; +background-image: url('data:image/svg+xml,'); +width: 30px; +height: 30px; +background-color: var(--grey-light); +border-radius: 3px; } input.dp-po-input-avatar { background: url(../img/docs/avatar-circular.png) no-repeat; - background-position: 0 50%; background-size: 20px 20px; + background-position: 0 50%; } .Icon--initiator { - background-image: url('data:image/svg+xml,'); - height: 50px; - width: 50px; +background-image: url('data:image/svg+xml,'); +width: 50px; +height: 50px; } .Icon--dragdrop { - background-image: url('data:image/svg+xml,'); - height: 21px; - width: 21px; +background-image: url('data:image/svg+xml,'); +width: 21px; +height: 21px; } .Icon-Tech-company { @@ -461,8 +495,85 @@ input.dp-po-input-avatar { width: 48px; } -.dp-icon-UK { +.Icon--UK { background-image: url('data:image/svg+xml,'); - height: 19px; width: 28.5px; + height: 19px; +} + +.Icon--book { + background-image: url('data:image/svg+xml,'); + width: 23px; + height: 33px; +} + +.Icon-calendar.Icon--danger { + background-image: url('data:image/svg+xml,'); + width: 21px; + height: 22px; } + +.Icon--linkedin { + background-image: url('data:image/svg+xml,'); + width: 24px; + height: 24px; +} + +.Icon--fb { + background-image: url('data:image/svg+xml,'); + width: 24px; + height: 24px; +} + +.Icon--tw { + background-image: url('data:image/svg+xml,'); + width: 24px; + height: 24px; +} + +.Icon--whatsapp { + background-image: url('data:image/svg+xml,'); + width: 24px; + height: 24px; +} + +.Icon--subscribe-article { + background-image: url('data:image/svg+xml,'); + width: 25px; + height: 29px; +} + +.Icon--subscribe-article.Icon--primary, +.dp-po-dropdown-menu-item:hover .Icon--subscribe-article, +.dp-po-dropdown-menu-item.is-selected .Icon--subscribe-article { + background-image: url('data:image/svg+xml,'); +} + +.Icon--subscribe-article.Icon--grey, +.dp-po-dropdown-menu-item.is-disabled .Icon--subscribe-article { + background-image: url('data:image/svg+xml,'); +} + +.Icon--subscribe-category { + background-image: url('data:image/svg+xml,'); + width: 25px; + height: 29px; +} + +.Icon--subscribe-category.Icon--primary, +.dp-po-dropdown-menu-item:hover .Icon--subscribe-category, +.dp-po-dropdown-menu-item.is-selected .Icon--subscribe-category { + background-image: url('data:image/svg+xml,'); +} + +.Icon--subscribe-Knowledgebase { + background-image: url('data:image/svg+xml,'); + width: 25px; + height: 29px; +} + +.Icon--subscribe-Knowledgebase.Icon--primary, +.dp-po-dropdown-menu-item:hover .Icon--subscribe-Knowledgebase, +.dp-po-dropdown-menu-item.is-selected .Icon--subscribe-Knowledgebase { + background-image: url('data:image/svg+xml,'); +} \ No newline at end of file diff --git a/packages/style/src/demo/label-demo.css b/packages/style/src/demo/label-demo.css index 39032a86..1df67b73 100644 --- a/packages/style/src/demo/label-demo.css +++ b/packages/style/src/demo/label-demo.css @@ -1,3 +1,3 @@ .dp-po-filter.is-hover { - background-color: var(--grey-lightest); + background-color: var(--grey-lightest); } diff --git a/packages/style/src/demo/messenger-Icons.css b/packages/style/src/demo/messenger-Icons.css index 31afef37..0ca64237 100644 --- a/packages/style/src/demo/messenger-Icons.css +++ b/packages/style/src/demo/messenger-Icons.css @@ -1,41 +1,41 @@ /* Messenger - Icons */ .Icon--search { - background-image: url('data:image/svg+xml,'); +background-image: url('data:image/svg+xml,'); } .Icon--go-primary { - background-image: url('data:image/svg+xml,'); +background-image: url('data:image/svg+xml,'); } .Icon--go-secondary { - background-image: url('data:image/svg+xml,'); +background-image: url('data:image/svg+xml,'); } .Icon--attach { - background-image: url('data:image/svg+xml,'); +background-image: url('data:image/svg+xml,'); } .Icon--mute { - background-image: url('data:image/svg+xml,'); +background-image: url('data:image/svg+xml,'); } .Icon--send { - background-image: url('data:image/svg+xml,'); +background-image: url('data:image/svg+xml,'); } .Icon--close-primary { - background-image: url('data:image/svg+xml,'); +background-image: url('data:image/svg+xml,'); } .Icon--mail { - background-image: url('data:image/svg+xml,'); +background-image: url('data:image/svg+xml,'); } .Icon--profile { - background-image: url('data:image/svg+xml,'); +background-image: url('data:image/svg+xml,'); } .Icon--log-in { - background-image: url('data:image/svg+xml,'); -} +background-image: url('data:image/svg+xml,'); +} \ No newline at end of file diff --git a/packages/style/src/demo/messenger-buttons-demo.css b/packages/style/src/demo/messenger-buttons-demo.css index 34b48195..ebe7750c 100644 --- a/packages/style/src/demo/messenger-buttons-demo.css +++ b/packages/style/src/demo/messenger-buttons-demo.css @@ -1,34 +1,34 @@ .MessengerContainer-demo .dp-po-StateWrapper-demo { - width: 200px; + width: 200px; } .MessengerContainer-demo .dp-po-ButtonItem-demo { - margin: 0 30px 0 0; - width: auto; + width: auto; + margin: 0 30px 0px 0; } .MessengerContainer-demo .dp-po-StateWrapper-demo + .dp-po-ButtonItem-demo { - margin-top: 50px; + margin-top: 50px; } .Button--medium.Button--messenger.is-hover { - background-color: var(--info-light); + background-color: var(--info-light); } .dp-po-Button.Button--danger.is-hover { - background-color: rgba(232, 73, 84, 0.7); + background-color: rgba(232, 73, 84, .7); } .dp-po-Button.Button--success.is-hover { - background-color: rgba(84, 177, 98, 0.7); + background-color: rgba(84, 177, 98, .7); } .dp-po-Button.Button--ghost.Button--danger.is-hover { - background-color: transparent; - color: rgba(232, 73, 84, 0.7); + color: rgba(232, 73, 84, .7); + background-color: transparent; } .dp-po-Button.Button--ghost.Button--success.is-hover { + color: rgba(84, 177, 98, .7); background-color: transparent; - color: rgba(84, 177, 98, 0.7); -} +} \ No newline at end of file diff --git a/packages/style/src/demo/pagination-demo.css b/packages/style/src/demo/pagination-demo.css index 6f353db5..884ad8a7 100644 --- a/packages/style/src/demo/pagination-demo.css +++ b/packages/style/src/demo/pagination-demo.css @@ -1,15 +1,15 @@ .demo-pagination { - align-items: center; - display: flex; + display: flex; + align-items: center; } .demo-pagination-title { - color: var(--black); - font: var(--p-xxl); - max-width: 170px; - width: 100%; + font: var(--p-xxl); + color: var(--black); + width: 100%; + max-width: 170px; } .demo-pagination:last-child .demo-pagination-title { - max-width: 165px; + max-width: 165px; } diff --git a/packages/style/src/demo/scrollbar-demo.css b/packages/style/src/demo/scrollbar-demo.css index c8ca2638..d81b03c3 100644 --- a/packages/style/src/demo/scrollbar-demo.css +++ b/packages/style/src/demo/scrollbar-demo.css @@ -1,3 +1,3 @@ .dp-po-scroll-wrapper-demo { - height: 400px; + height: 400px; } diff --git a/packages/style/src/demo/tableview-demo.css b/packages/style/src/demo/tableview-demo.css index 7aee5a06..b0f862bb 100644 --- a/packages/style/src/demo/tableview-demo.css +++ b/packages/style/src/demo/tableview-demo.css @@ -1,42 +1,39 @@ -@import "../fonts.css"; -@import "../vars.css"; - /* Demo-Sorting-bar-class */ .demo-TableWrapper { - overflow: auto; + overflow: auto; } .demo-TableWrapper .dp-po-Tableview { - width: 1235px; + width: 1235px; } .demo-TableWrapper .dp-po-TableRow > div:first-child { - width: 190px; + width: 190px; } .demo-TableWrapper .dp-po-TableRow > div:nth-child(2) { - width: 500px; + width: 500px; } .demo-TableWrapper .dp-po-TableRow > div:nth-child(3), .demo-TableWrapper .dp-po-TableRow > div:nth-child(4), .demo-TableWrapper .dp-po-TableRow > div:nth-child(5) { - width: 150px; + width: 150px; } -/* .demo-TableWrapper .dp-po-TableRow > div:nth-child(6) { +/*.demo-TableWrapper .dp-po-TableRow > div:nth-child(6) { width: 60px; -} */ +}*/ .demo-TableWrapper .dp-po-TableRow.TableRow--chat > div:first-child { - width: 860px; + width: 860px; } .demo-TableWrapper .dp-po-TableRow.TableRow--chat > div:nth-child(2) { - width: 200px; + width: 200px; } .demo-TableWrapper .dp-po-TableRow.TableRow--chat > div:last-child { - justify-content: flex-end; + justify-content: flex-end; } diff --git a/packages/style/src/demo/tabs-demo.css b/packages/style/src/demo/tabs-demo.css index 8149fe8f..774395d9 100644 --- a/packages/style/src/demo/tabs-demo.css +++ b/packages/style/src/demo/tabs-demo.css @@ -1,8 +1,8 @@ .Tabs--Large .dp-po-Tabs-item.is-hover { - border-bottom: 2px solid var(--grey-dark); - color: var(--grey); + border-bottom: 2px solid var(--grey-dark); + color: var(--grey); } .Tabs--Small .dp-po-Tabs-item.is-hover { - color: var(--grey-dark); + color: var(--grey-dark); } diff --git a/packages/style/src/dp-Icons.css b/packages/style/src/dp-Icons.css deleted file mode 100644 index 2b7cd35e..00000000 --- a/packages/style/src/dp-Icons.css +++ /dev/null @@ -1,35 +0,0 @@ -svg { fill: var(--grey); } - -.dp-po-Icon.Icon--white svg { fill: #fff; } - -.dp-po-Icon.Icon--primary svg { fill: #3a8dde; } -.dp-po-Icon.Icon--primary-light svg { fill: #e9f7ff; } - -.dp-po-Icon.Icon--grey-darkest svg { fill: #4c4f50; } -.dp-po-Icon.Icon--grey-dark svg { fill: #8b9293; } -.dp-po-Icon.Icon--grey svg { fill: #a9b0b0; } -.dp-po-Icon.Icon--grey-light svg { fill: #d3d6d7; } -.dp-po-Icon.Icon--grey-lighter svg { fill: #eff0f0; } -.dp-po-Icon.Icon--grey-lightest svg { fill: #f7f7f7; } - -.dp-po-Icon.Icon--danger svg { fill: #e84954; } -.dp-po-Icon.Icon--warning svg { fill: #ec6c4e; } -.dp-po-Icon.Icon--success svg { fill: #54b162; } -.dp-po-Icon.Icon--neutral svg { fill: #f8af3c; } -.dp-po-Icon.Icon--info svg { fill: #4b93cf; } -.dp-po-Icon.Icon--pink svg { fill: #df5e9c; } -.dp-po-Icon.Icon--purple svg { fill: #9384bd; } - -.dp-po-Icon.Icon--danger-light svg { fill: #fbe1e3; } -.dp-po-Icon.Icon--warning-light svg { fill: #f9e6e1; } -.dp-po-Icon.Icon--neutral-light svg { fill: #fff8e1; } -.dp-po-Icon.Icon--success-light svg { fill: #efd; } -.dp-po-Icon.Icon--info-light svg { fill: #e1eefb; } -.dp-po-Icon.Icon--pink-light svg { fill: #fae8f0; } -.dp-po-Icon.Icon--purple-light svg { fill: #ebe4f2; } - -.dp-po-Icon { - background-position: center center; - background-repeat: no-repeat; - display: inline-block; -} diff --git a/packages/style/src/forms/dp-po-forms.css b/packages/style/src/forms/dp-po-forms.css index af8cabfe..812a666b 100644 --- a/packages/style/src/forms/dp-po-forms.css +++ b/packages/style/src/forms/dp-po-forms.css @@ -1,198 +1,196 @@ .dp-po-Forms { - position: relative; - width: 100%; + position: relative; + width: 100%; } -.dp-po-Forms input { - background-color: var(--grey-lightest); - border: 2px solid var(--grey-light); - border-radius: 4px; - box-sizing: border-box; - - /* color: var(--grey); */ - color: var(--grey-darkest); - font: var(--p-2); - height: 44px; - max-width: 620px; - outline: none; - padding: 10px; - width: 100%; +.dp-po-Forms input{ + width: 100%; + max-width: 620px; + height: 44px; + background-color: var(--grey-lightest); + border: 2px solid var(--grey-light); + box-sizing: border-box; + border-radius: 4px; + padding: 10px; + font: var(--p-2); + outline: none; + /*color: var(--grey);*/ + color: var(--grey-darkest); } .dp-po-Forms input:focus { - border-color: var(--brand-primary); + border-color: var(--brand-primary); } .dp-po-Forms.is-valid input { - border-color: var(--danger); + border-color: var(--danger); } .dp-po-Forms.is-valid input, .dp-po-Forms.is-valid input::placeholder { - color: var(--danger); + color: var(--danger); } -.dp-po-Forms input::placeholder { - color: var(--grey); +.dp-po-Forms input::placeholder { + color: var(--grey); } -/* input/search-bar */ +/*input/search-bar*/ .dp-po-Forms input:focus::placeholder, .dp-po-Forms.dp-po-Search-bar input:focus::placeholder { - color: var(--grey-darkest); + color: var(--grey-darkest); } .dp-po-Forms.dp-po-Search-bar input { - background-color: var(--white); - border: 1px solid var(--brand-primary); - box-shadow: inset 2px 2px 5px rgba(14, 31, 57, 0.15); - display: flex; - flex-direction: row-reverse; - font: var(--h-2); - height: 58px; - max-width: 100%; - padding-left: 60px; - position: relative; + position: relative; + display: flex; + flex-direction: row-reverse; + border: 1px solid var(--brand-primary); + box-shadow: inset 2px 2px 5px rgba(14, 31, 57, 0.15); + max-width: 100%; + height: 58px; + font: var(--h-2); + background-color: var(--white); + padding-left: 60px; } .dp-po-Forms.dp-po-Search-bar input::placeholder { - color: var(--grey-dark); + color: var(--grey-dark); } .dp-po-Search-bar .dp-po-Icon { - background-size: 32px 32px; - height: 32px; - left: 16px; - position: absolute; - top: calc(50% - 16px); - width: 32px; + position: absolute; + left: 16px; + top: calc(50% - 16px); + background-size: 32px 32px; + width: 32px; + height: 32px; } .dp-po-Search-bar input:focus { - box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15); - padding-left: 10px; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15); + padding-left: 10px; } .dp-po-Search-bar input:focus + .dp-po-Icon { - display: none; + display: none; } .dp-po-Searchbar-wrap { - margin: auto; - max-width: 750px; - position: relative; - width: 100%; + width: 100%; + max-width: 750px; + margin: auto; + position: relative; } -/* input/search-bar/small */ +/*input/search-bar/small*/ .dp-po-Search-bar.Search-bar--small input { - font: var(--p-xxl); - height: 39px; - max-width: 400px; - padding-left: 40px; + font: var(--p-xxl); + max-width: 400px; + height: 39px; + padding-left: 40px; } .dp-po-Search-bar.Search-bar--small .dp-po-Icon { - background-size: 21px 21px; - height: 21px; - left: 10px; - top: calc(50% - 10px); - width: 21px; + left: 10px; + top: calc(50% - 10px); + background-size: 21px 21px; + width: 21px; + height: 21px; } .dp-po-Search-bar.Search-bar--small input:focus { - padding-left: 10px; + padding-left: 10px; } -/* Textarea */ +/*Textarea*/ .dp-po-Forms .dp-po-Textarea textarea { - background-color: var(--grey-lightest); - border: 2px solid var(--grey); - border-radius: 4px; - color: var(--grey); - font: var(--p-2); - outline: none; - padding: 10px; - position: relative; - width: 100%; + border: 2px solid var(--grey); + font: var(--p-2); + background-color: var(--grey-lightest); + border-radius: 4px; + outline: none; + padding: 10px; + position: relative; + width: 100%; + color: var(--grey); } .dp-po-Forms .dp-po-Textarea.is-valid textarea { - border-color: var(--danger); - color: var(--grey-darkest); + border-color: var(--danger); + color: var(--grey-darkest); } .dp-po-Forms .dp-po-Textarea textarea::placeholder { - color: var(--grey); + color: var(--grey); } .dp-po-Forms .dp-po-Textarea.is-valid textarea::placeholder, .dp-po-Forms .dp-po-Textarea textarea:focus::placeholder { - color: var(--grey-darkest); + color: var(--grey-darkest); } -.dp-po-Textarea.is-valid::before, -.dp-po-Textarea.is-valid::after { - background-color: var(--danger); +.dp-po-Textarea.is-valid:before, +.dp-po-Textarea.is-valid:after{ + background-color: var(--danger); } .Forms--Textarea { - max-width: 560px; - min-height: 56px; + max-width: 560px; + min-height: 56px; } .dp-po-Forms .dp-po-Textarea { - display: inline-block; - position: relative; - width: 100%; + position: relative; + display: inline-block; + width: 100%; } .dp-po-Forms .dp-po-Textarea textarea { - position: relative; - z-index: 1; -} - -.dp-po-Textarea::before { - background-color: var(--grey-light); - bottom: 25px; - content: ""; - height: 2px; - pointer-events: none; - position: absolute; - right: 10px; - -webkit-transform: rotate(-45deg); - width: 25px; - z-index: 2; -} - -.dp-po-Textarea::after { - background-color: var(--grey-light); - bottom: 20px; - content: ""; - height: 0; - height: 2px; - pointer-events: none; - position: absolute; - position: absolute; - right: 12px; - -webkit-transform: rotate(-45deg); - width: 0; - width: 11px; - z-index: 2; + position: relative; + z-index: 1; +} + +.dp-po-Textarea:before{ + content:""; + -webkit-transform: rotate(-45deg); + z-index: 2; + width: 25px; + height: 2px; + background-color: var(--grey-light); + position: absolute; + right: 10px; + bottom: 25px; + pointer-events: none; +} + +.dp-po-Textarea:after { + content:""; + height: 0px; + width: 0px; + -webkit-transform: rotate(-45deg); + position: absolute; + width: 11px; + height: 2px; + background-color: var(--grey-light); + bottom: 20px; + right: 12px; + pointer-events: none; + z-index: 2; + position: absolute; } - .dp-po-Icon-resizer { - background-color: var(--grey-lightest); - bottom: 9px; - height: 10px; - pointer-events: none; - position: absolute; - right: 2px; - width: 10px; - z-index: 2; + height: 10px; + width: 10px; + background-color: var(--grey-lightest); + position: absolute; + bottom: 9px; + right: 2px; + pointer-events: none; + z-index: 2; } @@ -200,443 +198,443 @@ -/* login-2/item */ +/*login-2/item*/ .Forms--item-login { - color: var(--grey); - display: flex; - flex-direction: column-reverse; - position: relative; + display: flex; + flex-direction: column-reverse; + color: var(--grey); + position: relative; } .Forms--item-login input { - background-color: var(--white); - border: 0; - border-bottom: 2px solid var(--grey-light); - border-radius: 0; - color: var(--grey-darkest); - font: var(--p-1); - height: 30px; - padding: 0; + background-color: var(--white); + border: 0; + border-bottom: 2px solid var(--grey-light); + border-radius: 0; + height: 30px; + padding: 0; + font: var(--p-1); + color: var(--grey-darkest); } .dp-po-login-title { - font: var(--p-2-bold); + font: var(--p-2-bold); } .Forms--item-login input:focus + .dp-po-login-title { - color: var(--brand-primary); + color: var(--brand-primary); } -/* focus */ +/*focus*/ -.dp-po-Forms .Forms--item-login input:focus + .dp-po-login-title::after { - background-color: var(--brand-primary); - content: ""; - height: 100%; - left: -20px; - position: absolute; - top: 0; - width: 4px; +.dp-po-Forms .Forms--item-login input:focus + .dp-po-login-title:after { + content: ""; + position: absolute; + top: 0; + left: -20px; + width: 4px; + height: 100%; + background-color: var(--brand-primary); } -/* validation */ +/*validation*/ -.dp-po-Forms.Forms--item-login.is-valid::after { - background-color: var(--danger); - content: ""; - height: 100%; - left: -15px; - position: absolute; - top: 0; - width: 4px; +.dp-po-Forms.Forms--item-login.is-valid:after { + content: ""; + position: absolute; + top: 0; + left: -15px; + width: 4px; + height: 100%; + background-color: var(--danger); } .dp-po-Forms.Forms--item-login.is-valid input:focus + .dp-po-login-title, .dp-po-Forms.Forms--item-login.is-valid .dp-po-login-title { - color: var(--danger); + color: var(--danger); } -/* Success */ +/*Success*/ .dp-po-Forms.Forms--item-login.is-success input:focus + .dp-po-login-title, .dp-po-Forms.Forms--item-login.is-success .dp-po-login-title { - color: var(--success); + color: var(--success); } -.dp-po-Forms.Forms--item-login.is-success input:focus + .dp-po-login-title::after { - display: none; +.dp-po-Forms.Forms--item-login.is-success input:focus + .dp-po-login-title:after { + display: none; } .dp-po-login-title .dp-po-Icon { - margin-left: 5px; + margin-left: 5px; } -/* log in */ +/*log in*/ -/* Version 1 */ +/*Version 1*/ .dp-po-Forms.Forms--login { - background: var(--white); - border: 1.5px solid var(--grey-light); - border-radius: 4px; - box-shadow: var(--shadow-bottom-right); - max-width: 300px; - padding: 20px; + max-width: 300px; + box-shadow: var(--shadow-bottom-right); + background: var(--white); + border: 1.5px solid var(--grey-light); + border-radius: 4px; + padding: 20px; } .dp-po-Forms.Forms--login input { - margin-bottom: 20px; + margin-bottom: 20px; } .dp-po-Forms .dp-po-Button { - margin-bottom: 5px; + margin-bottom: 5px; } .dp-po-description { - color: var(--grey-darkest); - font: var(--p-3); + color: var(--grey-darkest); + font: var(--p-3); } .dp-po-description:hover { - color: var(--grey-darkest); + color: var(--grey-darkest); } .dp-po-Forms.Forms--login .dp-po-CustomCheckbox { - margin: 0 0 10px; + margin: 0 0 10px; } .dp-po-Forms.Forms--login .Forms--item-login input { - margin-bottom: 0; + margin-bottom: 0; } .dp-po-Forms.Forms--login .Forms--item-login { - margin-bottom: 10px; + margin-bottom: 10px; } -/* chekboxes */ +/*chekboxes*/ .dp-po-CustomCheckbox { - align-items: center; - display: flex; + display: flex; + align-items: center; } .dp-po-CustomCheckbox input[type="checkbox"] { - height: 0; - opacity: 0; - position: absolute; - width: 0; + height: 0; + opacity: 0; + position: absolute; + width: 0; } .dp-po-CustomCheckbox input[type="checkbox"] + label { - color: var(--grey-darkest); - cursor: pointer; - font: var(--p-3); - line-height: 1; - min-height: 12px; - min-width: 12px; - padding-left: 23px; - position: relative; - user-select: none; + color: var(--grey-darkest); + cursor: pointer; + font: var(--p-3); + line-height: 1; + min-height: 12px; + min-width: 12px; + padding-left: 23px; + position: relative; + user-select: none; } .dp-po-CustomCheckbox input[type="checkbox"] + label::before { - background-color: var(--grey-lightest); - border: 1px solid var(--grey-light); - border-radius: 0.5px; - content: ""; - display: block; - height: 10px; - left: 0; - position: absolute; - top: 0; - width: 10px; + background-color: var(--grey-lightest); + border: 1px solid var(--grey-light); + border-radius: 0.5px; + content: ""; + display: block; + height: 10px; + width: 10px; + left: 0; + position: absolute; + top: 0; } .dp-po-CustomCheckbox input[type="checkbox"] + label::after { - background-image: url('data:image/svg+xml,'); - background-position: center center; - background-repeat: no-repeat; - background-size: 50% 50%; - background-size: 8px; - content: ""; - display: block; - height: 12px; - left: 0; - opacity: 0; - position: absolute; - top: 0; - width: 12px; + background-image: url('data:image/svg+xml,'); + background-position: center center; + background-repeat: no-repeat; + background-size: 50% 50%; + content: ""; + display: block; + height: 12px; + left: 0; + opacity: 0; + position: absolute; + top: 0; + width: 12px; + background-size: 8px; } .dp-po-CustomCheckbox input[type="checkbox"]:checked + label::after { - opacity: 1; + opacity: 1; } .dp-po-CustomCheckbox.dp-EmptyCheckbox input[type="checkbox"] + label { - padding-left: 12px; + padding-left: 12px; } .dp-po-ControlInput { - margin: 0; + margin: 0; } -/* checkbox-text/medium */ +/*checkbox-text/medium*/ .dp-po-CustomCheckbox.CustomCheckbox--medium input[type="checkbox"] + label { - color: var(--grey-dark); - font: var(--p-xxl); - padding-left: 29px; + color: var(--grey-dark); + font: var(--p-xxl); + padding-left: 29px; } .dp-po-CustomCheckbox.CustomCheckbox--medium input[type="checkbox"] + label::before { - background-color: var(--white); - border-radius: 4px; - height: 18px; - width: 18px; + height: 18px; + width: 18px; + border-radius: 4px; + background-color: var(--white); } .dp-po-CustomCheckbox.CustomCheckbox--medium input[type="checkbox"] + label::after { - background-size: 14px; - height: 19px; - width: 19px; + width: 19px; + height: 19px; + background-size: 14px; } -/* hover */ +/*hover*/ .dp-po-CustomCheckbox.CustomCheckbox--medium { - align-items: center; - display: flex; - justify-content: space-between; - padding: 7px 10px 7px 19px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 7px 10px 7px 19px; } .dp-po-CustomCheckbox.CustomCheckbox--medium:hover { - background-color: var(--grey-lighter); + background-color: var(--grey-lighter); } .dp-po-CustomCheckbox.CustomCheckbox--medium:hover .dp-po-Checkbox-description { - display: block; + display: block; } .dp-po-Checkbox-description { - color: var(--brand-primary); - display: none; - font: var(--p-xl); + color: var(--brand-primary); + font: var(--p-xl); + display: none; } /* Forms/radiobutton */ .dp-po-RadioWrapper .dp-po-RadioItem { - align-items: center; - display: flex; - margin-bottom: 15px; + margin-bottom: 15px; + display: flex; + align-items: center; } .dp-po-RadioWrapper input[type="radio"] { - appearance: none; - background-clip: content-box; - background-color: var(--white); - border: 2px solid var(--grey); - border-radius: 100%; - content: ""; - display: inline-block; - height: 16px; - margin: 0; - outline: none; - padding: 2px; - width: 16px; + appearance: none; + background-clip: content-box; + background-color: var(--white); + border: 2px solid var(--grey); + border-radius: 100%; + content: ""; + display: inline-block; + margin: 0; + outline: none; + padding: 2px; + height: 16px; + width: 16px; } .dp-po-RadioWrapper input[type="radio"]:checked { - background-color: var(--brand-primary); + background-color: var(--brand-primary); } .dp-po-RadioWrapper [type="radio"]:checked + label, .dp-po-RadioWrapper [type="radio"]:not(:checked) + label { - color: var(--grey-darkest); - cursor: pointer; - font: var(--h-xl); - padding-left: 10px; + cursor: pointer; + font: var(--h-xl); + padding-left: 10px; + color: var(--grey-darkest); } -/* upload-item */ +/*upload-item*/ .dp-po-Upload { - align-items: center; - border: 2px dashed var(--grey-light); - border-radius: 4px; - color: var(--grey); - display: flex; - font: var(--p-2); - font-style: italic; - max-width: max-content; - min-width: 345px; - padding: 11px 19px; + display: flex; + align-items: center; + color: var(--grey); + font-style: italic; + font: var(--p-2); + border: 2px dashed var(--grey-light); + max-width: max-content; + padding: 11px 19px; + border-radius: 4px; + min-width: 345px; } .dp-po-Upload-item { - align-items: center; - background-color: var(--white); - border-radius: 4px; - color: var(--grey-dark); - cursor: pointer; - display: flex; - font-style: normal; - max-width: max-content; + background-color: var(--white); + color: var(--grey-dark); + border-radius: 4px; + display: flex; + align-items: center; + max-width: max-content; + font-style: normal; + cursor: pointer; } .dp-po-Upload-item label { - align-items: center; - cursor: pointer; - display: flex; - padding: 10px 12px; + padding: 10px 12px; + display: flex; + align-items: center; + cursor: pointer; } .dp-po-Upload-item .dp-po-Icon { - margin-right: 10px; + margin-right: 10px; } .dp-po-Choose-btn { - border: 2px solid var(--grey-light); - margin-right: 10px; - position: relative; + position: relative; + border: 2px solid var(--grey-light); + margin-right: 10px; } .dp-po-Choose-btn .dp-po-Icon { - background-size: 17px 21px; - height: 21px; - width: 17px; + width: 17px; + height: 21px; + background-size: 17px 21px; } .dp-po-Dragdrop-btn { - margin-left: 10px; + margin-left: 10px; } .dp-po-Choose-btn input { - display: none; - height: 100%; - width: 100%; + display: none; + width: 100%; + height: 100%; } -/* is-uploaded */ +/*is-uploaded*/ .dp-po-Upload.is-uploaded .dp-po-Upload-wrapper { - display: none; + display: none; } .dp-po-Upload .dp-po-Avatar { - position: relative; + position: relative; } .dp-po-Upload .dp-po-Avatar-icon { - height: 50px; - width: 50px; + width: 50px; + height: 50px; } .dp-po-Upload .dp-po-Avatar .dp-po-Icon { - background-color: var(--white); - bottom: 0; - height: 15px; - margin: 0; - position: absolute; - right: 0; - width: 15px; + position: absolute; + right: 0; + bottom: 0; + background-color: var(--white); + width: 15px; + height: 15px; + margin: 0; } .dp-po-Upload.is-uploaded .dp-po-Choose-btn { - border: 0; + border: 0; } -/* captcha */ +/*captcha*/ .dp-po-captcha { - align-items: center; - display: flex; + display: flex; + align-items: center; } .dp-po-captcha input { - border: 2px dashed var(--grey-light); - border-radius: 4px; - color: var(--grey); - outline: none; - padding: 10px; + border: 2px dashed var(--grey-light); + border-radius: 4px; + padding: 10px; + outline: none; + color: var(--grey); } .dp-po-captcha .dp-po-Icon { - margin: 0 10px; + margin: 0 10px; } .dp-po-captcha .dp-po-Icon + input { - background-color: var(--grey-lightest); - border: 2px solid var(--grey-light); + border: 2px solid var(--grey-light); + background-color: var(--grey-lightest); } .dp-po-captcha input::placeholder { - color: var(--grey); - font: var(--p-2); + color: var(--grey); + font: var(--p-2); } -/* flagged-list-item */ +/*flagged-list-item*/ .dp-po-list.comment--item .dp-po-subtitle { - color: var(--grey-darkest); - font: var(--h-5-medium); - justify-content: space-between; + color: var(--grey-darkest); + font: var(--h-5-medium); + justify-content: space-between; } .comment--item .dp-po-username { - align-items: center; - color: var(--grey-darkest); - display: flex; - font: var(--h-5-medium); + display: flex; + align-items: center; + color: var(--grey-darkest); + font: var(--h-5-medium); } .comment--item .label--time-box { - margin-bottom: 5px; + margin-bottom: 5px; } .dp-po-list.comment--item input { - background-color: var(--grey-lightest); - border: 0; - margin-left: 40px; - padding: 10px; + background-color: var(--grey-lightest); + border: 0; + padding: 10px; + margin-left: 40px; } .dp-po-email { - color: var(--grey-dark); - font: var(--p-2); - margin-left: 5px; + color: var(--grey-dark); + font: var(--p-2); + margin-left: 5px; } .dp-po-email:hover { - color: var(--grey-dark); + color: var(--grey-dark); } .comment--item .dp-po-Textarea { - margin-left: 40px; + margin-left: 40px; } .comment--item .dp-po-Avatar-icon { - height: 30px; - margin-right: 10px; - width: 30px; + width: 30px; + height: 30px; + margin-right: 10px; } -/* flagged-list-item */ +/*flagged-list-item*/ .dp-po-list.flagged--item { - border-left: 2px solid var(--danger); - padding-left: 10px; + border-left: 2px solid var(--danger); + padding-left: 10px; } .dp-po-list.flagged--item .dp-po-title-item { - background-color: var(--danger); - border-radius: 2px; - color: var(--white); - font: var(--p-n-semibold-caps); - margin-bottom: 8px; - max-width: 150px; - padding: 5px; - width: 100%; -} + color: var(--white); + font: var(--p-n-semibold-caps); + background-color: var(--danger); + padding: 5px; + border-radius: 2px; + width: 100%; + max-width: 150px; + margin-bottom: 8px; +} \ No newline at end of file diff --git a/packages/style/src/messenger-components/dp-po-Initiator.css b/packages/style/src/messenger-components/dp-po-Initiator.css index bee53eff..59d9a498 100644 --- a/packages/style/src/messenger-components/dp-po-Initiator.css +++ b/packages/style/src/messenger-components/dp-po-Initiator.css @@ -1,8 +1,8 @@ .Icon--initiator, .Close--interaction { - background-color: var(--brand-primary); - border-radius: 50%; - cursor: pointer; - height: 60px; - width: 60px; -} + background-color: var(--brand-primary); + width: 60px; + height: 60px; + border-radius: 50%; + cursor: pointer; +} \ No newline at end of file diff --git a/packages/style/src/messenger-components/dp-po-avatars.css b/packages/style/src/messenger-components/dp-po-avatars.css index 82d0b93e..bcc3cb55 100644 --- a/packages/style/src/messenger-components/dp-po-avatars.css +++ b/packages/style/src/messenger-components/dp-po-avatars.css @@ -1,28 +1,28 @@ .dp-po-Avatar-icon { - margin-left: 0; + margin-left: 0; } .Avatar--circular-xl { - height: 60px; - width: 60px; + width: 60px; + height: 60px; } .Avatar--circular-l { - height: 44px; - width: 44px; + width: 44px; + height: 44px; } .Avatar--circular-m { - height: 32px; - width: 32px; + width: 32px; + height: 32px; } -.Avatar--circular-s { - height: 22px; - width: 22px; +.Avatar--circular-s{ + width: 22px; + height: 22px; } .Avatar--square-xs { - height: 18px; - width: 18px; -} + width: 18px; + height: 18px; +} \ No newline at end of file diff --git a/packages/style/src/messenger-components/dp-po-buttons.css b/packages/style/src/messenger-components/dp-po-buttons.css index 96e0be9e..cc66f17a 100644 --- a/packages/style/src/messenger-components/dp-po-buttons.css +++ b/packages/style/src/messenger-components/dp-po-buttons.css @@ -1,16 +1,16 @@ .Button--large.Button--messenger { - font: var(--messenger-b-1); max-height: 36px; min-width: 318px; padding: 0; + font: var(--messenger-b-1); } .Button--medium.Button--messenger { - background-color: var(--white); - border: 1.5px solid var(--brand-primary); + min-width: 282px; color: var(--grey-darkest); font: var(--messenger-b-2); - min-width: 282px; + background-color: var(--white); + border: 1.5px solid var(--brand-primary); } .Button--medium.Button--messenger:hover { @@ -24,30 +24,30 @@ .dp-po-Button.Button--danger { background-color: var(--danger); - border: none; color: var(--white); + border: none; font: var(--messenger-b-2); } .dp-po-Button.Button--danger:hover { - background-color: rgba(232, 73, 84, 0.7); + background-color: rgba(232, 73, 84, .7); } .dp-po-Button.Button--success { background-color: var(--success); - border: none; color: var(--white); + border: none; font: var(--messenger-b-2); } .dp-po-Button.Button--success:hover { - background-color: rgba(84, 177, 98, 0.7); + background-color: rgba(84, 177, 98, .7); } .dp-po-Button.Button--xsmall { font: var(--messenger-b-2); - max-height: 36px; min-width: 94px; + max-height: 36px; } .dp-po-Button.Button--ghost, @@ -60,7 +60,7 @@ } .dp-po-Button.Button--ghost.Button--danger:hover { - color: rgba(232, 73, 84, 0.7); + color: rgba(232, 73, 84, .7); } .dp-po-Button.Button--ghost.Button--success { @@ -68,5 +68,5 @@ } .dp-po-Button.Button--ghost.Button--success:hover { - color: rgba(84, 177, 98, 0.7); -} + color: rgba(84, 177, 98, .7); +} \ No newline at end of file diff --git a/packages/style/src/messenger-components/dp-po-cards.css b/packages/style/src/messenger-components/dp-po-cards.css index f65fceac..31385ec1 100644 --- a/packages/style/src/messenger-components/dp-po-cards.css +++ b/packages/style/src/messenger-components/dp-po-cards.css @@ -1,79 +1,79 @@ .dp-po-card.Card--messenger { - background-color: var(--white); - border-radius: 4px; - box-shadow: var(--shadow-bottom); - padding: 20px; + padding: 20px; + background-color: var(--white); + box-shadow: var(--shadow-bottom); + border-radius: 4px; } .Card--messenger .dp-po-card-title { - background-color: transparent; - border-bottom: 2px solid var(--brand-primary); - border-radius: 0; - font: var(--messenger-h-2); + border-radius: 0; + background-color: transparent; + font: var(--messenger-h-2); + border-bottom: 2px solid var(--brand-primary); } .Card--messenger.Card-medium .dp-po-card-title { - border-bottom: 2px solid var(--grey); + border-bottom: 2px solid var(--grey); } .dp-po-Main-frame { - background-color: var(--grey-lightest); - border-radius: 4px; - box-shadow: var(--shadow-bottom); - display: flex; - height: 540px; - max-width: 380px; - width: 100%; + display: flex; + background-color: var(--grey-lightest); + box-shadow: var(--shadow-bottom); + border-radius: 4px; + width: 100%; + max-width: 380px; + height: 540px; } .dp-po-frame-copyright { - color: var(--grey-dark); - display: flex; - font: var(--messenger-p-3); - justify-content: center; - margin: auto auto 0; - position: relative; - width: 80%; + position: relative; + display: flex; + justify-content: center; + color: var(--grey-dark); + font: var(--messenger-p-3); + margin: auto auto 0; + width: 80%; } -.dp-po-frame-copyright::before, -.dp-po-frame-copyright::after { - background-color: var(--grey-light); - content: ""; - display: block; - height: 1px; - position: absolute; - top: 7.5px; - width: 68px; +.dp-po-frame-copyright:before, +.dp-po-frame-copyright:after { + content: ''; + position: absolute; + display: block; + top: 7.5px; + width: 68px; + height: 1px; + background-color: var(--grey-light); } -.dp-po-frame-copyright::before { - left: 0; +.dp-po-frame-copyright:before { + left: 0; } -.dp-po-frame-copyright::after { - right: 0; +.dp-po-frame-copyright:after { + right: 0; } .dp-po-frame-copyright .dp-po-Icon { - background-size: 19px 20px; - height: 20px; - width: 20px; + width: 20px; + height: 20px; + background-size: 19px 20px; } .dp-po-copyright-deskpro { - color: #1d3e55; - display: flex; - padding-left: 20px; - position: relative; + color: #1D3E55; + display: flex; + position: relative; + padding-left: 20px; } -.dp-po-copyright-deskpro::after { - background-color: var(--grey-light); - content: ""; - height: 80%; - left: 10px; - position: absolute; - top: 0; - width: 1px; +.dp-po-copyright-deskpro:after { + position: absolute; + content: ''; + left: 10px; + top: 0; + width: 1px; + height: 80%; + background-color: var(--grey-light); } diff --git a/packages/style/src/patterns/guides.css b/packages/style/src/patterns/guides.css index af3811f3..ac13578b 100644 --- a/packages/style/src/patterns/guides.css +++ b/packages/style/src/patterns/guides.css @@ -1,121 +1,121 @@ .dp-po-Guides { - border: 2px solid var(--grey-light); - border-radius: 6px; - max-width: 300px; + border: 2px solid var(--grey-light); + border-radius: 6px; + max-width: 300px; } .dp-po-Guides-title { - background-color: var(--info-light); - border-bottom: 1px solid var(--grey-light); - border-radius: 5px 5px 0 0; - padding: 20px; - position: relative; - z-index: 1; + background-color: var(--info-light); + border-radius: 5px 5px 0px 0px; + border-bottom: 1px solid var(--grey-light); + padding: 20px; + z-index: 1; + position: relative; } .dp-po-Guides-content { - color: var(--grey-darkest); - font: var(--p-1); - padding: 20px 20px 0; + padding: 20px 20px 0; + color: var(--grey-darkest); + font: var(--p-1); } .dp-po-Form { - border-bottom: 1px solid var(--grey); - padding: 0 0 20px; + border-bottom: 1px solid var(--grey); + padding: 0 0 20px; } .dp-po-Guides-select { - position: relative; + position: relative; } .dp-po-Guides-select select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: var(--grey-lighter); - border: none; - border-radius: 4px; - color: var(--grey-darkest); - font: var(--b-1-semibold); - outline: none; - padding: 7px 10px; - width: 100%; -} - -.dp-po-Guides-select::before { - background: url('data:image/svg+xml,') no-repeat center; - content: ""; - cursor: pointer; - height: 100%; - position: absolute; - right: 0; - top: 0; - width: 30px; - z-index: 2; -} - -.dp-po-Guides-select::after { - background-color: var(--brand-primary); - border-left: 2px solid var(--white); - content: ""; - height: 100%; - position: absolute; - right: 0; - top: 0; - width: 30px; - z-index: 1; + width: 100%; + border: none; + color: var(--grey-darkest); + font: var(--b-1-semibold); + background: var(--grey-lighter); + border-radius: 4px; + padding: 7px 10px; + outline: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.dp-po-Guides-select:before { + content: ""; + position: absolute; + width: 30px; + height: 100%; + right: 0; + top: 0; + cursor: pointer; + background: url('data:image/svg+xml,') no-repeat center; + z-index: 2; +} + +.dp-po-Guides-select:after { + background-color: var(--brand-primary); + content: ""; + position: absolute; + width: 30px; + height: 100%; + right: 0; + top: 0; + z-index: 1; + border-left: 2px solid var(--white); } .dp-po-Guides-content .dp-po-Link { - padding: 20px 0; + padding: 20px 0; } .dp-po-News-wrapper.dp-po-card-atom { - background-color: var(--grey-lightest); - padding: 0; + background-color: var(--grey-lightest); + padding: 0; } .dp-po-News-wrapper.dp-po-card-atom .dp-po-News { - align-items: center; - background-color: var(--grey-lightest); - border-bottom: 1px solid var(--grey-light); - justify-content: space-between; - padding: 10px; + justify-content: space-between; + align-items: center; + padding: 10px; + border-bottom: 1px solid var(--grey-light); + background-color: var(--grey-lightest); } .dp-po-News-wrapper.dp-po-card-atom .dp-calendar { - background-color: transparent; - border: 0; - display: flex; + display: flex; + border: 0; + background-color: transparent; } .dp-po-News-wrapper.dp-po-card-atom .dp-calendar li { - border: 0; - padding: 0; + border: 0; + padding: 0; } .dp-po-News-wrapper.dp-po-card-atom .dp-po-News-content { - display: block; - margin: 0; - padding: 10px; + display: block; + margin: 0; + padding: 10px; } .dp-po-News-wrapper.dp-po-card-atom { - background-color: var(--white); + background-color: var(--white); } .dp-po-News-wrapper.dp-po-card-atom .dp-po-title-item { - font: var(--h-5-semibold); - margin-bottom: 10px; + font: var(--h-5-semibold); + margin-bottom: 10px; } .dp-po-News-wrapper.dp-po-card-atom .dp-po-txt { - font: var(--p-1); - margin: 10px 0 0; + font: var(--p-1); + margin: 10px 0 0; } .dp-po-News-wrapper.dp-po-card-atom .dp-po-Avatar { - border-top: 1px solid var(--grey); - margin-top: 25px; - padding-top: 11px; -} + border-top: 1px solid var(--grey); + padding-top: 11px; + margin-top: 25px; +} \ No newline at end of file diff --git a/packages/style/src/patterns/news.css b/packages/style/src/patterns/news.css index 3e36c666..58d70942 100644 --- a/packages/style/src/patterns/news.css +++ b/packages/style/src/patterns/news.css @@ -1,152 +1,152 @@ .dp-po-News-wrapper { - border: 2px solid var(--grey-light); - border-radius: 6px; - padding: 10px; + border: 2px solid var(--grey-light); + border-radius: 6px; + padding: 10px; } .dp-po-News-wrapper.is-active { - border: 2px solid var(--brand-primary); + border: 2px solid var(--brand-primary); } .dp-po-News { - display: flex; + display: flex; } .dp-po-News .dp-po-list { - flex: 0 1 100%; + flex: 0 1 100%; } .dp-po-News .dp-po-right-part { - align-items: flex-end; - display: flex; - flex-direction: column; - justify-content: space-between; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-end; } .dp-po-News .dp-calendar { - flex: 0 0 auto; - margin-right: 10px; + margin-right: 10px; + flex: 0 0 auto; } .dp-po-News .dp-po-title-item { - color: var(--grey-darkest); - font: var(--h-3--medium); - margin-bottom: 2px; + font: var(--h-3--medium); + color: var(--grey-darkest); + margin-bottom: 2px; } .dp-po-News .dp-po-subtitle { - color: var(--grey-darkest); - font: var(--h-6); + font: var(--h-6); + color: var(--grey-darkest); } .dp-po-News .dp-po-list input { - border-bottom: none; - padding: 5px 0 0; + border-bottom: none; + padding: 5px 0 0; } .dp-po-News .dp-po-list input::placeholder { - color: var(--grey-darkest); - font: var(--p-1); + color: var(--grey-darkest); + font: var(--p-1); } .dp-po-News + .dp-po-arrow { - display: flex; - margin: -15px 0 0 auto; + display: flex; + margin: -15px 0px 0px auto; } .dp-po-News-wrapper .dp-po-News-content { - color: var(--grey-darkest); - display: none; - font: var(--p-2); - margin-left: 103px; + margin-left: 103px; + color: var(--grey-darkest); + font: var(--p-2); + display: none; } .dp-po-arrow.is-active + .dp-po-News-content { - display: block; + display: block; } .dp-po-News-wrapper .dp-po-title { - font: var(--h-3--medium); + font: var(--h-3--medium); } .dp-po-article-title { - color: var(--grey-darkest); - display: flex; - font: var(--mh-3-medium); - margin: 20px 0; - position: relative; + color: var(--grey-darkest); + font: var(--mh-3-medium); + position: relative; + display: flex; + margin: 20px 0; } -.dp-po-article-title::after { - background-color: var(--brand-primary); - content: ""; - height: 1px; - left: 0; - position: absolute; - right: 0; - top: calc(50% - 2px); - width: 100%; +.dp-po-article-title:after { + position: absolute; + right: 0; + left: 0; + top: calc(50% - 2px); + content: ""; + background-color: var(--brand-primary); + width: 100%; + height: 1px; } .dp-po-text-part { - background-color: var(--white); - padding-right: 5px; - z-index: 2; + background-color: var(--white); + z-index: 2; + padding-right: 5px; } .dp-po-article-wrap .dp-po-buttons-wrap { - align-items: center; - display: flex; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; } .dp-po-article-wrap .Button--success { - background-color: transparent; - border: 1.5px solid var(--success); - color: var(--success); + color: var(--success); + background-color: transparent; + border: 1.5px solid var(--success); } .dp-po-article-wrap .Button--danger { - background-color: transparent; - border: 1.5px solid var(--danger); - color: var(--danger); + color: var(--danger); + background-color: transparent; + border: 1.5px solid var(--danger); } .dp-po-article-wrap .dp-po-Button .dp-po-Icon { - background-size: 12px; - margin-right: 5px; + background-size: 12px; + margin-right: 5px; } .dp-po-article-wrap .dp-po-Button:hover { - background-color: transparent; + background-color: transparent; } .dp-po-article-wrap .dp-po-Button + .dp-po-Button { - margin-left: 20px; + margin-left: 20px; } .dp-po-article-wrap .dp-po-description { - color: var(--grey-dark); - display: flex; - font: var(--p-2); - justify-content: center; - padding: 20px 0 0; + display: flex; + justify-content: center; + color: var(--grey-dark); + font: var(--p-2); + padding: 20px 0 0; } .dp-po-article-title ~ .dp-po-Link { - font: var(--p-1); - line-height: 2; + font: var(--p-1); + line-height: 2; } .article--comments .dp-po-Icon { - background-color: var(--grey-lightest); - border-radius: 50%; - cursor: pointer; - margin: 0 0 0 auto; - padding: 14px; - z-index: 1; + margin: 0 0 0 auto; + padding: 14px; + background-color: var(--grey-lightest); + border-radius: 50%; + z-index: 1; + cursor: pointer; } -.article--comments.dp-po-article-title::after { - width: calc(100% - 35px); +.article--comments.dp-po-article-title:after { + width: calc(100% - 35px); } diff --git a/packages/style/src/patterns/patterns.css b/packages/style/src/patterns/patterns.css index 25395beb..f07240db 100644 --- a/packages/style/src/patterns/patterns.css +++ b/packages/style/src/patterns/patterns.css @@ -1,159 +1,159 @@ .dp-po-Dropdown-container.Dropdown--filter .dp-po-dropdown-atom { - color: var(--grey-dark); - font: var(--h-5-medium); - padding: 15px 19px 5px; - position: relative; + font: var(--h-5-medium); + color: var(--grey-dark); + position: relative; + padding: 15px 19px 5px; } .dp-po-Dropdown-container.Dropdown--filter { - max-width: 300px; + max-width: 300px; } -.Dropdown--filter .dp-po-dropdown-atom::after { - background-color: var(--brand-primary); - content: ""; - height: 16px; - left: 0; - position: absolute; - top: calc(50% - 8px); - width: 2px; +.Dropdown--filter .dp-po-dropdown-atom:after { + position: absolute; + content: ""; + left: 0; + top: calc(50% - 8px); + background-color: var(--brand-primary); + width: 2px; + height: 16px; } .Dropdown--filter .dp-po-CustomCheckbox { - padding: 0; + padding: 0; } .Dropdown--filter .dp-po-dropdown-menu { - padding: 0 0 15px; + padding: 0 0 15px; } .Dropdown--filter .dp-po-dropdown-menu .dp-po-dropdown-menu-item { - background-color: transparent; - padding: 5px 19px; + padding: 5px 19px; + background-color: transparent; } .Dropdown--filter .dp-po-dropdown-menu .dp-po-dropdown-menu-item:first-child { - cursor: default; + cursor: default; } .Dropdown--filter .dp-po-CustomCheckbox:hover { - background-color: transparent; + background-color: transparent; } .dp-po-dropdown-menu-item { - color: var(--grey-dark); - font: var(--p-2); + font: var(--p-2); + color: var(--grey-dark); } .Dropdown--filter .dp-po-filter-link { - color: var(--grey-dark); - position: relative; + color: var(--grey-dark); + position: relative; } .dp-po-filter-link.is-active { - color: var(--brand-primary); - text-decoration: underline; + color: var(--brand-primary); + text-decoration: underline; } .Dropdown--filter .dp-po-filter-link + .dp-po-filter-link { - padding-left: 15px; + padding-left: 15px; } -.Dropdown--filter .dp-po-filter-link + .dp-po-filter-link::after { - background-color: var(--grey-dark); - content: ""; - height: 100%; - left: 5px; - position: absolute; - top: 0; - width: 1px; +.Dropdown--filter .dp-po-filter-link + .dp-po-filter-link:after { + content: ""; + position: absolute; + top: 0; + left: 5px; + width: 1px; + height: 100%; + background-color: var(--grey-dark); } .Dropdown--filter .dp-po-filter-link:hover { - color: var(--brand-primary); - text-decoration: underline; + color: var(--brand-primary); + text-decoration: underline; } -/* filter/select-date */ +/*filter/select-date*/ .Dropdown--select-date { - overflow: hidden; + overflow: hidden; } .Dropdown--select-date .dp-po-dropdown-menu-item { - display: flex; + display: flex; } .Dropdown--select-date .dp-po-dropdown-menu-item span { - flex: 0 0 30%; - position: relative; + flex: 0 0 30%; + position: relative; } .Dropdown--select-date .dp-po-dropdown-menu-item span:first-child { - flex: 0 0 40%; + flex: 0 0 40%; } .Dropdown--select-date .dp-po-dropdown-menu { - position: relative; + position: relative; } -.Dropdown--select-date .dp-po-dropdown-menu::after { - background-color: var(--grey-light); - content: ""; - height: 85%; - left: 85px; - position: absolute; - top: 8px; - width: 1px; +.Dropdown--select-date .dp-po-dropdown-menu:after { + position: absolute; + content: ""; + top: 8px; + left: 85px; + height: 85%; + width: 1px; + background-color: var(--grey-light); } .Dropdown--select-date .dp-po-dropdown-menu .dp-po-dropdown-menu-item:hover { - color: var(--grey-dark); + color: var(--grey-dark); } .Dropdown--select-date .dp-po-dropdown-menu-item .is-active { - color: var(--brand-primary); - font: var(--p-2-bold); + color: var(--brand-primary); + font: var(--p-2-bold); } .Dropdown--filter .dp-po-count { - background-color: var(--white); - border-radius: 8px; - color: var(--grey-darkest); - font: var(--p-3); - margin-left: 10px; - padding: 0 4px; + background-color: var(--white); + font: var(--p-3); + color: var(--grey-darkest); + border-radius: 8px; + padding: 0 4px; + margin-left: 10px; } -/* filter/reset-category */ +/*filter/reset-category*/ .Dropdown--Select-type .dp-po-filter-link { - color: var(--brand-primary); - text-orientation: none; + color: var(--brand-primary); + text-orientation: none; } .Dropdown--Select-type .dp-po-filter-link:hover { - text-decoration: none; + text-decoration: none; } .Dropdown--Select-type .dp-po-dropdown-menu-item { - margin-bottom: 10px; + margin-bottom: 10px; } .Dropdown--Select-type .dp-po-dropdown-menu { - padding-top: 10px; + padding-top: 10px; } .Dropdown--Select-type .dp-po-dropdown-menu-item:not(:first-child) { - color: var(--grey-dark); - font: var(--p-3-bold); + color: var(--grey-dark); + font: var(--p-3-bold); } .Dropdown--Select-type .dp-po-dropdown-menu-item:hover { - color: var(--grey-dark); - cursor: default; + color: var(--grey-dark); + cursor: default; } .dp-po-dropdown-menu-item .dp-po-filter { - margin-bottom: 10px; + margin-bottom: 10px; } diff --git a/packages/style/src/style.css b/packages/style/src/style.css index 92c900c8..f1538577 100644 --- a/packages/style/src/style.css +++ b/packages/style/src/style.css @@ -1,14 +1,13 @@ @import "arrows.css"; @import "colours.css"; @import "custom.css"; -@import "dp-Icons.css"; @import "fonts.css"; @import "Icons.css"; @import "vars.css"; @import "components/dp-po-avatars.css"; @import "components/dp-po-breadcrumbs.css"; @import "components/dp-po-buttons.css"; -@import "components/dp-po-calendar.css"; +@import "components/dp-po-calender.css"; @import "components/dp-po-cards.css"; @import "components/dp-po-date.css"; @import "components/dp-po-dividers.css"; diff --git a/packages/style/src/vars.css b/packages/style/src/vars.css index 674f54ce..f2e891af 100644 --- a/packages/style/src/vars.css +++ b/packages/style/src/vars.css @@ -79,7 +79,7 @@ --is-uppercase: uppercase; --is-italic: italic; - /* Header sizes */ +/*Header sizes*/ --font-H1: 36px; --font-H2: 23px; @@ -97,41 +97,41 @@ --h-5-semibold: var(--is-semibold) var(--font-H5)/var(--line-height-base) "Rubik", sans-serif; --h-6: var(--is-regular) var(--font-H6)/var(--line-height-base) "Rubik", sans-serif; - /* Body sizes */ +/*Body sizes*/ - --font-p1: 18px; - --font-p2: 15px; - --font-p3: 12px; +--font-p1: 18px; +--font-p2: 15px; +--font-p3: 12px; - --p-1: var(--is-regular) var(--font-p1)/var(--line-height-base) "Lato", sans-serif; - --p-2: var(--is-regular) var(--font-p2)/var(--line-height-base) "Lato", sans-serif; - --p-2-medium: var(--is-medium) var(--font-p2)/var(--line-height-base) "Lato", sans-serif; - --p-2-bold: var(--is-bold) var(--font-p2)/var(--line-height-base) "Lato", sans-serif; - --p-3: var(--is-regular) var(--font-p3)/var(--line-height-base) "Lato", sans-serif; - --p-3-semibold: var(--is-semibold) var(--font-p3)/var(--line-height-base) "Lato", sans-serif; - --p-3-bold: var(--is-bold) var(--font-p3)/var(--line-height-base) "Lato", sans-serif; +--p-1: var(--is-regular) var(--font-p1)/var(--line-height-base) "Lato", sans-serif; +--p-2: var(--is-regular) var(--font-p2)/var(--line-height-base) "Lato", sans-serif; +--p-2-medium: var(--is-medium) var(--font-p2)/var(--line-height-base) "Lato", sans-serif; +--p-2-bold: var(--is-bold) var(--font-p2)/var(--line-height-base) "Lato", sans-serif; +--p-3: var(--is-regular) var(--font-p3)/var(--line-height-base) "Lato", sans-serif; +--p-3-semibold: var(--is-semibold) var(--font-p3)/var(--line-height-base) "Lato", sans-serif; +--p-3-bold: var(--is-bold) var(--font-p3)/var(--line-height-base) "Lato", sans-serif; - /* Button sizes */ +/*Button sizes*/ - --font-b1: 14px; - --font-b2: 12px; - --font-b3: 10px; +--font-b1: 14px; +--font-b2: 12px; +--font-b3: 10px; - --b-1-semibold: var(--is-semibold) var(--font-b1)/var(--line-height-base) "Lato", sans-serif; - --b-2: var(--is-regular) var(--font-b2)/var(--line-height-base) "Lato", sans-serif; - --b-2-semibold: var(--is-semibold) var(--font-b2)/var(--line-height-base) "Lato", sans-serif; - --b-3: var(--is-regular) var(--font-b3)/var(--line-height-base) "Open Sans", sans-serif; - --b-3-semibold: var(--is-semibold) var(--font-b3)/var(--line-height-base) "Open Sans", sans-serif; +--b-1-semibold: var(--is-semibold) var(--font-b1)/var(--line-height-base) "Lato", sans-serif; +--b-2: var(--is-regular) var(--font-b2)/var(--line-height-base) "Lato", sans-serif; +--b-2-semibold: var(--is-semibold) var(--font-b2)/var(--line-height-base) "Lato", sans-serif; +--b-3: var(--is-regular) var(--font-b3)/var(--line-height-base) "Open Sans", sans-serif; +--b-3-semibold: var(--is-semibold) var(--font-b3)/var(--line-height-base) "Open Sans", sans-serif; - /* Inline Text */ +/*Inline Text*/ - --font-s2: 12px; +--font-s2: 12px; - --s-2: var(--is-regular) var(--font-s2)/var(--line-height-base) "Lato", sans-serif; +--s-2: var(--is-regular) var(--font-s2)/var(--line-height-base) "Lato", sans-serif; - /* Mobile fonts */ +/* Mobile fonts */ - /* Header sizes */ +/*Header sizes*/ --font-MH1: 26px; --font-MH2: 22px; @@ -142,68 +142,68 @@ --mh-3: var(--is-regular) var(--font-MH3)/var(--line-height-base) "Rubik", sans-serif; --mh-3-medium: var(--is-medium) var(--font-MH3)/var(--line-height-base) "Rubik", sans-serif; - /* Body sizes */ +/*Body sizes*/ - --font-mp1: 16px; - --font-mp2: 15px; +--font-mp1: 16px; +--font-mp2: 15px; - --mp-1: var(--is-regular) var(--font-mp1)/var(--line-height-base) "Lato", sans-serif; - --mp-1-bold: var(--is-bold) var(--font-mp2)/var(--line-height-base) "Lato", sans-serif; - --mp-2-medium: var(--is-medium) var(--font-mp2)/var(--line-height-base) "Lato", sans-serif; +--mp-1: var(--is-regular) var(--font-mp1)/var(--line-height-base) "Lato", sans-serif; +--mp-1-bold: var(--is-bold) var(--font-mp2)/var(--line-height-base) "Lato", sans-serif; +--mp-2-medium: var(--is-medium) var(--font-mp2)/var(--line-height-base) "Lato", sans-serif; - /* Messenger Typography */ +/*Messenger Typography*/ - /* Header sizes */ +/*Header sizes*/ - --m-H1: 28px; - --m-H2: 18px; - --m-H3: 16px; +--m-H1: 28px; +--m-H2: 18px; +--m-H3: 16px; - --messenger-h-1: var(--is-regular) var(--m-H1)/var(--line-height-base) "Rubik", sans-serif; - --messenger-h-2: var(--is-regular) var(--m-H2)/var(--line-height-base) "Rubik", sans-serif; - --messenger-h-3-medium: var(--is-medium) var(--m-H3)/var(--line-height-base) "Rubik", sans-serif; +--messenger-h-1: var(--is-regular) var(--m-H1)/var(--line-height-base) "Rubik", sans-serif; +--messenger-h-2: var(--is-regular) var(--m-H2)/var(--line-height-base) "Rubik", sans-serif; +--messenger-h-3-medium: var(--is-medium) var(--m-H3)/var(--line-height-base) "Rubik", sans-serif; - /* Messenger Body sizes */ +/*Messenger Body sizes*/ - --m-p1: 16px; - --m-p2: 14px; - --m-p3: 12px; +--m-p1: 16px; +--m-p2: 14px; +--m-p3: 12px; - --messenger-p-1: var(--is-regular) var(--m-p1)/var(--line-height-base) "Rubik", sans-serif; - --messenger-p-2: var(--is-regular) var(--m-p2)/var(--line-height-base) "Rubik", sans-serif; - --messenger-p-2-medium: var(--is-medium) var(--m-p2)/var(--line-height-base) "Rubik", sans-serif; - --messenger-p-3: var(--is-regular) var(--m-p3)/var(--line-height-base) "Rubik", sans-serif; +--messenger-p-1: var(--is-regular) var(--m-p1)/var(--line-height-base) "Rubik", sans-serif; +--messenger-p-2: var(--is-regular) var(--m-p2)/var(--line-height-base) "Rubik", sans-serif; +--messenger-p-2-medium: var(--is-medium) var(--m-p2)/var(--line-height-base) "Rubik", sans-serif; +--messenger-p-3: var(--is-regular) var(--m-p3)/var(--line-height-base) "Rubik", sans-serif; - /* Messenger Button sizes */ +/*Messenger Button sizes*/ - --m-b1: 16px; - --m-b2: 14px; - --m-b3: 12px; +--m-b1: 16px; +--m-b2: 14px; +--m-b3: 12px; - --messenger-b-1: var(--is-regular) var(--m-b1)/var(--line-height-base) "Rubik", sans-serif; - --messenger-b-2: var(--is-regular) var(--m-b2)/var(--line-height-base) "Rubik", sans-serif; - --messenger-b-3: var(--is-regular) var(--m-b3)/var(--line-height-base) "Rubik", sans-serif; +--messenger-b-1: var(--is-regular) var(--m-b1)/var(--line-height-base) "Rubik", sans-serif; +--messenger-b-2: var(--is-regular) var(--m-b2)/var(--line-height-base) "Rubik", sans-serif; +--messenger-b-3: var(--is-regular) var(--m-b3)/var(--line-height-base) "Rubik", sans-serif; - /* Messenger Inline Text and Captions */ +/*Messenger Inline Text and Captions*/ - --it-small: 16px; +--it-small: 16px; - --messenger-it-small: var(--is-regular) var(--it-small)/var(--line-height-base) "Rubik", sans-serif; +--messenger-it-small: var(--is-regular) var(--it-small)/var(--line-height-base) "Rubik", sans-serif; - /* Messenger Suggeted text */ +/*Messenger Suggeted text*/ - --m-s1: 16px; +--m-s1: 16px; - --messenger-s-1: var(--is-regular) var(--m-s1)/var(--line-height-base) "Rubik", sans-serif; +--messenger-s-1: var(--is-regular) var(--m-s1)/var(--line-height-base) "Rubik", sans-serif; - /* Deskpro Shadows */ - --shadow-bottom: 0 5px 5px rgba(0, 0, 0, 0.15); - --shadow-top-inset: inset 0 5px 5px 0 rgba(0, 0, 0, 0.15); - --shadow-bottom-left: -5px 5px 5px rgba(0, 0, 0, 0.15); - --shadow-bottom-right: 5px 5px 5px rgba(0, 0, 0, 0.15); - --shadow-left: -5px 0 5px rgba(0, 0, 0, 0.15); - --shadow-right: 5px 0 5px rgba(0, 0, 0, 0.15); +/* Deskpro Shadows */ +--shadow-bottom: 0 5px 5px rgba(0, 0, 0, 0.15); +--shadow-top-inset: inset 0 5px 5px 0 rgba(0, 0, 0, 0.15); +--shadow-bottom-left: -5px 5px 5px rgba(0, 0, 0, 0.15); +--shadow-bottom-right: 5px 5px 5px rgba(0, 0, 0, 0.15); +--shadow-left: -5px 0 5px rgba(0, 0, 0, 0.15); +--shadow-right: 5px 0 5px rgba(0, 0, 0, 0.15); - /* gradient */ - --brand-primary-gradient: linear-gradient(90deg, #3467a4 0%, #3a8dde 49.48%, #77b5e7 100%); -} +/*gradient*/ +--brand-primary-gradient: linear-gradient(90deg, #3467A4 0%, #3A8DDE 49.48%, #77B5E7 100%); +} \ No newline at end of file diff --git a/packages/style/website/static/demos/kb-view.html b/packages/style/website/static/demos/kb-view.html index 0f54b87d..4dccf4a2 100644 --- a/packages/style/website/static/demos/kb-view.html +++ b/packages/style/website/static/demos/kb-view.html @@ -9,8 +9,239 @@ KB View - Test KB View - Back +
+
+ +
+ +
+
+
+ + +
+
+
+ +
+
+ +
+
+ +
+
+
+
+

Deskpro for IT teams

+
    +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + NG +
    • +
+ +
+ Last updated: 23 May, 2019 by Jason Smith + + + + +
+ +
+ + This article will unpublish on 1 July 2019. +
+ +
+ +

Many IT teams have chosen to use Deskpro to manage internal IT requests from within their company. Deskpro's powerful customization and automation features give IT teams the ability to manage incidents and requests with ease and effectiveness.

+ +

This article is designed to highlight some of the key Deskpro features that will benefit your team and answer some commonly asked questions. The article will cover:

+ +
    +
  • Creating an effective, customized contact form for users to submit requests to
    • +
  • Categorizing tickets
    • +
  • Auto-assignment - route requests to the most relevant team or technician
    • +
  • Collaboration
    • +
  • Logging tasks and tracking projects
    • +
  • Easily track and respond to incidents from the help desk
    • +
  • Useful integrations
    • +
+ +

Dynamic Contact Forms

+ +

When dealing with IT-related requests, ensuring that users provide key information about their issue or request upfront helps you to manage their request more efficiently, reducing the amount of communication back and forth and avoiding the need to prompt the + user UserPartnership seed money user experience social proof z entrepreneur social media investor gen-z graphical user interface. for the vital information.

+ +

You can define the information the form collects by adding your own custom fields custom fieldsPartnership seed money user experience social proof z entrepreneur social media investor gen-z graphical user interface. and designing your form layouts.

+ +

You can follow our guide to setting up an effective, customized contact form.

+ +

The information provided by the user will be visible immediately to the agent within the ticket, empowering them to quickly troubleshoot or process a request.

+ +
+ Caption for the image + +
+ +
+
+ + +
+ 9 out of 10 people found this article helpful +
+ +
+ Add comment +
+ +
+
+
+
+ + + Subscribe + + + +
+ Contents + +
+ Labels + Getting started +
+
+ Related content + +
+ +
+ Share +
    +
    • +
    • +
    • +
    • +
    • +
    • +
+
+ +
+
    +
  • Created by
    • +
  • Nicholas Green
    • + +
  • First published
    • +
  • 12 Jun 2019
    • + +
  • Custom Field X
    • +
  • Value Y
    • + +
  • + Translations + Updated +
    • +
  • + + + French + + 23 days +
    • +
  • + + + German + + 2 weeks +
    • +
+ +
+ +
+
+
+
+
+ +
+