Skip to content

Commit

Permalink
Work on responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@bogdanmir
bogdanmir committed Jul 11, 2019
1 parent eea9494 commit 61a377e
Show file tree
Hide file tree
Showing 3 changed files with 535 additions and 279 deletions.
251 changes: 237 additions & 14 deletions packages/style/src/demo/full-demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,16 +159,17 @@ a:hover {
}

.dp-po-main {
/*background-color: var(--grey-lightest);*/
color: var(--grey-darkest);
}

@media (min-width: 1280px) {

.dp-po-main .dp-po-col-3 {
margin-left: 30px;
margin-right: -30px;
padding-left: 0;
/*margin-left: 30px;
margin-right: -30px;
padding-left: 0;*/
padding-left: 30px;
padding-right: 0;
}

.dp-po-main .dp-po-col-9 {
Expand Down Expand Up @@ -413,6 +414,10 @@ a:hover {
padding: 30px;
}

.dp-po-add-comments + .dp-po-comments-wrap {
padding: 0;
}

.dp-po-comments-wrap .dp-po-Button {
background: var(--brand-primary);
color: var(--white);
Expand Down Expand Up @@ -500,7 +505,7 @@ a:hover {
}

.dp-po-comments-wrap .dp-po-Upload {
font: var(--p-3);
/*font: var(--p-3);*/
padding: 17px;
}

Expand Down Expand Up @@ -1321,13 +1326,10 @@ a:hover {
display: none;
}

/* .dp-po-main {
background-color: var(--white);
}*/

.dp-po-md-12 {
flex: 0 0 100%;
max-width: 100%;
padding: 0;
}

.dp-po-hidden-md {
Expand All @@ -1338,20 +1340,33 @@ a:hover {
background-size: 40px 40px;
height: 40px;
width: 40px;
margin-left: 0;
}

.dp-po-Header-container {
background: transparent;
border-bottom: 1px solid var(--grey-lighter);
padding: 20px 8px;
padding: 12px 8px;
}

.dp-po-Breadcrumbs-wrap {
border: none;
}

.dp-po-container {
padding: 0 5px;
}

.dp-po-main .dp-po-container .dp-po-row {
margin: 0;
}

.dp-po-Breadcrumbs-wrap .dp-po-Breadcrumbs {
padding: 0;
}

.dp-po-Breadcrumb-item:not(:last-child) .dp-po-Breadcrumb-link {
max-width: 100px;
max-width: 60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Expand Down Expand Up @@ -1382,14 +1397,38 @@ a:hover {
display: flex;
}

.dp-po-nav .dp-po-nav-control,
.dp-po-nav .dp-po-Logo-wrap {
margin: 0;
}

.dp-po-nav li, .dp-po-nav-control li {
margin: 0 15px 0 0;
}

.dp-po-nav-control li:last-child {
margin: 0;
}

.dp-po-nav-control .dp-po-Button {
min-width: 90px;
height: 35px;
}

.dp-po-Header-container .dp-po-Forms.dp-po-Search-bar input {
border: 0;
background-color: var(--grey-lighter);
font: var(--mh-3);
height: 45px;
}

.dp-po-main .dp-po-Title-page {
font: var(--mh-1);
margin-top: 8px;
}

.dp-po-publish-date .dp-po-description {
font: var(--mp-1);
}

.dp-po-description-wrap .dp-IconsWrapper {
Expand All @@ -1404,12 +1443,13 @@ a:hover {
border-top: 1px solid var(--grey-light);
border-bottom: 1px solid var(--grey-light);
padding: 11px 0;
margin-top: 30px;
margin-top: 25px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
flex-direction: row-reverse;
z-index: 3;
}

.Dropdown-share .dp-po-title {
Expand Down Expand Up @@ -1447,6 +1487,7 @@ a:hover {
color: var(--brand-primary);
font: var(--p-2-bold);
line-height: 1;
padding: 7px 15px;
}

.dp-po-Dropdown-container.subscribe--dropdown .dp-po-dropdown-Title:hover {
Expand Down Expand Up @@ -1501,8 +1542,11 @@ a:hover {
}

.dp-po-mobile-subscribe .dp-po-dropdown-share > .dp-po-Icon {
width: 20px;
cursor: pointer;
width: 30px;
cursor: pointer;
background-size: 7px 25px;
height: 35px;
background-position: 90% 70%;
}

.dp-po-mobile-subscribe .Dropdown-share .dp-po-dropdown-menu-item {
Expand All @@ -1511,6 +1555,7 @@ a:hover {

.dp-po-mobile-subscribe .Dropdown-share .dp-po-dropdown-menu-item:hover {
background-color: transparent;
opacity: 1;
}

.Dropdown-share .dp-po-dropdown-menu {
Expand All @@ -1537,6 +1582,15 @@ a:hover {
box-shadow: none;
font: var(--mp-1);
padding: 0;
margin-bottom: 20px;
}

.dp-po-tex-wrap li + li {
margin-top: 10px;
}

.dp-po-title.dp-po-copy-clipboard {
margin: 24px 0 12px;
}

.dp-Template.is-open .dp-po-overlay:after {
Expand All @@ -1552,10 +1606,179 @@ a:hover {
z-index: 2;
position: fixed;
}

.dp-po-Image-knowledgabse {
border: 5px solid var(--grey-lighter);
margin: 0 -5px;
}

.dp-po-Image-knowledgabse img {
border: 0;
}

.dp-po-image-description {
display: none;
}

.Voting-section .dp-po-title {
color: var(--grey-darkest);
font: var(--mh-2);
border-bottom: 1.5px solid var(--grey-light);
padding-bottom: 12px;
margin-bottom: 20px;
}

.dp-po-wrap-collapse-md {
margin-top: 30px;
display: flex;
flex-direction: column;
}

.dp-po-wrap-collapse-md .dp-po-wrap-item {
border: none;
padding: 0;
/*margin-bottom: 25px;*/
}

.dp-po-comments.dp-po-add-comments.is-active {
margin-bottom: 60px;
}

.dp-po-comments.comments-list + .dp-po-comments-wrap {
padding: 0;
}

.dp-po-wrap-collapse-md .dp-po-md-collapse-title.dp-po-title {
display: flex;
align-items: center;
border-bottom: 1.5px solid var(--grey-light);
color: var(--grey-darkest);
font: var(--mh-2);
border-bottom: 1.5px solid var(--grey-light);
padding-bottom: 12px;
cursor: pointer;
}

.dp-po-comments-item .dp-po-Avatar .dp-po-Avatar-name,
.dp-po-comments.comments-list + .dp-po-comments-wrap .dp-po-username,
.dp-po-comments-wrap .dp-po-Upload-item label,
.dp-po-attachment-item,
.dp-po-comments-wrap .dp-po-Dragdrop-btn {
font: var(--mp-1);
}

.dp-po-Upload-wrapper .dp-po-Upload {
min-width: auto;
padding: 10px;
}

.dp-po-list.comment--item {
margin-bottom: 60px;
}

.dp-po-comments.comments-list + .dp-po-comments-wrap > .dp-po-comments-item .dp-po-comment-subtitle {
font: var(--mp-1);
margin: 18px 0 20px;
max-width: 100%;
padding-left: 40px;
}

.dp-po-comments-item .dp-po-attachments {
padding: 10px;
}

.dp-po-comments.comments-list + .dp-po-comments-wrap .label--time {
margin: 0;
}

.dp-po-md-collapse-content {
padding: 10px 0;
display: none;
}

.dp-po-md-collapse-title.dp-po-title .dp-po-Icon {
margin-left: auto;
}

.dp-po-comments-wrap {
box-shadow: none;
margin-bottom: 0;
}

.dp-po-comments.dp-po-add-comments {
display: flex;
justify-content: center;
background: var(--brand-primary);
color: var(--white);
font: var(--mp-1-bold);
max-height: 44px;
padding: 11px 0 12px;
width: 200px;
border-radius: 4px;
margin: 35px auto 60px;
}

.dp-po-comments {
margin: 0;
justify-content: flex-start;
}

.dp-po-comments-collapse {
order: 4;
}

.dp-po-related-wrap {
order: 1;
}

.dp-po-labels-wrap {
order: 2;
}

.dp-po-article-details-wrap {
order: 3;
}

.dp-po-main .dp-po-Sidebar {
padding: 0;
margin-top: 0;
}

.dp-po-sort {
margin-left: 15px;
}

.dp-po-comments-item {
padding: 20px 10px 20px 0px;
}

.dp-po-show-more {
display: flex;
flex-direction: column;
align-items: center;
}

.dp-po-show-more .dp-po-description {
font: var(--mp-1);
color: var(--grey-dark);
margin: 35px 0 0;
cursor: pointer;
}

}

@media (min-width: 992px) {

.dp-po-main {
background-color: var(--grey-lightest);
}

.Voting-section .dp-po-title {
display: none;
}

.dp-po-hidden-md-up {
display: none;
}

}
Loading

0 comments on commit 61a377e

Please sign in to comment.