implement sass for only pledge.css
eric
parent
76dc6d010c
commit
877affd8bf
|
|
@ -1,6 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
{% load truncatechars %}
|
||||
{% load sass_tags %}
|
||||
|
||||
<html>
|
||||
<head>
|
||||
|
|
@ -10,8 +9,6 @@
|
|||
<link type="text/css" rel="stylesheet" href="/static/css/sitewide4.css" />
|
||||
<link REL="SHORTCUT ICON" HREF="/static/images/favicon.ico">
|
||||
{% block extra_css %}{% endblock %}
|
||||
|
||||
<link href="{% sass_src 'scss/global.scss' %}" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="{{ jquery_home }}"></script>
|
||||
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
|
||||
<script type="text/javascript" src="/static/js/sitewide1.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
{% extends "registration/registration_base.html" %}
|
||||
{% load sass_tags %}
|
||||
|
||||
{% block extra_css %}
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/campaign2.css" />
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/pledge.css" />
|
||||
<link type="text/css" rel="stylesheet" href="{% sass_src 'scss/pledge.scss' %}" />
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
{% extends 'basedocumentation.html' %}
|
||||
{% load sass_tags %}
|
||||
|
||||
{% block title %}Your Unglue.it Account{% endblock %}
|
||||
{% block extra_extra_head %}
|
||||
{{ block.super }}
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/pledge.css" />
|
||||
<link type="text/css" rel="stylesheet" href="{% sass_src 'scss/pledge.scss' %}" />
|
||||
|
||||
{% include "stripe_stuff.html" %}
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
{% extends 'basepledge.html' %}
|
||||
|
||||
{% load humanize %}
|
||||
{% load sass_tags %}
|
||||
|
||||
{% block title %}Pledge Completed{% endblock %}
|
||||
|
||||
{% block extra_extra_head %}
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/searchandbrowse2.css" />
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/book_panel2.css" />
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/pledge.css" />
|
||||
<link type="text/css" rel="stylesheet" href="{% sass_src 'scss/pledge.scss' %}" />
|
||||
|
||||
<script src="/static/js/slides.min.jquery.js"></script>
|
||||
<script src="/static/js/slideshow.js"></script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
{% load humanize %}
|
||||
{% load purchased %}
|
||||
{% load lib_acqs %}
|
||||
{% load sass_tags %}
|
||||
{% block title %}—
|
||||
{% if work.is_free %}
|
||||
{{ work.title }} is a Free eBook. {% for fmt in work.formats %}[{{ fmt }}]{% endfor %}
|
||||
|
|
@ -19,7 +18,6 @@
|
|||
<link rel="stylesheet" href="/static/css/ui-lightness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen">
|
||||
{{ kwform.media.css }}
|
||||
{% endif %}
|
||||
<link href="{% sass_src 'scss/bookview.scss' %}" rel="stylesheet" type="text/css" />
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
|
|
|
|||
|
|
@ -104,6 +104,6 @@ setuptools==25.0.0
|
|||
urllib3==1.16
|
||||
beautifulsoup4==4.6.0
|
||||
RISparser==0.4.2
|
||||
libsass
|
||||
django-compressor
|
||||
django-sass-processor
|
||||
libsass==0.13.4
|
||||
django-compressor==2.2
|
||||
django-sass-processor==0.5.6
|
||||
|
|
|
|||
|
|
@ -188,11 +188,9 @@ INSTALLED_APPS = (
|
|||
)
|
||||
|
||||
SASS_PROCESSOR_INCLUDE_DIRS = [
|
||||
os.path.join(PROJECT_DIR),
|
||||
os.path.join(PROJECT_DIR, 'static', 'scss'),
|
||||
os.path.join('static', 'scss'),
|
||||
]
|
||||
|
||||
SASS_PROCESSOR_AUTO_INCLUDE = False
|
||||
|
||||
# A sample logging configuration. The only tangible logging
|
||||
# performed by this configuration is to send an email to
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
* {
|
||||
color: pink !important;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
* {
|
||||
color: red ;
|
||||
}
|
||||
|
|
@ -0,0 +1,326 @@
|
|||
@import "variables.scss";
|
||||
|
||||
#content-block .jsmod-content, .book-detail {
|
||||
float: left;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
input[type="submit"], a.fakeinput {
|
||||
float: right;
|
||||
font-size: $font-size-header;
|
||||
margin: 10px 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pledge_amount {
|
||||
padding: 10px;
|
||||
font-size: $font-size-header;
|
||||
background: $pale-blue;
|
||||
|
||||
&.premium_level {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
form.pledgeform {
|
||||
width: 470px;
|
||||
}
|
||||
|
||||
#id_preapproval_amount {
|
||||
width: 50%;
|
||||
line-height: 30px;
|
||||
font-size: $font-size-larger;
|
||||
}
|
||||
|
||||
ul.support li, ul.support li:hover {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 7px auto;
|
||||
}
|
||||
|
||||
.jsmodule.pledge {
|
||||
margin: auto;
|
||||
|
||||
.jsmod-content {
|
||||
float: right !important;
|
||||
}
|
||||
}
|
||||
|
||||
.modify_notification {
|
||||
width: 452px;
|
||||
margin-bottom: 7px;
|
||||
border: solid 2px $blue-grey;
|
||||
@include one-border-radius(5px);
|
||||
padding: 7px;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel_notice {
|
||||
width: 470px;
|
||||
padding: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#fakepledgesubmit {
|
||||
background-color: $alert;
|
||||
cursor: default;
|
||||
font-weight: bold;
|
||||
font-size: $font-size-header;
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.menu-item-price {
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
ul#offers_list li {
|
||||
|
||||
div.on {
|
||||
display: block;
|
||||
background: $pale-blue;
|
||||
margin-top: 1em;
|
||||
.give_label {
|
||||
padding: 4px;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
div.off {
|
||||
display: none;
|
||||
}
|
||||
input[type=text], textarea {
|
||||
width: 95%;
|
||||
font-size: $font-size-larger;
|
||||
color: $text-blue;
|
||||
margin: 0 10px 5px 5px;
|
||||
}
|
||||
input[type=text]{
|
||||
@include height($font-size-larger*1.3);
|
||||
}
|
||||
|
||||
}
|
||||
#mandatory_premiums {
|
||||
font-size: $font-size-larger;
|
||||
|
||||
div {
|
||||
float: left;
|
||||
|
||||
&.ack_level {
|
||||
width: 16%;
|
||||
margin-right: 3%;
|
||||
height: 100%;
|
||||
padding: 1%;
|
||||
}
|
||||
|
||||
&.ack_header {
|
||||
width: 73%;
|
||||
padding: 1%;
|
||||
}
|
||||
|
||||
&.ack_active, &.ack_inactive {
|
||||
width: 100%;
|
||||
font-size: $font-size-default;
|
||||
}
|
||||
|
||||
&.ack_active {
|
||||
.ack_header, .ack_level {
|
||||
border: solid $text-blue;
|
||||
border-width: 1%;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
&.ack_inactive {
|
||||
.ack_header, .ack_level {
|
||||
border: solid $blue-grey;
|
||||
border-width: 1%;
|
||||
background: $blue-grey;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background: $blue-grey;
|
||||
border: dashed 1px $text-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
margin: 7px 0;
|
||||
}
|
||||
|
||||
input[type=text], textarea {
|
||||
width: 95%;
|
||||
font-size: $font-size-larger;
|
||||
color: $text-blue;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
@include height($font-size-larger*1.3);
|
||||
}
|
||||
}
|
||||
|
||||
#id_ack_link {
|
||||
border: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.fund_options {
|
||||
a.fakeinput {
|
||||
font-size: $font-size-header;
|
||||
margin: 10px auto;
|
||||
float: left;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
float: left;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 50%;
|
||||
float: left;
|
||||
|
||||
ul {
|
||||
background: $pale-blue;
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
ul {
|
||||
border-color: $medium-blue-grey;
|
||||
background: white;
|
||||
}
|
||||
|
||||
color: $dark-green;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 5px 10px 5px 15px;
|
||||
border: solid 1px $blue-grey;
|
||||
margin-right: 15px;
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $medium-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#authorize {
|
||||
&.off {
|
||||
display: none;
|
||||
}
|
||||
|
||||
border: 3px solid $blue-grey;
|
||||
@include one-border-radius(5px);
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
|
||||
div.innards {
|
||||
input[type="text"],input[type="password"] {
|
||||
font-size: $font-size-larger;
|
||||
line-height: $font-size-larger*1.5;
|
||||
border-width: 2px;
|
||||
padding: 1% 1%;
|
||||
margin: 1% 0;
|
||||
color: $text-blue;
|
||||
|
||||
&:disabled {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
&.address, &#card_Number, &#id_email {
|
||||
width: 61%;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
width: 31%;
|
||||
float: left;
|
||||
line-height: $font-size-larger*1.5;
|
||||
font-size: $font-size-larger;
|
||||
border: solid white;
|
||||
border-width: 2px 0;
|
||||
padding: 1% 2% 1% 0;
|
||||
margin: 1% 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.form-row span {
|
||||
float: left;
|
||||
line-height: $font-size-larger*1.5;
|
||||
font-size: $font-size-larger;
|
||||
margin: 1%;
|
||||
padding: 1% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cvc {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#cvc_help {
|
||||
font-style: italic;
|
||||
float: none;
|
||||
font-size: $font-size-default;
|
||||
color: $link-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#cvc_answer {
|
||||
display: none;
|
||||
z-index: 100;
|
||||
border: 2px solid $blue-grey;
|
||||
@include one-border-radius(5px);
|
||||
margin: 1% 0;
|
||||
padding: 1%;
|
||||
width: 46%;
|
||||
position: absolute;
|
||||
top: 90%;
|
||||
right: 0;
|
||||
opacity: 1;
|
||||
background-color: white;
|
||||
|
||||
img {
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-errors {
|
||||
display: none;
|
||||
@include errors;
|
||||
@include one-border-radius(16px);
|
||||
width: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
span.level2.menu.answer {
|
||||
border-left: solid 7px $pale-blue;
|
||||
a {
|
||||
font-size: $font-size-larger;
|
||||
}
|
||||
}
|
||||
|
||||
#anonbox {
|
||||
margin-top: 10px;
|
||||
background: $pale-blue;
|
||||
float: left;
|
||||
width: 48%;
|
||||
padding: 1%;
|
||||
&.off {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,234 @@
|
|||
/* variables and mixins used in multiple less files go here */
|
||||
$text-blue: #3d4e53;
|
||||
$medium-blue: #6994a3;
|
||||
$medium-blue-grey: #a7c1ca;
|
||||
$pale-blue: #edf3f4;
|
||||
$green: #8dc63f;
|
||||
$call-to-action: #8dc63f;
|
||||
$dark-green: #73a334;
|
||||
$dark-blue: #37414d;
|
||||
$blue-grey: #d6dde0;
|
||||
$bright-blue: #8ac3d7;
|
||||
$alert: #e35351;
|
||||
$orange: #e18551;
|
||||
$yellow: #efd45e;
|
||||
$image-base: "/static/images/";
|
||||
$background-header: "${image-base}bg.png";
|
||||
$background-body: "${image-base}bg-body.png";
|
||||
$background-booklist: "${image-base}booklist/bg.png";
|
||||
$font-size-default: 13px;
|
||||
$font-size-larger: 15px;
|
||||
$font-size-header: 19px;
|
||||
$font-size-shout: 22px;
|
||||
$link-color: #6994a3;
|
||||
|
||||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
|
||||
$gray-base: #000;
|
||||
$gray-darker: lighten($gray-base, 13.5%); // #222
|
||||
$gray-dark: lighten($gray-base, 20%); // #333
|
||||
$gray: lighten($gray-base, 33.5%); // #555
|
||||
$gray-light: lighten($gray-base, 46.7%); // #777
|
||||
$gray-lighter: lighten($gray-base, 93.5%); // #eee
|
||||
|
||||
$brand-primary: darken(#428bca, 6.5%); // #337ab7
|
||||
$brand-success: #5cb85c;
|
||||
$brand-info: #5bc0de;
|
||||
$brand-warning: #f0ad4e;
|
||||
$brand-danger: #d9534f;
|
||||
|
||||
//** Link hover color set via `darken()` function.
|
||||
$link-hover-color: darken($link-color, 15%);
|
||||
//** Link hover decoration.
|
||||
$link-hover-decoration: underline;
|
||||
|
||||
$font-size-base: 14px;
|
||||
$font-size-large: ceil(($font-size-base * 1.25)); // ~18px
|
||||
$font-size-small: ceil(($font-size-base * 0.85)); // ~12px
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
$line-height-base: 1.428571429; // 20/14
|
||||
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
||||
$line-height-computed: floor(($font-size-base * $line-height-base)); // ~20px
|
||||
|
||||
//== Components
|
||||
//
|
||||
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
|
||||
|
||||
$padding-base-vertical: 6px;
|
||||
$padding-base-horizontal: 12px;
|
||||
|
||||
$padding-large-vertical: 10px;
|
||||
$padding-large-horizontal: 16px;
|
||||
|
||||
$padding-small-vertical: 5px;
|
||||
$padding-small-horizontal: 10px;
|
||||
|
||||
$padding-xs-vertical: 1px;
|
||||
$padding-xs-horizontal: 5px;
|
||||
|
||||
$line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
|
||||
$line-height-small: 1.5;
|
||||
|
||||
$border-radius-base: 4px;
|
||||
$border-radius-large: 6px;
|
||||
$border-radius-small: 3px;
|
||||
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
$btn-font-weight: normal;
|
||||
|
||||
$btn-default-color: #333;
|
||||
$btn-default-bg: #fff;
|
||||
$btn-default-border: #ccc;
|
||||
|
||||
$btn-primary-color: #fff;
|
||||
$btn-primary-bg: $brand-primary;
|
||||
$btn-primary-border: darken($btn-primary-bg, 5%);
|
||||
|
||||
$btn-success-color: #fff;
|
||||
$btn-success-bg: $brand-success;
|
||||
$btn-success-border: darken($btn-success-bg, 5%);
|
||||
|
||||
$btn-info-color: #fff;
|
||||
$btn-info-bg: $brand-info;
|
||||
$btn-info-border: darken($btn-info-bg, 5%);
|
||||
|
||||
$btn-warning-color: #fff;
|
||||
$btn-warning-bg: $brand-warning;
|
||||
$btn-warning-border: darken($btn-warning-bg, 5%);
|
||||
|
||||
$btn-danger-color: #fff;
|
||||
$btn-danger-bg: $brand-danger;
|
||||
$btn-danger-border: darken($btn-danger-bg, 5%);
|
||||
|
||||
$btn-link-disabled-color: $gray-light;
|
||||
|
||||
|
||||
//** Disabled cursor for form controls and buttons.
|
||||
$cursor-disabled: not-allowed;
|
||||
|
||||
.header-text {
|
||||
display:block;
|
||||
text-decoration:none;
|
||||
font-weight:bold;
|
||||
letter-spacing: -.05em;
|
||||
}
|
||||
|
||||
@mixin border-radius($topleft, $topright, $bottomright, $bottomleft)
|
||||
{
|
||||
-moz-border-radius: $arguments;
|
||||
-webkit-border-radius: $arguments;
|
||||
border-radius: $arguments;
|
||||
}
|
||||
|
||||
@mixin one-border-radius($radius)
|
||||
{
|
||||
-moz-border-radius: $radius;
|
||||
-webkit-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
.panelborders {
|
||||
border-width: 1px 0px;
|
||||
border-style: solid none;
|
||||
border-color: #FFFFFF;
|
||||
}
|
||||
|
||||
@mixin navigation-arrows($x, $y)
|
||||
{
|
||||
background:url($background-booklist) $x $y no-repeat;
|
||||
width:10px;
|
||||
height:15px;
|
||||
display:block;
|
||||
text-indent:-10000px;
|
||||
}
|
||||
|
||||
@mixin supporter-color-span($hex, $color)
|
||||
{
|
||||
$url: %("%sheader-button-%s.png", $image-base, $color);
|
||||
background:$hex url($url) left bottom repeat-x;
|
||||
}
|
||||
|
||||
.roundedspan {
|
||||
border:1px solid #d4d4d4;
|
||||
@include one-border-radius(7px);
|
||||
padding:1px;
|
||||
color:#fff;
|
||||
margin:0 8px 0 0;
|
||||
display:inline-block;
|
||||
|
||||
> span {
|
||||
padding:7px 7px;
|
||||
min-width:15px;
|
||||
@include one-border-radius(5px);
|
||||
text-align:center;
|
||||
display:inline-block;
|
||||
|
||||
.hovertext {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover .hovertext {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin height($x)
|
||||
{
|
||||
height:$x;
|
||||
line-height:$x;
|
||||
}
|
||||
|
||||
.mediaborder {
|
||||
padding: 5px;
|
||||
border: solid 5px #EDF3F4;
|
||||
}
|
||||
|
||||
.actionbuttons {
|
||||
width: auto;
|
||||
@include height(36px);
|
||||
background: $call-to-action;
|
||||
border: 1px solid transparent;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: $btn-font-weight;
|
||||
padding: 0 15px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
@mixin errors()
|
||||
{
|
||||
@include one-border-radius(16px);
|
||||
border: solid $alert 3px;
|
||||
clear: both;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
line-height: 16px;
|
||||
padding: 7px 0;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin clickyarrows()
|
||||
{
|
||||
text-indent:-10000px;
|
||||
font-size:0;
|
||||
width:15px;
|
||||
height:22px;
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:45%;
|
||||
}
|
||||
Loading…
Reference in New Issue