Skip to content
This repository has been archived by the owner on Dec 2, 2022. It is now read-only.

Commit

Permalink
Work in progress.
Browse files Browse the repository at this point in the history
  • Loading branch information
@gjb2048
gjb2048 committed Feb 14, 2015
1 parent 66f6c5d commit db38ebd
Show file tree
Hide file tree
Showing 8 changed files with 131 additions and 180 deletions.
1 change: 0 additions & 1 deletion config.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@
$THEME->sheets[] = 'moodle-rtl';
$THEME->sheets[] = 'bootstrap-pix';
$THEME->sheets[] = 'moodle-pix';
$THEME->sheets[] = 'essential';
$THEME->sheets[] = 'essential-pix';
$THEME->sheets[] = 'essential-settings';
$THEME->sheets[] = 'fontawesome';
Expand Down
19 changes: 9 additions & 10 deletions lang/en/theme_essential.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,6 +354,15 @@
$string['slideinterval'] = 'Slide interval';
$string['slideintervaldesc'] = 'Slide transition interval in milliseconds.';

// Slide show size
$string['slidesize'] = 'Slide show size';
$string['slidesizedesc'] = 'The height of the slide show. Full corresponds to 368 pixels at full screen, very small corresponds to 36 pixels at full screen.';
$string['slide10percent'] = 'Very small';
$string['slide25percent'] = 'Small';
$string['slide50percent'] = 'Medium';
$string['slide75percent'] = 'Big';
$string['slide100percent'] = 'Full';

$string['slidecolor'] = 'Slide text colour';
$string['slidecolordesc'] = 'What colour the slide caption text should be.';

Expand Down Expand Up @@ -588,13 +597,3 @@
$string['blogpreferences'] = 'Blog preferences';
$string['badgepreferences'] = 'Badge preferences';
$string['messagepreferences'] = 'Message preferences';

// Slide show size
$string['slidesize'] = 'Slide show size';
$string['slidesizedesc'] = 'The height of the slide show. Full corresponds to 368 pixel at full screen, Very small corresonds fo 36 pixel at full screen';
$string['slide10percent'] = 'Very small';
$string['slide25percent'] = 'Small';
$string['slide50percent'] = 'Medium';
$string['slide75percent'] = 'Big';
$string['slide100percent'] = 'Full';

2 changes: 1 addition & 1 deletion less/essential/carousel.less
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
/* @group Carousel */#essentialCarousel.carousel { margin-bottom: 10px; .carousel-inner { > .item { .carousel-image-container { text-align: center; width: 90%; padding-left: 5%; padding-right: 5%; } .carousel-image { width: auto; margin: 0 auto; margin-top: 8px; height: auto; max-height: 300px; vertical-align: middle; // See: http://www.vanseodesign.com/css/vertical-centering/. max-width: 100%; } &.side-caption { div.the-side-caption { padding-left: 7%; } } &.side-caption .carousel-image { box-shadow: 0px 0px 8px #222; padding: 8px; background-color: #fff; margin-left: -8px; } } a, a:hover, a:active { text-decoration: none; height: 100%; } // Caption for text below images. .carousel-caption { border-radius: @baseBorderRadius + 2; .carousel-caption-inner { margin: 0 auto; } h4, p { padding: 0px 20px; } p { line-height: 1; } } &.centred { .carousel-caption, div.the-side-caption { text-align: center; } } } // Left/right controls for nav. .carousel-control { display: none; // Shown when carousel hovered on, see below. background: none; border: 0px; font-size: 30px; &:hover, &:focus { background: none; border: 0px; } } &:hover .carousel-control{ display: block; } .carousel-indicators { border-radius: @baseBorderRadius; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; background-color: #fff; background-color: rgba(255, 255, 255, .50); right: 5px; } // Responsive. .carousel-inner { > .item { &.side-caption { div.the-side-caption { h4 { font-size: 14px; line-height: 1; } p { font-size: 10px; line-height: 1; } } } } } // @screen-xs-min. @media(min-width: 480px) { .carousel-inner { > .item { &.side-caption { div.the-side-caption { h4 { font-size: 16px; } p { font-size: 12px; } } } } } .carousel-control { font-size: 36px; } } @media (max-width: 767px) { .carousel-inner { > .item { height: [[setting:slidesize_case1]]; .carousel-image-container { line-height: [[setting:slidesize_case1]]; // See: http://www.vanseodesign.com/css/vertical-centering/. } .carousel-image { max-height: [[setting:slidesize_case1_90percent]]; } .carousel-caption { position: absolute; h4 { font-size: 1.2em; } } } > .item.side-caption { div.the-side-caption { padding-left: 0; } div.nocaption { margin-top: 6.5%; } } &.below > .item, > .item.side-caption { height: [[setting:slidesize_case1_135percent]]; .carousel-caption { height: 45px; } .carousel-image-container.nocaption { line-height: [[setting:slidesize_case1_135percent]]; } } } } // @screen-sm-min. @media(min-width: 768px) { .carousel-inner { > .item { height: [[setting:slidesize_case2]]; .carousel-image-container { line-height: [[setting:slidesize_case2]]; } .carousel-image { max-height: [[setting:slidesize_case2_90percent]]; } &.side-caption { div.the-side-caption { // Variation on: http://css-tricks.com/centering-in-the-unknown/. height: [[setting:slidesize_case2]]; // Addition to technique. &:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } .the-side-caption-content { display: inline-block; vertical-align: middle; width: 100%; } h4 { font-size: 20px; } p { font-size: 14px; } } } } &.below > .item { height: [[setting:slidesize_case2_135percent]]; .carousel-caption { height: 55px; } .carousel-image-container.nocaption { line-height: [[setting:slidesize_case2_135percent]]; } } } .carousel-control { font-size: 40px; } } @media (min-width: 768px) and (max-width: 979px) { .carousel-inner { > .item { .carousel-caption { h4 { font-size: 1.2em; } } } } } // @screen-md-min. @media(min-width: 992px) { .carousel-inner { > .item { height: [[setting:slidesize_case3]]; .carousel-image-container { line-height: [[setting:slidesize_case3]]; } .carousel-image { max-height: [[setting:slidesize_case3_90percent]]; } &.side-caption { div.the-side-caption { height: [[setting:slidesize_case3]]; // Addition to technique. h4 { font-size: 26px; } p { font-size: 18px; } } } } &.below > .item { height: [[setting:slidesize_case4_135percent]]; .carousel-caption { height: 65px; } .carousel-image-container.nocaption { line-height: [[setting:slidesize_case4_135percent]]; } } } .carousel-control { font-size: 50px; } } // @screen-lg-min. @media(min-width: 1200px) { .carousel-inner { > .item { height: [[setting:slidesize_case4]]; .carousel-image-container { line-height: [[setting:slidesize_case4]]; } .carousel-image { max-height: [[setting:slidesize_case4_90percent]]; } &.side-caption { div.the-side-caption { height: [[setting:slidesize_case4]]; // Addition to technique. h4 { font-size: 32px; } p { font-size: 20px; } } } } &.below > .item { height: [[setting:slidesize_case4_135percent]]; .carousel-image-container.nocaption { line-height: [[setting:slidesize_case4_135percent]]; } } } .carousel-control { font-size: 60px; } }}/* @end */
/* @group Carousel */#essentialCarousel.carousel { margin-bottom: 10px; .carousel-inner { > .item { .carousel-image-container { text-align: center; width: 90%; padding-left: 5%; padding-right: 5%; } .carousel-image { width: auto; margin: 0 auto; margin-top: 8px; height: auto; max-height: 300px; vertical-align: middle; // See: http://www.vanseodesign.com/css/vertical-centering/. max-width: 100%; } &.side-caption { div.the-side-caption { padding-left: 7%; } } &.side-caption .carousel-image { box-shadow: 0px 0px 8px #222; padding: 8px; background-color: #fff; margin-left: -8px; } } a, a:hover, a:active { text-decoration: none; height: 100%; } // Caption for text below images. .carousel-caption { border-radius: @baseBorderRadius + 2; .carousel-caption-inner { margin: 0 auto; } h4, p { padding: 0px 20px; } p { line-height: 1; } } &.centred { .carousel-caption, div.the-side-caption { text-align: center; } } } // Left/right controls for nav. .carousel-control { display: none; // Shown when carousel hovered on, see below. background: none; border: 0px; font-size: 30px; &:hover, &:focus { background: none; border: 0px; } } &:hover .carousel-control{ display: block; } .carousel-indicators { border-radius: @baseBorderRadius; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; background-color: #fff; background-color: rgba(255, 255, 255, .50); right: 5px; } // Responsive. .carousel-inner { > .item { &.side-caption { div.the-side-caption { h4 { font-size: 14px; line-height: 1; } p { font-size: 10px; line-height: 1; } } } } } // @screen-xs-min. @media(min-width: 480px) { .carousel-inner { > .item { &.side-caption { div.the-side-caption { h4 { font-size: 16px; } p { font-size: 12px; } } } } } .carousel-control { font-size: 36px; } } @media (max-width: 767px) { .carousel-inner { > .item { .carousel-caption { position: absolute; h4 { font-size: 1.2em; } } } > .item.side-caption { div.the-side-caption { padding-left: 0; } div.nocaption { margin-top: 6.5%; } } &.below > .item, > .item.side-caption { .carousel-caption { height: 45px; } } } } // @screen-sm-min. @media(min-width: 768px) { .carousel-inner { > .item { &.side-caption { div.the-side-caption { // Variation on: http://css-tricks.com/centering-in-the-unknown/. &:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } .the-side-caption-content { display: inline-block; vertical-align: middle; width: 100%; } h4 { font-size: 20px; } p { font-size: 14px; } } } } &.below > .item { .carousel-caption { height: 55px; } } } .carousel-control { font-size: 40px; } } @media (min-width: 768px) and (max-width: 979px) { .carousel-inner { > .item { .carousel-caption { h4 { font-size: 1.2em; } } } } } // @screen-md-min. @media(min-width: 992px) { .carousel-inner { > .item { &.side-caption { div.the-side-caption { h4 { font-size: 26px; } p { font-size: 18px; } } } } &.below > .item { .carousel-caption { height: 65px; } } } .carousel-control { font-size: 50px; } } // @screen-lg-min. @media(min-width: 1200px) { .carousel-inner { > .item { &.side-caption { div.the-side-caption { h4 { font-size: 32px; } p { font-size: 20px; } } } } } .carousel-control { font-size: 60px; } }}/* @end */
Expand Down
Loading

0 comments on commit db38ebd

Please sign in to comment.