Commit f9c8dbf8 authored by Cecilia Vela Gurovic's avatar Cecilia Vela Gurovic Committed by Gerrit Code Review

Merge "Bug 1857401: Making theming more efficient with variables"

parents 4f2ac34a 0ae18ad9
// forum buttons
.forum-post-btns {
border-top: 1px dotted #ececec;
border-top: 1px dotted $gray-100;
padding: 10px;
}
.btn-secondary, .drag-default-button {
.drag-default-button {
background: $btn-secondary-bg;
margin-bottom: 0;
&:hover,
&:focus {
background: scale-color($btn-secondary-bg, $lightness: -9.7%);
color: $theme-text-color;
color: $btn-secondary-color;
border-color: scale-color($btn-secondary-border, $lightness: -12%);
}
}
......
//dash
.collapse-indicator {
color: $link-color;
.collapsed & {
color: $link-color;
}
a:hover &,
a:focus & {
color: $link-hover-color;
}
}
//dash inner
//messages: inbox, sent
//admin: site options
//journals
.inboxblock .link-block,
.form-notificationlist h4 a,
.pieform-fieldset.collapsible h4 a,
.myblogs h5 a {
&:hover .collapse-indicator,
&:focus .collapse-indicator{
color: $link-hover-color;
}
.collapse-indicator {
color: $link-color;
}
}
.expand-indicator {
+ .icon {
color: $link-color;
&:hover, &:focus {
color: $link-hover-color;
}
}
}
// syntax change if link is an outer-link
[data-toggle="collapse"].outer-link {
&.collapsed {
~ .collapse-indicator {
color: $link-color;
}
}
&:hover,
&:focus {
~ .collapse-indicator {
color: $link-hover-color;
}
}
}
.list-group-item-link {
a {
&:hover {
background-color: scale-color($theme-primary-color, $lightness: 90%);
}
}
}
.list-group-item-heading {
font-family: $font-family-sans-serif;
font-weight: 700;
}
.list-group-item {
&.published {
background-color: #fff;
background-color: $white;
}
}
......@@ -3,128 +3,20 @@ $logged-in-height-mobile: 125px;
.dashboard-widget-container {
@include clearfix;
margin-top: $grid-gutter-width;
text-align: center;
.remove-widgets {
font-size: $font-size-sm - 1;
}
.hide-info{
clear: both;
}
.widget-heading {
@include clearfix;
padding: 0;
background-color: $dashboard-widget-bg;
border-radius: 50%;
height: $logged-in-height;
width: $logged-in-height;
border-top: 0;
@include media-breakpoint-down(md ) {
height: $logged-in-height-mobile;
width: $logged-in-height-mobile;
display: inline-block;
}
h2 {
margin: 5px 0 3px;
text-align: center;
color: #FFFFFF;
font-weight: 700;
@include media-breakpoint-down(md ) {
font-size: 18px;
margin-top: 0;
}
}
p {
margin: 0 16px;
font-size: 13px;
text-align: center;
color: #FFFFFF;
@include media-breakpoint-down(md ) {
display: none;
}
}
a {
color: #FFFFFF;
}
}
.circle-bg {
text-align:center;
padding-top: 10px;
margin-right: 0 !important;
float: none;
background-color: transparent;
border-radius: 0;
width: auto;
height: auto;
@include media-breakpoint-down(md ) {
margin-top: 5px;
}
.icon {
color: scale-color($theme-primary-color, $lightness: 60%);
padding-top:16px;
font-size: 72px;
@include media-breakpoint-down(md ) {
font-size: 60px;
}
&.icon-user {
padding-left:0; // the only one that is actually centered by default
}
}
}
.widget-detail {
padding: 0 10px;
vertical-align: middle;
display: block;
border: 0;
@include media-breakpoint-down(md ) {
width: 180px;
display: inline-block;
vertical-align: inherit;
}
p {
margin-top: 10px;
margin-bottom: 0;
color: #333333;
@include media-breakpoint-down(md ) {
font-size: 12px;
padding: 0;
margin-top: 0;
}
}
}
.thumbnail-widget {
display: inline-block;
vertical-align: top;
margin-top: 0;
margin-bottom: 10px;
margin-right: 20px;
border-radius: 50%;
text-align: center;
margin-right: 20px;
width: $logged-in-height;
padding: 0;
float: none;
@include media-breakpoint-down(md ) {
@include media-breakpoint-down(md) {
width: auto;
display: block;
margin-right: 0;
......@@ -134,109 +26,146 @@ $logged-in-height-mobile: 125px;
margin-right: 0;
}
.widget {
text-align: center;
}
}
.widget-heading {
padding: 0;
border-radius: 50%;
height: $logged-in-height;
width: $logged-in-height;
border-top: 0;
@include media-breakpoint-down(md) {
height: $logged-in-height-mobile;
width: $logged-in-height-mobile;
display: inline-block;
}
.logged-in {
text-decoration: none;
height: $logged-in-height;
overflow:hidden;
.circle-bg {
padding-top: 10px;
margin-right: 0;
float: none;
background-color: transparent;
width: auto;
height: auto;
@include media-breakpoint-down(md) {
height: $logged-in-height-mobile;
width: $logged-in-height-mobile;
display: inline-block;
margin: 0 5px 10px 5px;
}
@include media-breakpoint-down(md) {
margin-top: 5px;
}
.icon {
color: $dashboard-widget-cirlce-icon-color;
font-size: 72px;
@include media-breakpoint-down(md) {
padding-top: 0;
font-size: 60px;
}
}
}
.widget-heading {
h2 {
margin: 5px 0 3px;
text-align: center;
color: #FFFFFF;
font-weight: 700;
@include media-breakpoint-down(md ) {
@include media-breakpoint-down(md) {
font-size: 18px;
margin-top: 0;
}
}
p {
color: #FFFFFF;
margin: 0 16px;
font-size: 13px;
text-align: center;
@include media-breakpoint-down(md) {
display: none;
}
}
}
.widget-detail {
@include transition(0.03s);
opacity:0;
margin-top: -$logged-in-height * 2;
position: relative;
padding: 0 10px;
vertical-align: middle;
display: block;
z-index: 2;
background-color: #333333;
height: $logged-in-height;
width: $logged-in-height;
border-radius: 50%;
border: 0;
@include media-breakpoint-down(md) {
margin-top: -$logged-in-height-mobile * 2;
height: $logged-in-height-mobile;
width: $logged-in-height-mobile;
padding: 0;
width: 180px;
display: inline-block;
vertical-align: inherit;
}
p {
margin-top: 0;
color: #FFFFFF;
display: table-cell;
vertical-align: middle;
height: $logged-in-height;
margin-top: 10px;
@include media-breakpoint-down(md) {
height: $logged-in-height-mobile;
font-size: 11px;
padding-left: 10px;
padding-right: 10px;
display: block;
font-size: 12px;
padding: 0;
margin-top: 0;
}
}
}
}
.logged-in:hover {
.widget-heading {
@include media-breakpoint-down(md) {
background: $dashboard-widget-bg;
}
}
.widget-detail {
@include transition(0.3s);
opacity: 1;
margin-top: -$logged-in-height;
border: 0;
&.logged-in {
height: $logged-in-height;
@include media-breakpoint-down(md) {
margin-top: -$logged-in-height-mobile;
}
p {
margin-top: 0;
color: #FFFFFF;
display: table-cell;
height: $logged-in-height-mobile;
width: $logged-in-height-mobile;
display: inline-block;
margin: 0 5px 10px 5px;
}
.widget-detail {
margin-top: -$logged-in-height * 2;
vertical-align: middle;
display: block;
background-color: $gray-700;
height: $logged-in-height;
width: $logged-in-height;
border-radius: 50%;
@include media-breakpoint-down(md) {
margin-top: -$logged-in-height-mobile * 2;
height: $logged-in-height-mobile;
font-size: 11px;
padding-left: 10px;
padding-right: 10px;
width: $logged-in-height-mobile;
padding: 0;
border: 0;
}
p {
margin-top: 0;
display: table-cell;
vertical-align: middle;
height: $logged-in-height;
@include media-breakpoint-down(md) {
height: $logged-in-height-mobile;
font-size: 11px;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
display: block;
color: $dashboard-widget-title-color;
}
}
}
&:hover {
.widget-heading {
@include media-breakpoint-down(md) {
background: $dashboard-widget-bg;
}
}
.widget-detail {
margin-top: -$logged-in-height;
@include media-breakpoint-down(md) {
margin-top: -$logged-in-height-mobile;
}
}
}
}
}
}
......@@ -7,3 +7,7 @@
background-image: url(../images/header-bkgd.png);
}
}
.navbar-default {
border-bottom: 0;
}
......@@ -18,18 +18,18 @@
@include border-top-radius(0);
border-bottom: 0;
background-color: $theme-primary-color;
color: #FFFFFF;
color: $white;
.help a .icon {
color: #FFFFFF;
color: $white;
}
a {
color: #FFFFFF;
color: $white;
}
.text-midtone {
color: #FFFFFF;
color: $white;
}
}
......
// card-secondary is the style used for the user-editable cards used across Mahara
.card-secondary {
@include box-shadow(none);
.card.card-secondary {
background-color: transparent;
&.card-warning {
......@@ -9,11 +8,4 @@
border-left: 0;
}
}
&.card {
.card-header {
border-color: $card-secondary-border;
font-family: $font-family-sans-serif;
}
}
}
......@@ -9,12 +9,3 @@
border: 0;
}
}
.card-collection,
.card-view {
.card-header {
.title-link {
font-family: $font-family-sans-serif;
}
}
}
.nav-tabs {
&.nav {
li > a {
font-weight: 400;
color: $theme-text-color;
&:focus,
&:hover {
border-bottom-color: $theme-accent-color;
background-color: scale-color($theme-accent-color, $lightness: 70%);
color: $theme-text-color;
}
&.active {
background-color: scale-color($theme-accent-color, $lightness: 60%);
color: $theme-text-color;
border-bottom-color: $theme-accent-color;
&:focus,
&:hover {
background-color: scale-color($theme-accent-color, $lightness: 70%);
color: $theme-text-color;
border-bottom-color: $theme-accent-color;
}
}
}
}
}
......@@ -10,61 +10,20 @@
// Variables
// --------------------------------------------------
// @import 'brand';
//== Scaffolding
//
//## Settings for some of the most global styles.
$link-hover-color: scale-color($link-color, $lightness: 5%);
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
//** By default, this inherits from the `<body>`.
$headings-font-family: $font-family-sans-serif;
$headings-color: #333333;
//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
//== Dropdowns
//
//## Dropdown menu container and contents.
//** Hover color for dropdown links.
$dropdown-link-hover-color: scale-color($gray-700, $lightness: -5%);
//== Navs
//
//##
//== Tabs
$nav-tabs-border-color: $theme-accent-color;
$nav-tabs-border-width: 2px;
$nav-tabs-border-radius: $border-radius;
$nav-tabs-link-hover-border-color: $theme-accent-color;
$nav-tabs-link-active-color: $theme-text-color;
$nav-tabs-link-active-bg: scale-color($theme-accent-color, $lightness: 60%);
$nav-tabs-link-active-border-color: transparent transparent $theme-accent-color transparent;
//== Pills
$nav-pills-border-radius: 0.1875rem;
$nav-tabs-link-active-bg: scale-color($theme-accent-color, $lightness: 80%);
$nav-tabs-link-active-border-color: $theme-accent-color;
//== Progress bars
//
//##
//** Progress bar text color
$progress-bar-color: #333333;
//** Default progress bar color
$progress-bar-bg: #bc9f54;
//== List group
//
//##
//** Text color for content within active list items
$list-group-active-color: scale-color($list-group-active-bg, $lightness: 40%);
$list-group-hover-bg: scale-color($theme-primary-color, $lightness: 90%);
$list-group-active-color: scale-color($theme-primary-color, $lightness: 40%);
// Custom component variables (non-bootstrap components)
//Arrow component variables
$arrow-color: scale-color(#bc9f54, $lightness: 25%);
$arrow-bar-bg: scale-color($arrow-color, $lightness: 35%);
$arrow-text-color: #333333;
$arrow-link-color: #423017;
$arrow-link-hover-color: #423017;
$arrow-link-active-color: #333333;
$arrow-link-background-color: #fff;
$arrow-color: scale-color($theme-accent-color, $lightness: 50%);
$arrow-bar-bg: scale-color($theme-accent-color, $lightness: 70%);
$arrow-text-color: $gray-700;
$arrow-link-color: scale-color($theme-accent-color, $lightness: -20%);
$arrow-link-hover-color: scale-color($theme-accent-color, $lightness: -10%);
$arrow-link-active-color: $gray-700;
$arrow-link-background-color: $white;
// color for the secondary title in sections (cf. groups)
$section-heading-color: #999;
$admin-title-color: theme-color("primary");
$admin-title-bg: theme-color("primary");
$admin-title-color: $theme-primary-color;
$admin-title-bg: $theme-primary-color;
$dashboard-widget-bg: theme-color("primary");
$dashboard-widget-color: #FFFFFF;
$dashboard-widget-bg: $theme-primary-color;
$dashboard-widget-title-color: $white;
$dashboard-widget-circle-bg: $theme-primary-color;
$dashboard-widget-cirlce-icon-color: scale-color($theme-primary-color, $lightness: 60%);
$help-icon-color: #5b8fc8;
......@@ -32,12 +34,12 @@ $site-footer-hover-bg: transparent;
// LEGACY BOOTSTRAP 3 VARIABLES
// Site header
$navbar-default-bg: #fff;
$navbar-default-bg: $white;
$navbar-default-border: transparent;
// Navbar toggle
$navbar-toggle-color: $theme-primary-color;
$navbar-toggle-bg: #fff;
$navbar-toggle-bg: $white;
$navbar-toggle-hover-color: $theme-primary-color;
$navbar-toggle-hover-bg: scale-color($theme-primary-color, $lightness: 90%);
$navbar-toggle-active-color: $theme-primary-color;
......@@ -45,41 +47,47 @@ $navbar-toggle-active-bg: scale-color($theme-primary-color, $l
// Navbar menu
$navbar-default-link-border: scale-color($theme-primary-color, $lightness: 5%);
$navbar-default-link-color: #FFF;
$navbar-default-link-hover-color: #FFF;
$navbar-default-link-color: $white;
$navbar-default-link-hover-color: $white;
$navbar-default-link-bg: $theme-primary-color;
$navbar-default-link-hover-bg: scale-color($theme-primary-color, $lightness: 6%);
$navbar-default-active-color: #FFF;
$navbar-default-active-color: $white;
$navbar-default-active-bg: scale-color($theme-primary-color, $lightness: -30%);
// Navbar menus children
$navbar-inverse-bg: scale-color($theme-primary-color, $lightness: 10%);
$navbar-inverse-link-color: #FFFFFF;
$navbar-inverse-link-hover-color: #FFFFFF;