Skip to content

Commit

Permalink
Initial work on scoping Bootstrap styles.
Browse files Browse the repository at this point in the history 
* Bootstrap is loaded via NPM, and styles are loaded from node_modules into a build file. The corresponding change has not yet been made in the JavaScript, so the Libraries directory still remains.
* Bootstrap styles are built using a script at assets/src/bootstrap that scopes the styles to the `.pf_container` parent element. I made some attempts to use PostCSS for proper scoping but it was difficult to integrate into the build process so I'm going with this expedient for the time being.
* The resulting change in specificity for Bootstrap's core styles means that some PF-specific styles were no longer taking precedence. As such, some such styles had to be scoped as well. This happens mostly in the new assets/src/reader.scss, which is registered with WP as 'pf-reader'.

See #1169.
  • Loading branch information
@boonebgorges
boonebgorges committed Sep 18, 2023
1 parent 221b7a0 commit 931b9e3
Show file tree
Hide file tree
Showing 9 changed files with 10,576 additions and 10,384 deletions.
18 changes: 5 additions & 13 deletions Core/Providers/AssetsProvider.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,24 +56,15 @@ protected function add_assets( \Intraxia\Jaxion\Assets\Register $assets ) {
)
);

$assets->register_style(
array(
'type' => 'admin',
'handle' => 'pf-bootstrap-style',
'src' => 'Libraries/twitter-bootstrap/css/bootstrap',
'deps' => array( 'pf-reset-style' ),
)
);

$assets->register_style(
array(
'type' => 'admin',
'handle' => 'pf-style',
'src' => 'assets/css/pressforward',
'deps' => [
'thickbox',
'pf-reset-style',
'pf-bootstrap-style',
'pf-bootstrap',
'pf-reader',
],
)
);
Expand All @@ -84,8 +75,7 @@ protected function add_assets( \Intraxia\Jaxion\Assets\Register $assets ) {
'handle' => 'pf-settings-style',
'src' => 'assets/css/pf-settings',
'deps' => [
'pf-reset-style',
'pf-bootstrap-style',
'pf-bootstrap',
],
)
);
Expand Down Expand Up @@ -333,6 +323,8 @@ public function admin_enqueue_scripts() {
*/
public function admin_enqueue_styles() {
$build_styles = [
'pf-bootstrap' => 'bootstrap',
'pf-reader' => 'reader',
'pf-nominate-this' => 'nominate-this',
];

Expand Down
282 changes: 5 additions & 277 deletions assets/css/pressforward.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,22 +114,22 @@ input[type="text"] {
float: left;
}

.btn {
.pf_container .btn {
border-color: rgba(0,0,0,0.15) rgba(0,0,0,0.15) rgba(0,0,0,0.25);
color: #333;
}

.btn:not(.btn-success):not(.btn-info) {
.pf_container .btn:not(.btn-success):not(.btn-info) {
background-color: #f5f5f5;
}

.btn-small {
.pf_container .btn-small {
padding: 3px 6px;
font-size: 12px;
line-height: 18px;
}

.btn-info {
.pf_container .btn-info {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: #49afcd;
Expand All @@ -142,7 +142,7 @@ input[type="text"] {
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
}

.btn-danger {
.pf_container .btn-danger {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: #da4f49;
Expand All @@ -167,121 +167,6 @@ input[type="text"] {
background-repeat: no-repeat;
}

.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}

.dropdown-menu.pull-right {
right: 0;
left: auto;
}

.dropdown-menu .divider {
*width: 100%;
height: 1px;
margin: 9px 1px;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
}

.dropdown-menu a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #333333;
white-space: nowrap;
}

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: #ffffff;
text-decoration: none;
background-color: #0088cc;
background-color: #0081c2;
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-repeat: repeat-x;
outline: 0;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

.dropdown-menu .disabled > a,
.dropdown-menu .disabled > a:hover {
color: #999999;
}

.dropdown-menu .disabled > a:hover {
text-decoration: none;
cursor: default;
background-color: transparent;
}

.open {
*z-index: 1000;
}

.open > .dropdown-menu {
display: block;
}

.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
.btn-group > .dropdown-menu {
font-size: 14px;
}

.open > .dropdown-menu {
display: block;
}

/* White icons with optional class, or on hover/active states of certain elements */

.icon-white,
Expand Down Expand Up @@ -1018,12 +903,6 @@ input[type="text"] {
.feed-item-info-box {
display: none; }

.popover-body .feed-item-info-box {
display: block;
font-size: 10px;
line-height: 13px;
z-index: 99999; }

.info-box-popover {
background-color: #f5f5f5;
z-index: 9996; }
Expand Down Expand Up @@ -1257,9 +1136,6 @@ body {
overflow: hidden;
*zoom: 1;
margin-bottom: 1.5em; }
.grid #entries article.feed-item header h1 {
font-size: .9em;
line-height: 1.55556em; }
.grid #entries article.feed-item.open {
font-size: 1em;
line-height: 1.75em;
Expand All @@ -1285,10 +1161,6 @@ body {
display: inline;
float: left;
width: 25%; }
.list #entries article.feed-item header h1 {
font-size: 1em;
line-height: 1.75em;
margin-top: 0; }
.list #entries article.feed-item .content {
display: inline;
float: left;
Expand Down Expand Up @@ -1365,11 +1237,6 @@ body {
.pressforward .grid.full #entries article.feed-item {
width: 100%; } }

.item_title {
margin-bottom: 3px;
line-height: 16px;
overflow: hidden; }

.source_title {
line-height: 1.5em;
overflow: hidden; }
Expand Down Expand Up @@ -1415,145 +1282,6 @@ h3 {

.grid .feed-item .item_excerpt {
height: 92px; }

.modal .original-link {
margin-top: 2px; }

.modal.pfmodal {
z-index: 9998; }

.pfmodal.fade.in {
top: 0; }

.pfmodal {
background-color: #f5f5f5;
max-height: 100%;
position: fixed;
top: 32px;
right: 0;
bottom: 100%;
left: 0;
margin: 0;
width: 100%;
height: calc(100% - 32px);
}

.pfmodal .modal-dialog {
display: flex;
flex-direction: column;
max-width: none;
max-height: 100%;
height: 100%;
margin: 0 auto;
position: relative;
pointer-events: auto;
justify-content: space-between;
}

.pfmodal .modal-header {
flex: 0 0 content;
background-color: white;
}
.pfmodal .modal_item_title {
font-weight: 700;
}
.pfmodal .modal-mobile-nav {
margin: 0 8px; }

.pfmodal .modal-body-row {
background: white;
padding: 0 20px;
overflow-y: scroll;
flex: 1 1 80%;
}

.pfmodal .modal-body {
flex: 1;
overflow-y: auto;
}

.pfmodal .modal-body.single-item-modal-content {
margin-bottom: 0;
margin-top: 0;
max-height: 100%;
padding-bottom: 0;
padding-top: 0;
}

.pfmodal .modal-sidebar {
height: 100%;
margin: 0;
}
.pfmodal .modal-side-item {
border: 1px solid #eee;
border-right: transparent;
padding: 1%;
margin: 0; }
.pfmodal .modal-side-item h5 {
font-size: 14px;
font-weight: 700;
line-height: 20px;
}

.pfmodal .modal-comments {
border-bottom: 4px solid #eee;
border-top: 4px solid #eee;
overflow-y: auto;
}

.pfmodal .goPrev, .pfmodal .goNext {
height: 25%;
font-size: .7rem;
line-height: .7rem;
overflow: hidden;
text-align: right; }
.pfmodal .goPrev p, .pfmodal .goNext p {
margin-bottom: 8px; }
.pfmodal .goPrev h5, .pfmodal .goNext h5 {
margin-bottom: 8px; }
.pfmodal .modal-comments {
height: 50%; }
.pfmodal .modal-footer {
flex: 0 0 content;
flex-direction: column;
}
.pfmodal .footer-top {
display: flex;
flex-direction: row;
width: 100%;
}
.pfmodal .footer-top > div {
flex: 1 0 50%;
}
.pfmodal .footer-bottom {
width: 100%;
}
.pfmodal .item-tags {
padding-bottom: 75px;
}
.pfmodal .footer-actions {
text-align: right;
}
.pfmodal .footer-actions .btn {
margin-right: 8px;
}
.pfmodal .modal-body p, .pfmodal .modal-body div, .pfmodal .modal-body {
margin: 1.5em 0;
font-size: 18px;
line-height: 1.7em; }
.pfmodal .modal-body div.clear {
margin: 0;
}

.pf-modal .main-text {
margin: 1.5em 0;
}

.pfmodal .main-text img {
height: auto;
max-width: 100%;
}

.pf-navigation {
width: 100%;
float: left;
Expand Down
2 changes: 2 additions & 0 deletions assets/src/bootstrap/bootstrap.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
// This bootstraps Bootstrap so that we can scope it in post-CSS.
import './bootstrap.scss';
Loading

0 comments on commit 931b9e3

Please sign in to comment.