// // Alert modules require a darker color tint // @mixin AlertColorCalc($custom) { // // custom background color tint // background-color: setcolor($custom,xlight); // // border color = background * 0.65 // border: 1px solid setcolor($custom,light); // // custom foreground color // color: setcolor($custom,dark); // } // Used in Mindsets @mixin ThemeMorph($name,$color) { // find output path by dynamic class name svg#morph path#output.#{$name} { // set associated color for this class stroke: $color; } } // Used in Patterns @mixin ThemeArtformHeader($name) { .block.header.title-artform.tag-#{$name} { background-color: setcolor($name); .list.login-list { border: 1px solid setcolor($name); } .item.login-item { background-color: lighten(setcolor($name),48%); color: darken(setcolor($name),10%); &:hover { background-color: lighten(setcolor($name),43%); } + .login-item { border-top: 1px solid lighten(setcolor($name),28%); } } } } // Used in Patterns @mixin ThemeHeader($chapter,$title,$color) { .wrap.chapter-#{$chapter}.title-#{$title} { .block.header { background-color: setcolor($color); } .list.login-list { border: 1px solid setcolor($color,light); } .item.login-item { background-color: setcolor($color,xlight); color: setcolor($color,dark); &:hover { background-color: darken(setcolor($color,xlight),10%); } + .login-item { border-top: 1px solid setcolor($color,light); } } } } // Used in Patterns @mixin ThemeCheckbox($chapter,$title,$color) { .wrap.chapter-#{$chapter}.title-#{$title} { .checkbox-input:checked + label { background-color: setcolor($color,xlight); border: 1px solid setcolor($color,light); color: setcolor($color,dark); } } } // Used in Patterns @mixin ThemeTextArea($chapter,$title,$color) { .wrap.chapter-#{$chapter}.title-#{$title} { label.textarea { color: setcolor($color,dark); } textarea { background-color: setcolor($color,xlight); border: 1px solid setcolor($color,light); color: setcolor($color,dark); } } } // Used in Patterns @mixin ThemeSelect($chapter,$title,$color) { .wrap.chapter-#{$chapter}.title-#{$title} { select { background: setcolor($color,xlight); border: 1px solid setcolor($color,light); color: setcolor($color,dark); } } } // Used in Patterns @mixin ThemeList($name,$col) { .area.title-#{$name} { label.select { color: $col; } select { @include bg($col); } .jcf-list-box { @include borderCol($col); @include bg($col); color: $col; } .jcf-list .jcf-option.jcf-selected { background: rgba($col,10%); } } } // Used in Patterns @mixin ThemeText($chapter,$title,$color) { .wrap.chapter-#{$chapter}.title-#{$title} { label { color: setcolor($color,dark); } input[type="text"] { border: 1px solid setcolor($color,light) !important; background-color: setcolor($color,xlight); color: setcolor($color,dark); } } } // Used in Patterns @mixin ThemePassword($chapter,$title,$color) { .wrap.chapter-#{$chapter}.title-#{$title} { .block.password-strength { background-color: setcolor($color); } .block.password-bg { background-color: setcolor($color,xlight); } } } // Used in Patterns @mixin ThemeMessage($name,$col) { .area.title-#{$name} { .block.message { color: $col; } } } // Used in Patterns @mixin ThemeCallout($chapter,$title,$color) { .wrap.chapter-#{$chapter}.title-#{$title} { .block.title { background-color: setcolor($color,xlight); color: setcolor($color,dark); } } } // Used in Patterns @mixin ThemeAlert($chapter,$title,$color) { .wrap.chapter-#{$chapter}.title-#{$title} { .block.form-alert { background-color: setcolor($color,xlight); border: 1px solid setcolor($color,light); color: setcolor($color,dark); } } } // Used in Patterns @mixin ThemeButton($chapter,$title,$color) { .wrap.chapter-#{$chapter}.title-#{$title} { .button-wrap { background: setcolor($color); &:hover { background: darken(setcolor($color),5%); } } } } // Used globally @mixin ThemeHome($name,$color){ // inherit theme color for the book cover .link.book.#{$name} { background-color: $color; } } // Used globally @mixin ThemeTopbar($name,$color) { // inherit theme color for the topbar link .link.navigation.#{$name} { color: $color; } // add theme color tint to background on hover .link.navigation.#{$name}:hover { background-color: rgba($color,10%); } } // Used globally @mixin ThemeCover($name,$color,$left:false,$chapter:false) { @if $chapter { // Chapter Covers .wrap.page-wrap.type-chapter.chapter-#{$name} { background-color: $color; @if $left { .title.type-chapter { left: #{$left}px; } } } } @else { // Chapter Covers .area.type-chapter.book-#{$name} { background-color: $color; } } } // Used globally @mixin PageInfo($col,$right) { .title.page-weight { color: $col; } .title.page-chapter { color: $col; @if $right { right: #{$right}px; } } } // Used in Mindsets @mixin ThemeRollerInput($name,$col) { background-color: rgba($col,10%); color: $col; } // Used in Mindsets @mixin ThemeRollerOutput($name,$col) { background-color: rgba($col,10%); border-color: rgba($col,20%); color: $col; } // Used in Mindsets @mixin ThemeRoller($name,$col,$chapter:false) { @if $chapter { .list.roller.chapter-#{$name} { .item.roller.input { @include ThemeRollerInput($name,$col); &.active { background-color: $col; color: white; } } .item.roller.output { @include ThemeRollerOutput($name,$col); } } } @else { .item.roller.input.title-#{$name} { @include ThemeRollerInput($name,$col); &.active { background-color: $col; color: white; } } .item.roller.output.title-#{$name} { @include ThemeRollerOutput($name,$col); } } } // Used in Mindsets @mixin ThemeChart($col) { .block.chart-pcent-title { color: $col; } .block.chart-bar-bg { background-color: $col; } } // Used in Mindsets @mixin ThemePages($name,$col,$right:false,$chapter:false) { @if $chapter { .wrap.type-page.chapter-#{$name} { fill: $col; @include PageInfo($col,$right); @include ThemeChart($col); .block.number-container { color: $col; } .lnk.stats { color: $col; } .list.pies { color: $col; } } } @else { .wrap.type-page.book-#{$name} { stroke: $col; fill: $col; @include PageInfo($col,$right); @include ThemeChart($col); .block.number-container { color: $col; } .lnk.stats { color: $col; } .list.pies { color: $col; } } } } // Used in Mindsets @mixin ThemeSnap($name,$color) { svg.snap { path.#{$name} { fill: #{$color}; } } } // Used everywhere @mixin ThemeSearch($name,$col,$chapter:false) { @if $chapter { // Search Results .block.results-entry.chapter-#{$name} { color: $col; &:hover { background-color: rgba($col,10%); } .block.results-dot { background-color: $col; } } } @else { // Search Results .block.results-entry.book-#{$name} { color: $col; &:hover { background-color: rgba($col,10%); } .block.results-dot { background-color: $col; } } } } @mixin ThemeBook($name,$color) { @include ThemeHome($name,$color); @include ThemeTopbar($name,$color); }