Edit
/* scss/6-page-content-elements/_buttons-wm.scss */
// ==============================================
// W&M BUTTON STYLES
// ==============================================
// - default button styles
// used as-is for main .user_content section, extended in page nav and sidebar
// 6 different button class variants (!)
// - .content-button-with-arrow overrides
// - h5/h6 + button spacing
// - .read-more-link styles for .user_content
// - .user_content last child padding overrides
// - #page_nav button style overrides - set in 7-menus-and-header/_page-nav.scss
// - #sidebar button style overrides
// - .read-more-link styles
// DEFAULT BUTTON STYLES @MIXIN LOCATION
// content-button-styles @mixin is found in 2-mixins-and-functions/_mixin-button-styles.scss
// ----------------------------------------------
// default button styles
button,
.button,
a.button,
a.content_button,
.content_button > a,
.content_button_with_arrow {
@include content-button-styles();
& > span {
display: inline;
}
& .fa-angle-right {
display: none;
}
}
.content_button > a:only-of-type,
p > a.content_button:only-of-type,
p > a.content_button_with_arrow:only-of-type {
// margin: 0 auto;
// line-height: 1.2;
@include breakpoint($mobile-to-wide-mobile-breakpoint) {
margin: 0;
}
}
p > a.content_button:first-child,
p > a.content_button ~ a.content_button,
p > a.content_button_with_arrow:first-child,
p > a.content_button_with_arrow ~ a.content_button {
margin-bottom: 8px;
}
// ----------------------------------------------
// -- .content-button-with-arrow overrides
.content_button_with_arrow > a,
.content_button_with_arrow > strong > a {
text-decoration: none !important;
color: white;
&:hover {
text-decoration: none;
}
}
p.content_button_with_arrow {
margin-bottom: $md-content-margin;
}
// ----------------------------------------------
// -- h5/h6 + button spacing
h5 +,
h6 + {
.button,
a.content_button,
.content_button > a,
.content_button_with_arrow,
p.content_button,
p.content_button_with_arrow {
margin-top: kspaces(sm);
}
}
// set spacing between H5/H6 and buttons in paragraph
h5 +,
h6 + {
p > a.content_button:first-child {
margin-top: 1rem;
}
}
// set spacing for H5/H6 and paragraph with button class
h5 +,
h6 + {
p.content_button a,
p.content_button_with_arrow a {
margin-top: 0;
}
}
// ----------------------------------------------
// -- .read-more-link styles for .user_content
.read-more-link {
@include content-button-styles();
a {
color: white;
&:hover {
text-decoration: none;
}
}
&:last-child {
margin-bottom: 0;
}
}
// .user_content table button
.user_content table,
.user_content_styles table {
button,
.button,
a.button,
a.content_button,
.content_button > a,
.content_button_with_arrow,
.read-more-link {
color: white;
}
}
// ----------------------------------------------
// .user_content last child padding overrides
.user_content,
.user_content_styles > {
button:last-child,
a.button:last-child,
.button:last-child,
a.content_button:last-child,
.content_button > a:last-child,
.content_button_with_arrow:last-child {
padding: 1rem 2.5rem;
}
}
// ----------------------------------------------
// #page_nav button style overrides - set in 7-menus-and-header/_page-nav.scss
// - uses .extra-nav-button class
// ----------------------------------------------
// #sidebar button style overrides
// - .read-more-link styles are in sidebar.scss