diff --git a/src/App.vue b/src/App.vue index 6eb3685b8..cb7ccc1be 100755 --- a/src/App.vue +++ b/src/App.vue @@ -109,5 +109,5 @@ export default { diff --git a/src/AppMenu.vue b/src/AppMenu.vue index eeb92d0f0..b171ee65b 100755 --- a/src/AppMenu.vue +++ b/src/AppMenu.vue @@ -2,7 +2,19 @@
- input + + General + +
+ Get Started + Theming + Designer + Sass API + Icons +
+ + + Form
@@ -32,7 +44,7 @@
- button + Button
@@ -41,7 +53,7 @@
- data + Data
@@ -58,7 +70,7 @@
- panel + Panel
@@ -73,7 +85,7 @@
- overlay + Overlay
@@ -84,7 +96,7 @@
- file + File
@@ -92,7 +104,7 @@
- menu + Menu
@@ -109,7 +121,7 @@
- charts + Chart
@@ -124,7 +136,7 @@
- message + Messages
@@ -133,7 +145,7 @@
- multimedia + Multimedia
@@ -141,7 +153,7 @@
- misc + Misc
diff --git a/src/assets/images/menu/apps.svg b/src/assets/images/menu/apps.svg deleted file mode 100644 index cb36c16c9..000000000 --- a/src/assets/images/menu/apps.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/images/menu/button.svg b/src/assets/images/menu/button.svg deleted file mode 100644 index d8d7ebb55..000000000 --- a/src/assets/images/menu/button.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/images/menu/charts.svg b/src/assets/images/menu/charts.svg deleted file mode 100644 index 2ba40d640..000000000 --- a/src/assets/images/menu/charts.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/images/menu/components.svg b/src/assets/images/menu/components.svg deleted file mode 100644 index e6f18ea1e..000000000 --- a/src/assets/images/menu/components.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/images/menu/data.svg b/src/assets/images/menu/data.svg deleted file mode 100644 index 403a396c0..000000000 --- a/src/assets/images/menu/data.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/images/menu/dragdrop.svg b/src/assets/images/menu/dragdrop.svg deleted file mode 100644 index e166ad006..000000000 --- a/src/assets/images/menu/dragdrop.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/images/menu/file.svg b/src/assets/images/menu/file.svg deleted file mode 100644 index 2a1d10fe5..000000000 --- a/src/assets/images/menu/file.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/images/menu/input.svg b/src/assets/images/menu/input.svg deleted file mode 100644 index 8219d7df4..000000000 --- a/src/assets/images/menu/input.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/images/menu/menu.svg b/src/assets/images/menu/menu.svg deleted file mode 100644 index e4cb41c3f..000000000 --- a/src/assets/images/menu/menu.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/images/menu/message.svg b/src/assets/images/menu/message.svg deleted file mode 100644 index d4178a5ed..000000000 --- a/src/assets/images/menu/message.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/images/menu/misc.svg b/src/assets/images/menu/misc.svg deleted file mode 100644 index c278b45ec..000000000 --- a/src/assets/images/menu/misc.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/images/menu/multimedia.svg b/src/assets/images/menu/multimedia.svg deleted file mode 100644 index c854e5f1a..000000000 --- a/src/assets/images/menu/multimedia.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/images/menu/overlay.svg b/src/assets/images/menu/overlay.svg deleted file mode 100644 index 04c1cc6b9..000000000 --- a/src/assets/images/menu/overlay.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/images/menu/panel.svg b/src/assets/images/menu/panel.svg deleted file mode 100644 index eb80bbe79..000000000 --- a/src/assets/images/menu/panel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss deleted file mode 100644 index 3b5a8d7f6..000000000 --- a/src/assets/styles/app.scss +++ /dev/null @@ -1,1492 +0,0 @@ -@charset "UTF-8"; - -@keyframes pulse { - 0% { - background-color: rgba(165, 165, 165, 0.1) - } - 50% { - background-color: rgba(165, 165, 165, 0.3) - } - 100% { - background-color: rgba(165, 165, 165, 0.1) - } -} - -$focusBorderColor:#BBDEFB; - -html { - font-size: 14px; -} - -body { - margin: 0px; - height: 100%; - overflow-x: hidden; - overflow-y: auto; - background-color: #ffffff; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-weight: normal; - color: #495057; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -input[type="number"] { - -moz-appearance: textfield; - - &::-webkit-outer-spin-button, - &::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; - } -} - -a { - text-decoration: none; - color: #1976D2; -} - -.layout-news { - position: fixed; - top: 0; - left: 0; - z-index: 997; - height: 70px; - width: 100%; - display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - background-image: url("assets/images/topbar-easter-2020-bg.jpg"); - - .layout-news-container { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - color: #ffffff; - font-weight: bold; - font-size: 20px; - - .layout-news-details { - display: flex; - align-items: center; - z-index: 1; - - .rate { - color: #f2b837; - font-size: 25px; - font-weight: bold; - margin: 0 .25em; - } - - .helper-text { - background-color: #f2b837; - color: #212121; - padding: 0 0.2em; - margin-right: 0.3em; - } - } - - img.layouts-news-text-image { - height: 60px; - } - - img.layouts-news-mockup-image { - height: 70px; - position: absolute; - right: 52px; - } - } - - .layout-news-close { - color: #fff; - position: absolute; - z-index: 2; - right: 28px; - background-color: rgba(0,0,0,.3); - border-radius: 50%; - display: -ms-flexbox; - display: flex; - justify-content: center; - align-items: center; - width: 23px; - height: 23px; - } -} - -.layout-wrapper.layout-news-active { - .layout-topbar { - top: 70px - } - - .layout-sidebar { - top: 140px; - height: calc(100% - 140px); - } - - .layout-config { - top: 140px; - height: calc(100% - 140px); - } - - .layout-content { - padding-top: 140px; - } -} - -.layout-topbar { - background-color: #ffffff; - display: block; - padding: 0; - height: 70px; - position: fixed; - top: 0; - left: 0; - width: 100%; - z-index: 997; - box-shadow: 0 0 4px rgba(0,0,0,0.25); - - .menu-button { - display: none; - color: #495057; - font-size: 24px; - position: absolute; - left: 0; - top: 0; - width: 70px; - height: 70px; - line-height: 70px; - text-align: center; - cursor: pointer; - transition: background-color .2s; - - &:hover { - background-color: #e9ecef; - } - - i { - line-height: inherit; - } - } - - .logo { - margin-left: 45px; - margin-top: 8px; - display: inline-block; - - img { - width: 180px; - } - - &:focus { - outline: 0 none; - transition: box-shadow .2s; - box-shadow: 0 0 0 0.2em $focusBorderColor; - } - } - - .topbar-menu { - list-style-type: none; - float: right; - margin: 0 60px 0 0; - padding: 0; - height: 100%; - - > li { - display: inline-block; - height: 70px; - line-height: 70px; - - > a { - text-decoration: none; - color: #495057; - min-width: 120px; - font-size: 16px; - display: inline-block; - text-align: center; - user-select: none; - line-height: inherit; - cursor: pointer; - transition: background-color .2s; - - &:hover { - background-color: #e9ecef; - } - - &:focus { - z-index: 1; - outline: 0 none; - transition: box-shadow .2s; - box-shadow: inset 0 0 0 0.2em $focusBorderColor; - } - } - - &.topbar-submenu { - position: relative; - - > ul { - position: absolute; - top: 70px; - right: 0; - width: 275px; - max-height: 400px; - background-color: #ffffff; - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); - overflow: auto; - list-style-type: none; - padding: 6px 12px; - margin: 0; - border-radius: 3px; - - > li { - line-height: 1; - - &.topbar-submenu-header { - padding: 6px 12px; - font-weight: bold; - text-align: left; - margin-top: 18px; - - &:first-child { - margin-top: 6px; - } - } - } - - a { - text-decoration: none; - color: #495057; - padding: 8px 12px; - display: block; - user-select: none; - transition: background-color .2s; - cursor: pointer; - - &:hover { - background-color: #e9ecef; - cursor: pointer; - } - - img { - width: 32px; - vertical-align: middle; - margin-right: 4px; - } - - span { - margin-left: 8px; - } - - i { - vertical-align: middle; - font-size: 18px; - margin-right: 4px; - margin-left: 4px; - color: #6c757d; - } - } - - li:last-child { - a { - border-bottom: 0 none; - } - } - } - - &.topbar-resources-submenu { - > ul { - a { - padding: 12px 6px; - - span { - margin-left: 6px; - } - } - - - } - } - } - } - - .theme-badge { - padding: 2px 4px; - vertical-align: middle; - border-radius: 3px; - color: #ffffff; - font-weight: bold; - font-size: 11px; - position: relative; - top: -1px; - } - - .theme-badge.material { - background: linear-gradient(to bottom, #2196F3, #2196F3); - } - - .theme-badge.bootstrap { - background: linear-gradient(to bottom, #563D7C, #966BD8); - } - - .theme-badge.darkmode { - background: linear-gradient(to bottom, #141d26, #5a6067); - } - } -} - -.layout-sidebar { - position: fixed; - left: 0; - top: 70px; - height: calc(100% - 70px); - background-color: #ffffff; - overflow: auto; - width: 250px; - box-shadow: 0 0 2px rgba(0,0,0,0.25); - - .layout-menu { - - > span { - width: 100%; - height: 50px; - display: block; - padding: 0px 0px 0px 20px; - margin-bottom: 12px; - background-color: #f8f9fa; - color: #767676; - font-weight: 700; - user-select: none; - transition: background-color .2s; - display: flex; - align-items: center; - - span { - font-size: 14px; - margin: 0px 0px 0px 8px; - display: block; - } - - img { - width: 20px; - height: auto; - float: left; - - &.layout-menu-icon-active { - display: none; - } - - &.layout-menu-icon-inactive { - display: inline; - } - } - } - - > div { - background-color: #ffffff; - padding: 0 15px 15px 15px; - display: flex; - flex-direction: column; - - a { - display: inline-block; - padding: 6px; - cursor: pointer; - border-radius: 4px; - font-size: 14px; - color: #495057; - transition: background-color .2s; - - &:hover { - background-color: #e9ecef; - } - - &:focus { - z-index: 1; - outline: 0 none; - transition: box-shadow .2s; - box-shadow: 0 0 0 0.2em $focusBorderColor; - } - - &.router-link-active { - color: #526F89; - font-weight: 700; - } - - .menuitem-badge { - background: linear-gradient(to bottom, #96c93d, #00b09b); - padding: 2px 4px; - vertical-align: middle; - border-radius: 3px; - color: #ffffff; - font-weight: bold; - font-size: 11px; - position: relative; - top: -1px; - } - } - } - } -} - -.layout-mask { - opacity: .1; -} - -.layout-mask-active { - z-index: 998; - width: 100%; - height: 100%; - position: fixed; - top: 70px; - left: 0; - background-color: #4c5254; - opacity: .7; - transition: opacity .5s; -} - -.layout-content { - margin-left: 250px; - padding-top: 70px; - - .content-section { - display: block; - padding: 30px; - - h2 { - margin-top: 0; - } - - &.introduction { - color: #ffffff; - background-color: #607D8B; - - .feature-intro { - - h1 { - font-size: 28px; - margin: 0 0 20px 0; - color: #ffffff; - font-weight: 700; - } - - p { - margin: 0; - line-height: 2em; - font-size: 16px; - color: #ffffff; - } - - a { - border-radius: 3px; - background-color: #ffffff; - padding: 2px 4px; - color: #495057; - } - } - } - - &.implementation { - background-color: #ffffff; - - > hr { - margin-top: 24px; - opacity: .3; - } - - > h3 { - font-weight: 500; - margin-top: 30px; - font-size: 18px; - - &:first-child { - margin-top: 0px; - } - } - - .p-col-12 > h3 { - font-weight: 400; - margin-top: 30px; - font-size: 18px; - } - - h3.first { - margin-top: 0px; - } - - &.implementation-charts { - background-color: #FFFFFF; - } - } - - .component-sizes { - display: inline-flex; - flex-direction: column; - - .p-component { - margin-bottom: 1em; - flex: 0 0 auto; - - &:last-child{ - margin-bottom: 0; - } - } - } - - &.content-submenu { - background-color: #546E7A; - padding: 15px 30px; - - ul { - margin: 0; - padding: 0; - width: 100%; - - li { - list-style: none; - width: 20%; - display: inline-block; - padding: .25em; - - a { - color: #ffffff; - display: block; - width: 90%; - border: 1px solid transparent; - padding: 6px 12px; - border-radius: 3px; - transition: background-color .1s; - - &:hover { - background-color: rgba(255,255,255,0.1); - } - - &:focus { - outline: 0 none; - transition: box-shadow .2s; - box-shadow: 0 0 0 0.2em $focusBorderColor; - } - - &.router-link-exact-active { - font-weight: 700; - } - } - } - } - } - - &.documentation { - border-top: 1px solid #dadada; - background-color: #f5f7f8; - - h3 { - color: #495057; - margin-top: 25px; - margin-bottom: 0px; - font-size: 22px; - font-weight: normal; - } - - h4 { - text-align: center; - font-weight: 700; - font-size: 16px; - } - - p { - color: #495057; - font-size: 14px; - line-height: 24px; - margin: 10px 0; - } - - .doc-tablewrapper { - margin: 16px 0; - overflow: auto; - } - - a { - color: #1976D2; - font-weight: 500; - transition: color .2s; - } - - .btn-viewsource { - background-color: #444; - padding: .5em 1em; - border-radius: 2px; - color: #fff; - font-weight: 700; - margin: .5em 0; - display: inline-block; - transition: background-color .2s; - - &:hover { - background-color: #595959; - color: #fff; - } - } - - i:not([class~="pi"]) { - background-color: #ffffff; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-style: normal; - font-size: 14px; - padding: 2px 4px; - letter-spacing: .5px; - color: #257908; - border-radius: 4px; - font-weight: 500; - } - - /* Demo Tabs Source */ - .p-tabview { - background: none; - border: 0 none; - - .p-tabview-nav { - border-radius: 3px 3px 0 0; - padding: 4px 4px 0px 4px; - border-bottom: 1px solid #dadada; - background-color: transparent; - - li { - margin-right: 4px; - box-shadow: none !important; - border: 0 none; - top: 1px; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - - a { - font-weight: 400; - color: #495057; - text-shadow: none; - height: inherit; - background-color: transparent; - border: 0 none; - border-bottom: 1px solid transparent; - margin-bottom: -1px; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - transition: background-color .2s; - - &:focus { - outline: 0 none; - transition: background-color .2s, box-shadow .2s; - box-shadow: 0 0 0 0.2em $focusBorderColor; - } - } - - &.tab-doc { - margin-right: 0; - } - - &.p-highlight a, - &.p-highlight:hover a { - border: 0 none; - background: #f5f7f8; - color: #1976D2; - border-bottom: 1px solid #1976D2; - } - - &:not(.p-highlight):not(.p-disabled):hover a { - color: #1976D2; - background-color: transparent; - border: 0 none; - border-bottom: 1px solid #1976D2; - } - } - } - - .p-tabview-panels { - background: transparent; - border: 0 none; - color: #495057; - } - } - } - - &.support { - .support-image { - background-color: #495057; - padding: 30px; - color: #ffffff; - text-align: left; - - .p-md-6:last-child { - text-align: right; - } - - h3, p { - color: #ffffff; - } - } - - li { - line-height: 1.5; - } - } - - .doc-table { - border-collapse: collapse; - width: 100%; - - th { - background-color: #d6dade; - padding: 10px 14px; - text-align: left; - border: solid 1px #d6dade; - } - - tbody{ - td { - padding: 10px 14px; - border: 1px solid #eaecee; - } - - tr{ - &:nth-child(even) { - background-color: #eaecee; - } - &:nth-child(odd) { - background-color: #ffffff; - - td { - border: 1px solid #ffffff; - } - } - } - } - } - } -} - -.layout-footer { - font-size: 14px; - - a { - color: #495057; - font-weight: 600; - } -} - -.layout-config { - position: fixed; - padding: 0; - top: 70px; - display: block; - right: 0; - width: 550px; - z-index: 996; - height: calc(100% - 70px); - transition: transform .3s; - transform: translate3d(550px,0,0); - background-color: #ffffff; - backface-visibility: hidden; - - &.layout-config-active { - transform: translate3d(0,0,0); - - .layout-config-content-wrapper { - .layout-config-button { - i { - transform: rotate(360deg); - } - } - } - } - - .layout-config-content-wrapper { - position: relative; - height: 100%; - padding: 0; - box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24); - - .layout-config-button { - display: block; - position: absolute; - width: 52px; - height: 52px; - line-height: 52px; - background-color: #41b883; - text-align: center; - color: #fafafa; - top: 200px; - left: -51px; - z-index: -1; - overflow: hidden; - cursor: pointer; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - transition: background-color .2s, box-shadow .2s; - box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), - 0 5px 22px 4px rgba(0, 0, 0, 0.12), - 0 12px 17px 2px rgba(0, 0, 0, 0.14); - - i { - font-size: 26px; - line-height: inherit; - cursor: pointer; - transform: rotate(0deg); - transition: transform 1s; - } - - &:hover { - background-color: #3aa476; - } - } - } - - a { - color: #1976D2; - transition: color .2s; - font-weight: 500; - } - - .layout-config-content { - overflow: auto; - height: 100%; - } - - .layout-config-close { - position: absolute; - width: 25px; - height: 25px; - line-height: 25px; - text-align: center; - right: 20px; - top: 20px; - z-index: 999; - background-color: #41b783; - border-radius: 50%; - transition: background-color .2s, box-shadow .2s; - - i { - color: #ffffff; - line-height: inherit; - font-size: 16px; - } - - &:hover { - background-color: #3aa476; - } - - &:focus { - outline: 0 none; - box-shadow: 0 0 0 0.2em $focusBorderColor; - } - } - - h1 { - font-size: 18px; - letter-spacing: .1px; - margin: 0 0 .5em 0; - } - - .p-grid > div { - padding: 1em .5em; - text-align: center; - - span { - display: block; - } - } - - p { - margin: 0 0 2em 0; - } - - .free-themes { - padding: 2em; - color: #495057; - background-color: #ffffff; - - img { - width: 50px; - border-radius: 4px; - } - - span { - font-size: 12px; - } - } - - .current-theme { - box-shadow: 0 0 0 0.2em $focusBorderColor; - } - - button { - position: relative; - display: inline-flex; - justify-content: center; - transition: box-shadow .2s, transform .2s; - - i { - line-height: inherit; - font-size: 28px; - color: #41b783; - position: absolute; - top: 0; - left: 50%; - margin-left: -18px; - margin-top: -18px; - padding: .18em; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); - background-color: #ffffff; - border-radius: 50%; - width: 36px; - height: 36px; - } - - &:focus { - box-shadow: 0 0 0 0.2em $focusBorderColor; - } - - &:hover { - transform: scale(1.1); - } - } - - .premium-themes { - padding: 2em; - background-color: #212529; - color: #ffffff; - - p { - color: #d8d8d8; - } - - img { - width: 100%; - } - - a { - color: #2196F3; - } - } -} - -.clearfix { - display: inline-block; - - &:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; - } -} -* html .clearfix { - height: 1%; -} -.clearfix { - display: block; -} - -/* Home Component*/ -.home { - p { - line-height: 22px; - margin-top: 0; - margin-bottom: 2em; - } - a { - color: #2E86C1; - font-weight: 500; - transition: color .2s; - } - - .home-button { - font-weight: bold; - text-align: center; - color: #ffffff !important; - background-color: #455C71; - padding: 10px 24px 9px 24px; - border-radius: 3px; - transition: background-color .2s; - - &:hover { - background-color: #708EA5; - color: #ffffff; - } - } - - .home-button2 { - font-weight: bold; - text-align: center; - color: #8C6816 !important; - background-color: #FFCB54; - padding: 10px 24px 9px 24px; - border-radius: 3px; - transition: background-color .2s; - display: inline-block; - - &:hover { - background-color: #E5AF36; - color: #8C6816 !important; - } - } - - /* Introduction */ - .introduction { - background-color: #1976d2; - background: url('./assets/images/home/primevue-introduction.jpg'); - background-repeat: no-repeat; - background-size: cover; - padding: 115px 30px 135px 50px; - - h1 { - font-weight: normal; - margin-bottom: 5px; - font-size: 24px; - } - - h2 { - font-weight: bold; - margin-bottom: 40px; - margin-top: 0; - font-size: 24px; - } - - > div { - padding: 100px 100px 0 100px; - height: 200px; - } - - .introduction-promo { - display: inline-block; - margin-left: -50px; - margin-bottom: 20px; - padding: 10px 50px 10px 175px; - font-size: 1.5em; - background-image: linear-gradient(90deg, #445C72 0%, #DBDCDE 100%); - position: relative; - color: #ffffff; - font-weight: 700; - - img { - position: absolute; - height: 75px; - left: 50px; - top: -12px; - } - } - } - - /* Features */ - .features { - background-color: #f9f9f9; - text-align: center; - padding: 0 30px 30px 30px; - - .feature-card { - background-color: #ffffff; - box-shadow: 0 0.8px 1.7px rgba(0, 0, 0, 0.008), 0 1.9px 4.2px rgba(0, 0, 0, 0.012),0 3.6px 7.9px rgba(0, 0, 0, 0.015),0 6.5px 14.1px rgba(0, 0, 0, 0.018),0 12.1px 26.3px rgba(0, 0, 0, 0.022),0 29px 63px rgba(0, 0, 0, 0.03); - height: 100%; - border-radius: 4px; - - .feature-card-detail { - padding: 0 16px 16px 16px; - } - } - - h3 { - font-size:24px; - color: #495057; - padding: 30px 0 12px 0; - margin: 0; - } - - img { - width: 100%; - } - - .feature-name { - display: block; - font-weight: bold; - font-size: 16px; - margin-top: 1em; - } - - p { - margin-top: 1em; - margin-bottom: 2em; - - &.features-tagline { - color: #495057; - margin-bottom: 0; - margin-top: -5px; - margin-bottom: 2em; - } - - &.features-description { - color: #495057; - text-align: left; - } - - > a { - font-weight: bold; - } - } - } - - /* Who Uses */ - .whouses { - background-color: #495057; - color: #ffffff; - text-align: center; - padding: 30px; - - h3 { - font-size: 24px; - margin-top: 0; - margin-bottom: 12px; - } - - img { - height: 30px; - width: 100%; - } - - .p-grid > div { - padding: 2em .5em; - } - - p { - margin-bottom: 30px; - - > a { - font-weight: bold; - } - } - } - - .templates { - background-color: #f5f7f8; - text-align: center; - padding: 30px; - border-bottom: 1px solid #c4c5c6; - - h3 { - font-size:24px; - color: #495057; - margin-top: 0; - margin-bottom: 12px; - } - - h4 { - font-size: 16px; - font-weight: 700; - } - - img { - width: 100%; - } - - a { - font-weight: bold; - } - } - - /* PRO */ - .prosupport { - border-bottom: 1px solid #dcdedf; - background-color: #f5f7f8; - padding: 30px; - - p { - line-height: 22px; - margin-bottom: 1em; - } - - h3 { - font-size: 24px; - } - - img { - margin-top: 10px; - } - - .p-md-6:last-child { - text-align: center; - } - } -} - - /* DESIGNER */ - .primevue-designer { - background-color: #ffffff; - padding: 30px; - h3 { - margin: 10px 0 20px 0; - display: block; - text-align: center; - font-size: 24px; - } - img { - width: 100%; - margin-bottom: 30px; - } - } - -.icons-page { - .icons-list { - text-align: center; - } - - .icons-list i { - font-size: 2em; - } - - .icons-list .p-md-2 { - padding-bottom: 2em; - } -} - -@media screen and (max-width: 960px) { - .layout-wrapper.layout-news-active { - .layout-sidebar { - top: 140px; - height: calc(100% - 140px); - } - .layout-config { - top: 180px; - height: calc(100% - 180px); - } - .layout-content { - padding-top: 180px; - } - .layout-mask { - top: 140px; - } - .layout-news-container { - background-image: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, #FFFFFF 100%); - } - img.layouts-news-mockup-image { - display: none; - } - } - - .layout-topbar { - text-align: center; - - .menu-button { - display: inline-block; - } - - .logo { - margin: 7px 0 6px; - - img{ - width: 180px; - } - } - - .topbar-menu { - background-color: #ffffff; - float: none; - width: 100%; - height: 41px; - margin: -1px 0 0 0; - border-bottom: 1px solid #e3e9ea; - border-top: 1px solid #e3e9ea; - - > li { - height: 40px; - line-height: 40px; - width: 25%; - font-size: 14px; - - > a { - padding-bottom: 0; - height: 40px; - width: 100%; - min-width: auto; - } - - &.topbar-submenu > ul { - top: 40px; - text-align: left; - } - } - } - } - - .layout-sidebar { - top: 70px; - left: -300px; - z-index: 999; - transition: left .3s; - - &.active { - left: 0; - } - } - - .layout-content { - margin-left: 0; - padding-top: 111px; - - .content-section { - &.submenu ul li { - width: 50%; - } - } - - } - - .home { - .introduction > div { - width: 100%; - } - - .features > div { - width: 100%; - } - - .whouses > div { - width: 100%; - } - - .prosupport > div { - width: 100%; - } - } - - .layout-content .content-section.content-submenu ul li { - width: 50%; - } - - .layout-config { - top: 110px; - height: calc(100% - 110px); - transform: translate3d(100%,0,0); - - .layout-config-button { - left: auto; - right: -52px; - } - - &.layout-config-active { - width: 100%; - transform: translate3d(0,0,0); - } - } -} - -@media screen and (max-width: 640px) { - .layout-wrapper.layout-news-active { - .topbar-menu { - >li.topbar-submenu { - >ul { - top: 180px; - } - } - } - } - - .layout-topbar { - .topbar-menu { - > li { - &.topbar-submenu { - position: static; - - > ul { - top: 110px; - position: fixed; - right: auto; - left: 0; - width: 100vw; - } - } - } - } - } -} - -/* Animation */ -@-webkit-keyframes fadeInDown { - from { - opacity: 0; - transform: translate3d(0, -20px, 0); - } - - to { - opacity: 1; - transform: none; - } -} - -@keyframes fadeInDown { - from { - opacity: 0; - transform: translate3d(0, -20px, 0); - } - - to { - opacity: 1; - transform: none; - } -} - -pre[class*="language-"] code { - border-left: 10px solid #d6dade !important; - box-shadow: -1px 0px 0px 0px #d6dade, 0px 0px 0px 1px #f8f8f8 !important; - background: #ffffff !important; - margin: 1em 0; - - code { - font-size: 14px; - - .token { - &.tag { - color: #d57935; - } - - &.attr-value { - color: #308eea; - } - - &.language-javascript { - color: #1990b8; - } - - &.operator { - background: transparent; - } - } - } -} - -.p-toast.p-toast-topright, -.p-toast.p-toast-topleft { - top: 100px; -} - -.dark-theme { - .implementation { - background-color: #3f3f3f !important; - color: #dedede !important; - - > h3, - > h4 { - color: #dedede !important - } - } -} - -.dark-theme-alt { - .implementation { - background-color: #10161d !important; - color: #ebedef !important; - } - - > h3, - > h4 { - color: #ebedef !important - } -} \ No newline at end of file diff --git a/src/assets/styles/app/_config.scss b/src/assets/styles/app/_config.scss new file mode 100644 index 000000000..800bd8dce --- /dev/null +++ b/src/assets/styles/app/_config.scss @@ -0,0 +1,195 @@ +.layout-config { + position: fixed; + padding: 0; + top: 70px; + display: block; + right: 0; + width: 550px; + z-index: 996; + height: calc(100% - 70px); + transition: transform .3s; + transform: translate3d(550px,0,0); + background-color: #ffffff; + backface-visibility: hidden; + + &.layout-config-active { + transform: translate3d(0,0,0); + + .layout-config-content-wrapper { + .layout-config-button { + i { + transform: rotate(360deg); + } + } + } + } + + .layout-config-content-wrapper { + position: relative; + height: 100%; + padding: 0; + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24); + + .layout-config-button { + display: block; + position: absolute; + width: 52px; + height: 52px; + line-height: 52px; + background-color: #41b883; + text-align: center; + color: #fafafa; + top: 200px; + left: -51px; + z-index: -1; + overflow: hidden; + cursor: pointer; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + transition: background-color .2s, box-shadow .2s; + box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), + 0 5px 22px 4px rgba(0, 0, 0, 0.12), + 0 12px 17px 2px rgba(0, 0, 0, 0.14); + + i { + font-size: 26px; + line-height: inherit; + cursor: pointer; + transform: rotate(0deg); + transition: transform 1s; + } + + &:hover { + background-color: #3aa476; + } + } + } + + a { + color: #1976D2; + transition: color .2s; + font-weight: 500; + } + + .layout-config-content { + overflow: auto; + height: 100%; + } + + .layout-config-close { + position: absolute; + width: 25px; + height: 25px; + line-height: 25px; + text-align: center; + right: 20px; + top: 20px; + z-index: 999; + background-color: #41b783; + border-radius: 50%; + transition: background-color .2s, box-shadow .2s; + + i { + color: #ffffff; + line-height: inherit; + font-size: 16px; + } + + &:hover { + background-color: #3aa476; + } + + &:focus { + outline: 0 none; + box-shadow: 0 0 0 0.2em $focusBorderColor; + } + } + + h1 { + font-size: 18px; + letter-spacing: .1px; + margin: 0 0 .5em 0; + } + + .p-grid > div { + padding: 1em .5em; + text-align: center; + + span { + display: block; + } + } + + p { + margin: 0 0 2em 0; + } + + .free-themes { + padding: 2em; + color: #495057; + background-color: #ffffff; + + img { + width: 50px; + border-radius: 4px; + } + + span { + font-size: 12px; + } + } + + .current-theme { + box-shadow: 0 0 0 0.2em $focusBorderColor; + } + + button { + position: relative; + display: inline-flex; + justify-content: center; + transition: box-shadow .2s, transform .2s; + + i { + line-height: inherit; + font-size: 28px; + color: #41b783; + position: absolute; + top: 0; + left: 50%; + margin-left: -18px; + margin-top: -18px; + padding: .18em; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); + background-color: #ffffff; + border-radius: 50%; + width: 36px; + height: 36px; + } + + &:focus { + box-shadow: 0 0 0 0.2em $focusBorderColor; + } + + &:hover { + transform: scale(1.1); + } + } + + .premium-themes { + padding: 2em; + background-color: #212529; + color: #ffffff; + + p { + color: #d8d8d8; + } + + img { + width: 100%; + } + + a { + color: #2196F3; + } + } +} \ No newline at end of file diff --git a/src/assets/styles/app/_content.scss b/src/assets/styles/app/_content.scss new file mode 100644 index 000000000..31029bf79 --- /dev/null +++ b/src/assets/styles/app/_content.scss @@ -0,0 +1,316 @@ +.layout-content { + margin-left: 250px; + padding-top: 70px; + + .content-section { + display: block; + padding: 30px; + + h2 { + margin-top: 0; + } + + &.introduction { + color: #ffffff; + background-color: #607D8B; + + .feature-intro { + + h1 { + font-size: 28px; + margin: 0 0 20px 0; + color: #ffffff; + font-weight: 700; + } + + p { + margin: 0; + line-height: 2em; + font-size: 16px; + color: #ffffff; + } + + a { + border-radius: 3px; + background-color: #ffffff; + padding: 2px 4px; + color: #495057; + } + } + } + + &.implementation { + background-color: #ffffff; + + > hr { + margin-top: 24px; + opacity: .3; + } + + > h3 { + font-weight: 500; + margin-top: 30px; + font-size: 18px; + + &:first-child { + margin-top: 0px; + } + } + + .p-col-12 > h3 { + font-weight: 400; + margin-top: 30px; + font-size: 18px; + } + + h3.first { + margin-top: 0px; + } + + &.implementation-charts { + background-color: #FFFFFF; + } + } + + .component-sizes { + display: inline-flex; + flex-direction: column; + + .p-component { + margin-bottom: 1em; + flex: 0 0 auto; + + &:last-child{ + margin-bottom: 0; + } + } + } + + &.content-submenu { + background-color: #546E7A; + padding: 15px 30px; + + ul { + margin: 0; + padding: 0; + width: 100%; + + li { + list-style: none; + width: 20%; + display: inline-block; + padding: .25em; + + a { + color: #ffffff; + display: block; + width: 90%; + border: 1px solid transparent; + padding: 6px 12px; + border-radius: 3px; + transition: background-color .1s; + + &:hover { + background-color: rgba(255,255,255,0.1); + } + + &:focus { + outline: 0 none; + transition: box-shadow .2s; + box-shadow: 0 0 0 0.2em $focusBorderColor; + } + + &.router-link-exact-active { + font-weight: 700; + } + } + } + } + } + + &.documentation { + border-top: 1px solid #dadada; + background-color: #f5f7f8; + + h3 { + color: #495057; + margin-top: 25px; + margin-bottom: 0px; + font-size: 22px; + font-weight: normal; + } + + h4 { + text-align: center; + font-weight: 700; + font-size: 16px; + } + + p { + color: #495057; + font-size: 14px; + line-height: 24px; + margin: 10px 0; + } + + .doc-tablewrapper { + margin: 16px 0; + overflow: auto; + } + + a { + color: #1976D2; + font-weight: 500; + transition: color .2s; + } + + .btn-viewsource { + background-color: #444; + padding: .5em 1em; + border-radius: 2px; + color: #fff; + font-weight: 700; + margin: .5em 0; + display: inline-block; + transition: background-color .2s; + + &:hover { + background-color: #595959; + color: #fff; + } + } + + i:not([class~="pi"]) { + background-color: #ffffff; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-style: normal; + font-size: 14px; + padding: 2px 4px; + letter-spacing: .5px; + color: #257908; + border-radius: 4px; + font-weight: 500; + } + + /* Demo Tabs Source */ + .p-tabview { + background: none; + border: 0 none; + + .p-tabview-nav { + border-radius: 3px 3px 0 0; + padding: 4px 4px 0px 4px; + border-bottom: 1px solid #dadada; + background-color: transparent; + + li { + margin-right: 4px; + box-shadow: none !important; + border: 0 none; + top: 1px; + border-top-right-radius: 3px; + border-top-left-radius: 3px; + + a { + font-weight: 400; + color: #495057; + text-shadow: none; + height: inherit; + background-color: transparent; + border: 0 none; + border-bottom: 1px solid transparent; + margin-bottom: -1px; + border-top-right-radius: 3px; + border-top-left-radius: 3px; + transition: background-color .2s; + + &:focus { + outline: 0 none; + transition: background-color .2s, box-shadow .2s; + box-shadow: 0 0 0 0.2em $focusBorderColor; + } + } + + &.tab-doc { + margin-right: 0; + } + + &.p-highlight a, + &.p-highlight:hover a { + border: 0 none; + background: #f5f7f8; + color: #1976D2; + border-bottom: 1px solid #1976D2; + } + + &:not(.p-highlight):not(.p-disabled):hover a { + color: #1976D2; + background-color: transparent; + border: 0 none; + border-bottom: 1px solid #1976D2; + } + } + } + + .p-tabview-panels { + background: transparent; + border: 0 none; + color: #495057; + } + } + } + + &.support { + .support-image { + background-color: #495057; + padding: 30px; + color: #ffffff; + text-align: left; + + .p-md-6:last-child { + text-align: right; + } + + h3, p { + color: #ffffff; + } + } + + li { + line-height: 1.5; + } + } + + .doc-table { + border-collapse: collapse; + width: 100%; + + th { + background-color: #d6dade; + padding: 10px 14px; + text-align: left; + border: solid 1px #d6dade; + } + + tbody{ + td { + padding: 10px 14px; + border: 1px solid #eaecee; + } + + tr{ + &:nth-child(even) { + background-color: #eaecee; + } + &:nth-child(odd) { + background-color: #ffffff; + + td { + border: 1px solid #ffffff; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/assets/styles/app/_core.scss b/src/assets/styles/app/_core.scss new file mode 100644 index 000000000..3846280e9 --- /dev/null +++ b/src/assets/styles/app/_core.scss @@ -0,0 +1,164 @@ +@keyframes pulse { + 0% { + background-color: rgba(165, 165, 165, 0.1) + } + 50% { + background-color: rgba(165, 165, 165, 0.3) + } + 100% { + background-color: rgba(165, 165, 165, 0.1) + } +} + +$focusBorderColor:#BBDEFB; + +html { + font-size: 14px; +} + +body { + margin: 0px; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + background-color: #ffffff; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-weight: normal; + color: #495057; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +input[type="number"] { + -moz-appearance: textfield; + + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } +} + +a { + text-decoration: none; + color: #1976D2; +} + +.layout-mask { + opacity: .1; +} + +.layout-mask-active { + z-index: 998; + width: 100%; + height: 100%; + position: fixed; + top: 70px; + left: 0; + background-color: #4c5254; + opacity: .7; + transition: opacity .5s; +} + +.clearfix { + display: inline-block; + + &:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; + } +} +* html .clearfix { + height: 1%; +} +.clearfix { + display: block; +} + + +/* Animation */ +@-webkit-keyframes fadeInDown { + from { + opacity: 0; + transform: translate3d(0, -20px, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +@keyframes fadeInDown { + from { + opacity: 0; + transform: translate3d(0, -20px, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +pre[class*="language-"] code { + border-left: 10px solid #d6dade !important; + box-shadow: -1px 0px 0px 0px #d6dade, 0px 0px 0px 1px #f8f8f8 !important; + background: #ffffff !important; + margin: 1em 0; + + code { + font-size: 14px; + + .token { + &.tag { + color: #d57935; + } + + &.attr-value { + color: #308eea; + } + + &.language-javascript { + color: #1990b8; + } + + &.operator { + background: transparent; + } + } + } +} + + +.p-toast.p-toast-topright, +.p-toast.p-toast-topleft { + top: 100px; +} + +.dark-theme { + .implementation { + background-color: #3f3f3f !important; + color: #dedede !important; + + > h3, + > h4 { + color: #dedede !important + } + } +} + +.dark-theme-alt { + .implementation { + background-color: #10161d !important; + color: #ebedef !important; + } + + > h3, + > h4 { + color: #ebedef !important + } +} \ No newline at end of file diff --git a/src/assets/styles/app/_designer.scss b/src/assets/styles/app/_designer.scss new file mode 100644 index 000000000..500e64101 --- /dev/null +++ b/src/assets/styles/app/_designer.scss @@ -0,0 +1,15 @@ +/* DESIGNER */ +.primevue-designer { + background-color: #ffffff; + padding: 30px; + h3 { + margin: 10px 0 20px 0; + display: block; + text-align: center; + font-size: 24px; + } + img { + width: 100%; + margin-bottom: 30px; + } +} \ No newline at end of file diff --git a/src/assets/styles/app/_footer.scss b/src/assets/styles/app/_footer.scss new file mode 100644 index 000000000..1d5258445 --- /dev/null +++ b/src/assets/styles/app/_footer.scss @@ -0,0 +1,8 @@ +.layout-footer { + font-size: 14px; + + a { + color: #495057; + font-weight: 600; + } +} \ No newline at end of file diff --git a/src/assets/styles/app/_home.scss b/src/assets/styles/app/_home.scss new file mode 100644 index 000000000..998348fe1 --- /dev/null +++ b/src/assets/styles/app/_home.scss @@ -0,0 +1,457 @@ +/* Home Component*/ +.home { + p { + line-height: 22px; + margin-top: 0; + margin-bottom: 2em; + } + a { + color: #2E86C1; + font-weight: 500; + transition: color .2s; + } + + .home-button { + font-weight: bold; + text-align: center; + color: #ffffff !important; + background-color: #455C71; + padding: 10px 24px 9px 24px; + border-radius: 3px; + transition: background-color .2s; + + &:hover { + background-color: #708EA5; + color: #ffffff; + } + } + + .home-button2 { + font-weight: bold; + text-align: center; + color: #8C6816 !important; + background-color: #FFCB54; + padding: 10px 24px 9px 24px; + border-radius: 3px; + transition: background-color .2s; + display: inline-block; + + &:hover { + background-color: #E5AF36; + color: #8C6816 !important; + } + } + + /* Introduction */ + .introduction { + background-color: #1976d2; + background: url('./assets/images/home/primevue-introduction.jpg'); + background-repeat: no-repeat; + background-size: cover; + padding: 115px 30px 135px 50px; + + h1 { + font-weight: normal; + margin-bottom: 5px; + font-size: 24px; + } + + h2 { + font-weight: bold; + margin-bottom: 40px; + margin-top: 0; + font-size: 24px; + } + + > div { + padding: 100px 100px 0 100px; + height: 200px; + } + + .introduction-promo { + display: inline-block; + margin-left: -50px; + margin-bottom: 20px; + padding: 10px 50px 10px 175px; + font-size: 1.5em; + background-image: linear-gradient(90deg, #445C72 0%, #DBDCDE 100%); + position: relative; + color: #ffffff; + font-weight: 700; + + img { + position: absolute; + height: 75px; + left: 50px; + top: -12px; + } + } + } + + /* Features */ + .features { + background-color: #f9f9f9; + text-align: center; + padding: 0 30px 30px 30px; + + .feature-card { + background-color: #ffffff; + box-shadow: 0 0.8px 1.7px rgba(0, 0, 0, 0.008), 0 1.9px 4.2px rgba(0, 0, 0, 0.012),0 3.6px 7.9px rgba(0, 0, 0, 0.015),0 6.5px 14.1px rgba(0, 0, 0, 0.018),0 12.1px 26.3px rgba(0, 0, 0, 0.022),0 29px 63px rgba(0, 0, 0, 0.03); + height: 100%; + border-radius: 4px; + + .feature-card-detail { + padding: 0 16px 16px 16px; + } + } + + h3 { + font-size:24px; + color: #495057; + padding: 30px 0 12px 0; + margin: 0; + } + + img { + width: 100%; + } + + .feature-name { + display: block; + font-weight: bold; + font-size: 16px; + margin-top: 1em; + } + + p { + margin-top: 1em; + margin-bottom: 2em; + + &.features-tagline { + color: #495057; + margin-bottom: 0; + margin-top: -5px; + margin-bottom: 2em; + } + + &.features-description { + color: #495057; + text-align: left; + } + + > a { + font-weight: bold; + } + } + } + + /* Who Uses */ + .whouses { + background-color: #495057; + color: #ffffff; + text-align: center; + padding: 30px; + + h3 { + font-size: 24px; + margin-top: 0; + margin-bottom: 12px; + } + + img { + height: 30px; + width: 100%; + } + + .p-grid > div { + padding: 2em .5em; + } + + p { + margin-bottom: 30px; + + > a { + font-weight: bold; + } + } + } + + .templates { + background-color: #f5f7f8; + text-align: center; + padding: 30px; + border-bottom: 1px solid #c4c5c6; + + h3 { + font-size:24px; + color: #495057; + margin-top: 0; + margin-bottom: 12px; + } + + h4 { + font-size: 16px; + font-weight: 700; + } + + img { + width: 100%; + } + + a { + font-weight: bold; + } + } + + /* PRO */ + .prosupport { + border-bottom: 1px solid #dcdedf; + background-color: #f5f7f8; + padding: 30px; + + p { + line-height: 22px; + margin-bottom: 1em; + } + + h3 { + font-size: 24px; + } + + img { + margin-top: 10px; + } + + .p-md-6:last-child { + text-align: center; + } + } +}/* Home Component*/ +.home { + p { + line-height: 22px; + margin-top: 0; + margin-bottom: 2em; + } + a { + color: #2E86C1; + font-weight: 500; + transition: color .2s; + } + + .home-button { + font-weight: bold; + text-align: center; + color: #ffffff !important; + background-color: #455C71; + padding: 10px 24px 9px 24px; + border-radius: 3px; + transition: background-color .2s; + + &:hover { + background-color: #708EA5; + color: #ffffff; + } + } + + .home-button2 { + font-weight: bold; + text-align: center; + color: #8C6816 !important; + background-color: #FFCB54; + padding: 10px 24px 9px 24px; + border-radius: 3px; + transition: background-color .2s; + display: inline-block; + + &:hover { + background-color: #E5AF36; + color: #8C6816 !important; + } + } + + /* Introduction */ + .introduction { + background-color: #1976d2; + background: url('./assets/images/home/primevue-introduction.jpg'); + background-repeat: no-repeat; + background-size: cover; + padding: 115px 30px 135px 50px; + + h1 { + font-weight: normal; + margin-bottom: 5px; + font-size: 24px; + } + + h2 { + font-weight: bold; + margin-bottom: 40px; + margin-top: 0; + font-size: 24px; + } + + > div { + padding: 100px 100px 0 100px; + height: 200px; + } + + .introduction-promo { + display: inline-block; + margin-left: -50px; + margin-bottom: 20px; + padding: 10px 50px 10px 175px; + font-size: 1.5em; + background-image: linear-gradient(90deg, #445C72 0%, #DBDCDE 100%); + position: relative; + color: #ffffff; + font-weight: 700; + + img { + position: absolute; + height: 75px; + left: 50px; + top: -12px; + } + } + } + + /* Features */ + .features { + background-color: #f9f9f9; + text-align: center; + padding: 0 30px 30px 30px; + + .feature-card { + background-color: #ffffff; + box-shadow: 0 0.8px 1.7px rgba(0, 0, 0, 0.008), 0 1.9px 4.2px rgba(0, 0, 0, 0.012),0 3.6px 7.9px rgba(0, 0, 0, 0.015),0 6.5px 14.1px rgba(0, 0, 0, 0.018),0 12.1px 26.3px rgba(0, 0, 0, 0.022),0 29px 63px rgba(0, 0, 0, 0.03); + height: 100%; + border-radius: 4px; + + .feature-card-detail { + padding: 0 16px 16px 16px; + } + } + + h3 { + font-size:24px; + color: #495057; + padding: 30px 0 12px 0; + margin: 0; + } + + img { + width: 100%; + } + + .feature-name { + display: block; + font-weight: bold; + font-size: 16px; + margin-top: 1em; + } + + p { + margin-top: 1em; + margin-bottom: 2em; + + &.features-tagline { + color: #495057; + margin-bottom: 0; + margin-top: -5px; + margin-bottom: 2em; + } + + &.features-description { + color: #495057; + text-align: left; + } + + > a { + font-weight: bold; + } + } + } + + /* Who Uses */ + .whouses { + background-color: #495057; + color: #ffffff; + text-align: center; + padding: 30px; + + h3 { + font-size: 24px; + margin-top: 0; + margin-bottom: 12px; + } + + img { + height: 30px; + width: 100%; + } + + .p-grid > div { + padding: 2em .5em; + } + + p { + margin-bottom: 30px; + + > a { + font-weight: bold; + } + } + } + + .templates { + background-color: #f5f7f8; + text-align: center; + padding: 30px; + border-bottom: 1px solid #c4c5c6; + + h3 { + font-size:24px; + color: #495057; + margin-top: 0; + margin-bottom: 12px; + } + + h4 { + font-size: 16px; + font-weight: 700; + } + + img { + width: 100%; + } + + a { + font-weight: bold; + } + } + + /* PRO */ + .prosupport { + border-bottom: 1px solid #dcdedf; + background-color: #f5f7f8; + padding: 30px; + + p { + line-height: 22px; + margin-bottom: 1em; + } + + h3 { + font-size: 24px; + } + + img { + margin-top: 10px; + } + + .p-md-6:last-child { + text-align: center; + } + } +} \ No newline at end of file diff --git a/src/assets/styles/app/_icons.scss b/src/assets/styles/app/_icons.scss new file mode 100644 index 000000000..654f4e053 --- /dev/null +++ b/src/assets/styles/app/_icons.scss @@ -0,0 +1,13 @@ +.icons-page { + .icons-list { + text-align: center; + } + + .icons-list i { + font-size: 2em; + } + + .icons-list .p-md-2 { + padding-bottom: 2em; + } +} \ No newline at end of file diff --git a/src/assets/styles/app/_menu.scss b/src/assets/styles/app/_menu.scss new file mode 100644 index 000000000..c787a9194 --- /dev/null +++ b/src/assets/styles/app/_menu.scss @@ -0,0 +1,94 @@ +.layout-sidebar { + position: fixed; + left: 0; + top: 70px; + height: calc(100% - 70px); + background-color: #ffffff; + overflow: auto; + width: 250px; + box-shadow: 0 0 2px rgba(0,0,0,0.25); + + .layout-menu { + + > span { + width: 100%; + height: 50px; + display: block; + padding: 0px 0px 0px 20px; + margin-bottom: 12px; + background-color: #f8f9fa; + color: #767676; + font-weight: 700; + user-select: none; + transition: background-color .2s; + display: flex; + align-items: center; + + span { + font-size: 14px; + margin: 0px 0px 0px 8px; + display: block; + line-height: 1; + } + + img { + width: 20px; + height: auto; + float: left; + + &.layout-menu-icon-active { + display: none; + } + + &.layout-menu-icon-inactive { + display: inline; + } + } + } + + > div { + background-color: #ffffff; + padding: 0 15px 15px 15px; + display: flex; + flex-direction: column; + + a { + display: inline-block; + padding: 6px; + cursor: pointer; + border-radius: 4px; + font-size: 14px; + color: #495057; + transition: background-color .2s; + + &:hover { + background-color: #e9ecef; + } + + &:focus { + z-index: 1; + outline: 0 none; + transition: box-shadow .2s; + box-shadow: 0 0 0 0.2em $focusBorderColor; + } + + &.router-link-active { + color: #526F89; + font-weight: 700; + } + + .menuitem-badge { + background: linear-gradient(to bottom, #96c93d, #00b09b); + padding: 2px 4px; + vertical-align: middle; + border-radius: 3px; + color: #ffffff; + font-weight: bold; + font-size: 11px; + position: relative; + top: -1px; + } + } + } + } +} \ No newline at end of file diff --git a/src/assets/styles/app/_news.scss b/src/assets/styles/app/_news.scss new file mode 100644 index 000000000..b6558a6ff --- /dev/null +++ b/src/assets/styles/app/_news.scss @@ -0,0 +1,91 @@ + +.layout-news { + position: fixed; + top: 0; + left: 0; + z-index: 997; + height: 70px; + width: 100%; + display: flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + background-image: url("assets/images/topbar-easter-2020-bg.jpg"); + + .layout-news-container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: #ffffff; + font-weight: bold; + font-size: 20px; + + .layout-news-details { + display: flex; + align-items: center; + z-index: 1; + + .rate { + color: #f2b837; + font-size: 25px; + font-weight: bold; + margin: 0 .25em; + } + + .helper-text { + background-color: #f2b837; + color: #212121; + padding: 0 0.2em; + margin-right: 0.3em; + } + } + + img.layouts-news-text-image { + height: 60px; + } + + img.layouts-news-mockup-image { + height: 70px; + position: absolute; + right: 52px; + } + } + + .layout-news-close { + color: #fff; + position: absolute; + z-index: 2; + right: 28px; + background-color: rgba(0,0,0,.3); + border-radius: 50%; + display: -ms-flexbox; + display: flex; + justify-content: center; + align-items: center; + width: 23px; + height: 23px; + } +} + +.layout-wrapper.layout-news-active { + .layout-topbar { + top: 70px + } + + .layout-sidebar { + top: 140px; + height: calc(100% - 140px); + } + + .layout-config { + top: 140px; + height: calc(100% - 140px); + } + + .layout-content { + padding-top: 140px; + } +} \ No newline at end of file diff --git a/src/assets/styles/app/_responsive.scss b/src/assets/styles/app/_responsive.scss new file mode 100644 index 000000000..76d5054bb --- /dev/null +++ b/src/assets/styles/app/_responsive.scss @@ -0,0 +1,161 @@ + +@media screen and (max-width: 960px) { + .layout-wrapper.layout-news-active { + .layout-sidebar { + top: 140px; + height: calc(100% - 140px); + } + .layout-config { + top: 180px; + height: calc(100% - 180px); + } + .layout-content { + padding-top: 180px; + } + .layout-mask { + top: 140px; + } + .layout-news-container { + background-image: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, #FFFFFF 100%); + } + img.layouts-news-mockup-image { + display: none; + } + } + + .layout-topbar { + text-align: center; + + .menu-button { + display: inline-block; + } + + .logo { + margin: 7px 0 6px; + + img{ + width: 180px; + } + } + + .topbar-menu { + background-color: #ffffff; + float: none; + width: 100%; + height: 41px; + margin: -1px 0 0 0; + border-bottom: 1px solid #e3e9ea; + border-top: 1px solid #e3e9ea; + + > li { + height: 40px; + line-height: 40px; + width: 25%; + font-size: 14px; + + > a { + padding-bottom: 0; + height: 40px; + width: 100%; + min-width: auto; + } + + &.topbar-submenu > ul { + top: 40px; + text-align: left; + } + } + } + } + + .layout-sidebar { + top: 70px; + left: -300px; + z-index: 999; + transition: left .3s; + + &.active { + left: 0; + } + } + + .layout-content { + margin-left: 0; + padding-top: 111px; + + .content-section { + &.submenu ul li { + width: 50%; + } + } + + } + + .home { + .introduction > div { + width: 100%; + } + + .features > div { + width: 100%; + } + + .whouses > div { + width: 100%; + } + + .prosupport > div { + width: 100%; + } + } + + .layout-content .content-section.content-submenu ul li { + width: 50%; + } + + .layout-config { + top: 110px; + height: calc(100% - 110px); + transform: translate3d(100%,0,0); + + .layout-config-button { + left: auto; + right: -52px; + } + + &.layout-config-active { + width: 100%; + transform: translate3d(0,0,0); + } + } +} + +@media screen and (max-width: 640px) { + .layout-wrapper.layout-news-active { + .topbar-menu { + >li.topbar-submenu { + >ul { + top: 180px; + } + } + } + } + + .layout-topbar { + .topbar-menu { + > li { + &.topbar-submenu { + position: static; + + > ul { + top: 110px; + position: fixed; + right: auto; + left: 0; + width: 100vw; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/assets/styles/app/_topbar.scss b/src/assets/styles/app/_topbar.scss new file mode 100644 index 000000000..93f829893 --- /dev/null +++ b/src/assets/styles/app/_topbar.scss @@ -0,0 +1,199 @@ +.layout-topbar { + background-color: #ffffff; + display: block; + padding: 0; + height: 70px; + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 997; + box-shadow: 0 0 4px rgba(0,0,0,0.25); + + .menu-button { + display: none; + color: #495057; + font-size: 24px; + position: absolute; + left: 0; + top: 0; + width: 70px; + height: 70px; + line-height: 70px; + text-align: center; + cursor: pointer; + transition: background-color .2s; + + &:hover { + background-color: #e9ecef; + } + + i { + line-height: inherit; + } + } + + .logo { + margin-left: 45px; + margin-top: 8px; + display: inline-block; + + img { + width: 180px; + } + + &:focus { + outline: 0 none; + transition: box-shadow .2s; + box-shadow: 0 0 0 0.2em $focusBorderColor; + } + } + + .topbar-menu { + list-style-type: none; + float: right; + margin: 0 60px 0 0; + padding: 0; + height: 100%; + + > li { + display: inline-block; + height: 70px; + line-height: 70px; + + > a { + text-decoration: none; + color: #495057; + min-width: 120px; + font-size: 16px; + display: inline-block; + text-align: center; + user-select: none; + line-height: inherit; + cursor: pointer; + transition: background-color .2s; + + &:hover { + background-color: #e9ecef; + } + + &:focus { + z-index: 1; + outline: 0 none; + transition: box-shadow .2s; + box-shadow: inset 0 0 0 0.2em $focusBorderColor; + } + } + + &.topbar-submenu { + position: relative; + + > ul { + position: absolute; + top: 70px; + right: 0; + width: 275px; + max-height: 400px; + background-color: #ffffff; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); + overflow: auto; + list-style-type: none; + padding: 6px 12px; + margin: 0; + border-radius: 3px; + + > li { + line-height: 1; + + &.topbar-submenu-header { + padding: 6px 12px; + font-weight: bold; + text-align: left; + margin-top: 18px; + + &:first-child { + margin-top: 6px; + } + } + } + + a { + text-decoration: none; + color: #495057; + padding: 8px 12px; + display: block; + user-select: none; + transition: background-color .2s; + cursor: pointer; + + &:hover { + background-color: #e9ecef; + cursor: pointer; + } + + img { + width: 32px; + vertical-align: middle; + margin-right: 4px; + } + + span { + margin-left: 8px; + } + + i { + vertical-align: middle; + font-size: 18px; + margin-right: 4px; + margin-left: 4px; + color: #6c757d; + } + } + + li:last-child { + a { + border-bottom: 0 none; + } + } + } + + &.topbar-resources-submenu { + > ul { + a { + padding: 12px 6px; + + span { + margin-left: 6px; + } + } + + + } + } + } + } + + .theme-badge { + padding: 2px 4px; + vertical-align: middle; + border-radius: 3px; + color: #ffffff; + font-weight: bold; + font-size: 11px; + position: relative; + top: -1px; + } + + .theme-badge.material { + background: linear-gradient(to bottom, #2196F3, #2196F3); + } + + .theme-badge.bootstrap { + background: linear-gradient(to bottom, #563D7C, #966BD8); + } + + .theme-badge.darkmode { + background: linear-gradient(to bottom, #141d26, #5a6067); + } + } +} \ No newline at end of file diff --git a/src/assets/styles/app/app.scss b/src/assets/styles/app/app.scss new file mode 100644 index 000000000..2c632bc99 --- /dev/null +++ b/src/assets/styles/app/app.scss @@ -0,0 +1,12 @@ +@import './core'; +@import './topbar'; +@import './menu'; +@import './content'; +@import './news'; +@import './footer'; +@import './config'; +@import './designer'; +@import './home'; +@import './icons'; +@import './responsive'; +@import './core'; \ No newline at end of file