Fully adopt Bootstrap & update css to work with it, closes: #CNVS-1344
this commit does the following: * upgrade bootstrap-sass gem to most recent version * switches to using bootstrap's normalize.css and forms.css which fixes a whole bunch of misformatting of how bootstrap stuff is supposed to look, but changing those 2 affects a lot of our old stylesheets. * gets rid of unified_buttons.sass and just uses bootstraps buttons. .ui-button @extends these because we still have to support .ui-button for modals & buttonsets. but .button is no longer supported. * a lot of css file reorganization (there's no more 'blue' and 'normal canvas', there's just canvas) * a bunch of files had to be tweaked to look good with these changes. test plan: This change touches every page in canvas so, no kidding, we need to make sure every page looks OK. In order to do that: 1. each sprint team needs to give a +1 after they make sure all the pages in the features they are over look good. 2. the QA person on each team needs to look at the pages for their teams features for a QA +1 things to look for specifically when testing: * buttons: this gets rid of all those red 'cancel' links that are actually buttons, make sure all the buttons you see look right. if you see 2 plain gray buttons next to each other like [Save] [Cancel], we should make the primary one blue (by adding the .btn-primary class) * Forms: a lot of this change has to do with how form elements look, especially <select>s, <input>s and <label>s. look at the diffs for the ones that have the most changes and make sure those look good, but also check for the ones I missed and make sure those look good too. * and just random style changes, if something looks ugly or broken (and it didn't before), we should fix that. Also: just use a link instead of a drop-menu for adding event from sidebar we used to have a drop down menu for adding events to cal2 from the sidebar where you'd hit a cog and it'd ask you if you wanted to add an event or an assignment. this just simplifies it to an add icon. this: http://cl.ly/image/133a2A3q3q1M instead of: http://cl.ly/image/46463o2s3W0g Change-Id: I384fe273934bca96bf28423afb1402c7792d8766 Reviewed-on: https://gerrit.instructure.com/15422 Tested-by: Jenkins <jenkins@instructure.com> Reviewed-by: Ryan Florence <ryanf@instructure.com> QA-Review: Ryan Florence <ryanf@instructure.com>
This commit is contained in:
Ryan Florence
parent
e10923d433
commit
926cb0ca24
6
Gemfile
6
Gemfile
|
|
@ -18,7 +18,7 @@ gem 'encrypted_cookie_store-instructure', '1.0.2', :require => 'encrypted_cookie
|
|||
gem 'erubis', '2.7.0'
|
||||
gem 'ffi', '1.1.5'
|
||||
gem 'hairtrigger', '0.1.14'
|
||||
gem 'sass', '3.2.1'
|
||||
gem 'sass', '3.2.3'
|
||||
if !ONE_NINE
|
||||
gem 'fastercsv', '1.5.3'
|
||||
end
|
||||
|
|
@ -71,8 +71,8 @@ gem 'foreigner', '0.9.2'
|
|||
gem 'crocodoc-ruby', '0.0.1', :require => 'crocodoc'
|
||||
|
||||
group :assets do
|
||||
gem 'compass-rails', '1.0.2'
|
||||
gem 'bootstrap-sass', '2.0.3.1'
|
||||
gem 'compass-rails', '1.0.3'
|
||||
gem 'bootstrap-sass', '2.2.1.1'
|
||||
end
|
||||
|
||||
group :mysql do
|
||||
|
|
|
|||
|
|
@ -7,13 +7,8 @@ define [
|
|||
# when the button is clicked, see _admin_links.scss for markup
|
||||
$(document).on 'click', '.al-trigger', (event) ->
|
||||
$trigger = $(this)
|
||||
defaults =
|
||||
buttonOpts:
|
||||
icons:
|
||||
primary: null
|
||||
secondary: null
|
||||
|
||||
unless $trigger.data('kyleMenu')
|
||||
event.preventDefault()
|
||||
opts = $.extend defaults, $trigger.data('kyleMenuOptions')
|
||||
opts = $.extend {noButton: true}, $trigger.data('kyleMenuOptions')
|
||||
new KyleMenu($trigger, opts).open()
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ require [
|
|||
'compiled/notifications/privacyNotice'
|
||||
'compiled/profile/confirmEmail'
|
||||
], (INST, NotificationPreferences, initPrivacyNotice) ->
|
||||
ENV.NOTIFICATION_PREFERENCES_OPTIONS.touch = INST.browser.touch
|
||||
new NotificationPreferences(ENV.NOTIFICATION_PREFERENCES_OPTIONS)
|
||||
|
||||
$ ->
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ require [
|
|||
'jqueryui/tabs'
|
||||
'jqueryui/button'
|
||||
'jqueryui/tooltip'
|
||||
'jquery.instructure_date_and_time'
|
||||
], ($, preventDefault) ->
|
||||
|
||||
|
||||
|
|
@ -55,24 +56,12 @@ require [
|
|||
# Combinations
|
||||
$("#tabs2").tabs()
|
||||
$("#accordion2").accordion header: "h4"
|
||||
$("#buttonInModal").button icons:
|
||||
primary: "ui-icon-wrench"
|
||||
|
||||
|
||||
# Nested button tests
|
||||
$("#nestedButtonTest_1, #nestedButtonTest_2, #buttonInModal").button().click false
|
||||
|
||||
#Toolbar
|
||||
$("#play, #shuffle").button()
|
||||
$("#repeat").buttonset()
|
||||
|
||||
#Popover - Should be refactored to be more general purpose and reusable like tooltip.coffee. Do that when next needed.
|
||||
$('.show-popover').tooltip(
|
||||
position:
|
||||
my: "left center"
|
||||
at: "right+10 center"
|
||||
collision: 'none none'
|
||||
,
|
||||
tooltipClass: 'popover left middle horizontal'
|
||||
)
|
||||
$(".styleguide-datetime_field-example").datetime_field()
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ define [
|
|||
@$row.parents('.time-block-list-body-wrapper').scrollTop(9999)
|
||||
|
||||
validateField: (inputName) ->
|
||||
$suggest = @inputs[inputName].$el.nextAll('.datetime_suggest')
|
||||
$suggest = @inputs[inputName].$el.closest('td').find('.datetime_suggest')
|
||||
invalidDate = $suggest.hasClass('invalid_datetime')
|
||||
@updateDom(inputName, $suggest.text()) unless invalidDate
|
||||
@inputs[inputName].$el.toggleClass 'error', invalidDate
|
||||
|
|
|
|||
|
|
@ -59,8 +59,6 @@ define [
|
|||
$li.toggleClass('checked', visible).toggleClass('not-checked', !visible)
|
||||
|
||||
return sidebar = (contexts, selectedContexts, dataSource) ->
|
||||
for c in contexts
|
||||
c.can_create_stuff = c.can_create_calendar_events || c.can_create_assignments
|
||||
|
||||
$holder = $('#context-list-holder')
|
||||
|
||||
|
|
@ -68,39 +66,17 @@ define [
|
|||
|
||||
visibleContexts = new VisibleContextManager(contexts, selectedContexts, $holder)
|
||||
|
||||
$holder.find('.settings').kyleMenu
|
||||
buttonOpts:
|
||||
icons:
|
||||
primary:'ui-icon-cog-with-droparrow'
|
||||
secondary: null
|
||||
popupOpts:
|
||||
position:
|
||||
offset: '-25px 10px'
|
||||
within: '#right-side'
|
||||
|
||||
$holder.delegate '.context_list_context', 'click', (event) ->
|
||||
# dont toggle if thy were clicking the .settings button
|
||||
unless $(event.target).closest('.settings, .actions').length
|
||||
unless $(event.target).closest('[data-add-event]').length
|
||||
visibleContexts.toggle $(this).data('context')
|
||||
userSettings.set('checked_calendar_codes',
|
||||
map($(this).parent().children('.checked'), (c) -> $(c).data('context')))
|
||||
|
||||
$holder.delegate '.context_list_context'
|
||||
'mouseenter mouseleave': (event) ->
|
||||
hovering = !(event.type == 'mouseleave' && !$(this).find('.ui-menu:visible').length)
|
||||
$(this).toggleClass('hovering', hovering)
|
||||
'popupopen popupclose': (event) ->
|
||||
hovering = event.type == 'popupopen'
|
||||
$(this).toggleClass('hovering', hovering)
|
||||
.find('.settings').toggleClass('ui-state-active', hovering)
|
||||
|
||||
$holder.delegate '.actions a', 'click', ->
|
||||
$holder.delegate '[data-add-event]', 'click', ->
|
||||
context = $(this).parents('li[data-context]').data('context')
|
||||
action = $(this).data('action')
|
||||
if action == 'add_event' || action == 'add_assignment'
|
||||
event = commonEventFactory(null, contexts)
|
||||
new EditEventDetailsDialog(event).show()
|
||||
# TODO, codesmell: we should get rid of these next 2 lines and let EditEventDetailsDialog
|
||||
# take care of that behaviour
|
||||
$('select[class="context_id"]').val(context).triggerHandler('change')
|
||||
$('a[href="#edit_assignment_form"]').click() if action == 'add_assignment'
|
||||
event = commonEventFactory(null, contexts)
|
||||
new EditEventDetailsDialog(event).show()
|
||||
# TODO, codesmell: we should get rid of this next line and let EditEventDetailsDialog
|
||||
# take care of that behaviour
|
||||
$('select[class="context_id"]').val(context).triggerHandler('change')
|
||||
|
|
|
|||
|
|
@ -520,8 +520,7 @@ define [
|
|||
(updateSectionBeingShownText = =>
|
||||
$('#section_being_shown').html(if @sectionToShow then @sections[@sectionToShow].name else allSectionsText)
|
||||
)()
|
||||
$('#section_to_show').after($sectionToShowMenu).show().kyleMenu
|
||||
buttonOpts: {icons: {primary: "ui-icon-sections", secondary: "ui-icon-droparrow"}}
|
||||
$('#section_to_show').after($sectionToShowMenu).show().kyleMenu()
|
||||
$sectionToShowMenu.bind 'menuselect', (event, ui) =>
|
||||
@sectionToShow = Number($sectionToShowMenu.find('[aria-checked="true"] input[name="section_to_show_radio"]').val()) || undefined
|
||||
userSettings[ if @sectionToShow then 'contextSet' else 'contextRemove']('grading_show_only_section', @sectionToShow)
|
||||
|
|
@ -551,11 +550,7 @@ define [
|
|||
@arrangeColumnsBy(thingToArrangeBy)
|
||||
@arrangeColumnsBy('assignment_group')
|
||||
|
||||
$('#gradebook_settings').show().kyleMenu
|
||||
buttonOpts:
|
||||
icons:
|
||||
primary: "ui-icon-cog", secondary: "ui-icon-droparrow"
|
||||
text: false
|
||||
$('#gradebook_settings').show().kyleMenu()
|
||||
|
||||
$upload_modal = null
|
||||
$settingsMenu.find('.gradebook_upload_link').click (event) =>
|
||||
|
|
@ -564,7 +559,7 @@ define [
|
|||
locals =
|
||||
download_gradebook_csv_url: "#{@options.context_url}/gradebook.csv"
|
||||
action: "#{@options.context_url}/gradebook_uploads"
|
||||
authenticityToken: $("#ajax_authenticity_token").text()
|
||||
authenticityToken: ENV.AUTHENTICITY_TOKEN
|
||||
$upload_modal = $(gradebook_uploads_form(locals))
|
||||
.dialog
|
||||
bgiframe: true
|
||||
|
|
@ -573,9 +568,6 @@ define [
|
|||
width: 720
|
||||
resizable: false
|
||||
.fixDialogButtons()
|
||||
.delegate '#gradebook-upload-help-trigger', 'click', ->
|
||||
$(this).hide()
|
||||
$('#gradebook-upload-help').show()
|
||||
$upload_modal.dialog('open')
|
||||
|
||||
$settingsMenu.find('.student_names_toggle').click (e) ->
|
||||
|
|
|
|||
|
|
@ -11,8 +11,11 @@ define [
|
|||
@opts = $.extend(true, {}, KyleMenu.defaults, options)
|
||||
|
||||
unless @opts.noButton
|
||||
@$trigger.append('<i class="icon-mini-arrow-down"></i>') if @opts.buttonOpts.addDropArrow
|
||||
@$trigger.button(@opts.buttonOpts)
|
||||
|
||||
|
||||
|
||||
# this is to undo the removal of the 'ui-state-active' class that jquery.ui.button
|
||||
# does by default on mouse out if the menu is still open
|
||||
@$trigger.bind 'mouseleave.button', @keepButtonActive
|
||||
|
|
@ -62,12 +65,12 @@ define [
|
|||
@$menu.removeClass "ui-state-open"
|
||||
|
||||
keepButtonActive: =>
|
||||
@$trigger.addClass('ui-state-active') if @$menu.is('.ui-state-open')
|
||||
@$trigger.addClass('ui-state-active') if @$menu.is('.ui-state-open') && @$trigger.is('.btn, .ui-button')
|
||||
|
||||
# handle sticking the carat right below where you clicked on the button
|
||||
adjustCarat: (event) ->
|
||||
@$carat?.remove()
|
||||
@$trigger.addClass('ui-state-active')
|
||||
@$trigger.addClass('ui-state-active') if @$trigger.is('.btn, .ui-button')
|
||||
triggerWidth = @$trigger.outerWidth()
|
||||
triggerOffsetLeft = @$trigger.offset().left
|
||||
|
||||
|
|
@ -95,9 +98,7 @@ define [
|
|||
within: '#main',
|
||||
collision: 'fit'
|
||||
buttonOpts:
|
||||
icons:
|
||||
primary: "ui-icon-home"
|
||||
secondary: "ui-icon-droparrow"
|
||||
addDropArrow: true
|
||||
|
||||
|
||||
#expose jQuery plugin
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ define [
|
|||
|
||||
|
||||
$.fn.serializeForm = ->
|
||||
_.chain(this[0].elements)
|
||||
_.chain(this[0].elements || this.find(':input'))
|
||||
.filter(isInput)
|
||||
.map(getValue)
|
||||
.value()
|
||||
|
|
|
|||
|
|
@ -19,22 +19,22 @@ define [
|
|||
# Define the buttons for display. The 'code' must match up to the Notification::FREQ_* constants.
|
||||
@buttonData = [
|
||||
code: 'immediately'
|
||||
image: 'ui-icon-check'
|
||||
icon: 'icon-check'
|
||||
text: I18n.t('frequencies.immediately', 'ASAP')
|
||||
title: I18n.t('frequencies.title.right_away', 'Notify me right away')
|
||||
,
|
||||
code: 'daily'
|
||||
image: 'ui-icon-clock'
|
||||
icon: 'icon-clock'
|
||||
text: I18n.t('frequencies.daily', 'Daily')
|
||||
title: I18n.t('frequencies.title.daily', 'Send daily summary')
|
||||
,
|
||||
code: 'weekly'
|
||||
image: 'ui-icon-calendar'
|
||||
icon: 'icon-calendar-month'
|
||||
text: I18n.t('frequencies.weekly', 'Weekly')
|
||||
title: I18n.t('frequencies.title.weekly', 'Send weekly summary')
|
||||
,
|
||||
code: 'never'
|
||||
image: 'ui-icon-close'
|
||||
icon: 'icon-x'
|
||||
text: I18n.t('frequencies.never', 'Never')
|
||||
title: I18n.t('frequencies.title.never', 'Do not send me anything')
|
||||
]
|
||||
|
|
@ -43,7 +43,6 @@ define [
|
|||
@channels = @options.channels || []
|
||||
@categories = @options.categories || []
|
||||
@policies = @options.policies || []
|
||||
@touch = @options.touch == true
|
||||
|
||||
# Give each channel a 'name'
|
||||
for c in @channels
|
||||
|
|
@ -148,7 +147,7 @@ define [
|
|||
# Build the HTML notifications table.
|
||||
buildTable: =>
|
||||
$('#notification-preferences').append(notificationPreferencesTemplate(
|
||||
touch: @touch,
|
||||
touch: INST.browser.touch,
|
||||
channels: @channels,
|
||||
eventGroups: @communicationEventGroups()
|
||||
))
|
||||
|
|
@ -175,7 +174,7 @@ define [
|
|||
selected = @findButtonDataForCode(selectedValue)
|
||||
selected['active'] = true
|
||||
|
||||
policyCellTemplate(touch: @touch, category: category.category, channelId: channelId, selected: selected, allButtons: @buttonData)
|
||||
policyCellTemplate(touch: INST.browser.touch, category: category.category, channelId: channelId, selected: selected, allButtons: @buttonData)
|
||||
|
||||
# Record and display the value for the cell.
|
||||
saveNewCellValue: ($cell, value) =>
|
||||
|
|
@ -199,33 +198,28 @@ define [
|
|||
|
||||
# Setup event bindings.
|
||||
setupEventBindings: =>
|
||||
# Setup the individual buttons as a jQueryUI button with text hidden and using the desired image.
|
||||
for data in @buttonData
|
||||
$(".#{data['code']}-button").button
|
||||
text: false
|
||||
icons:
|
||||
primary: data['image']
|
||||
|
||||
$notificationPrefs = $('#notification-preferences')
|
||||
|
||||
# Setup the buttons as a buttonset
|
||||
$notificationPrefs.find('.event-option-buttons').buttonset()
|
||||
|
||||
# Catch mouse over and auto-toggle for faster interactions.
|
||||
$notificationPrefs.find('.notification-prefs-table.no-touch').on
|
||||
mouseenter: (e) =>
|
||||
@cellButtonsShow($(e.currentTarget), false)
|
||||
mouseleave: (e) =>
|
||||
@cellButtonsHide($(e.currentTarget), false)
|
||||
, '.comm-event-option'
|
||||
unless INST.browser.touch
|
||||
# Catch mouse over and auto-toggle for faster interactions.
|
||||
$notificationPrefs.find('.notification-prefs-table').on
|
||||
mouseenter: (e) =>
|
||||
@cellButtonsShow($(e.currentTarget), false)
|
||||
mouseleave: (e) =>
|
||||
@cellButtonsHide($(e.currentTarget), false)
|
||||
, '.comm-event-option'
|
||||
|
||||
# Setup current selection click event to display selection changing buttons
|
||||
$notificationPrefs.find('.notification-prefs-table.no-touch a.change-selection').on 'click', (e) =>
|
||||
# Hide any/all other showing buttons
|
||||
e.preventDefault()
|
||||
cell = $(e.currentTarget).closest('td')
|
||||
@hideButtonsExceptCell(cell)
|
||||
@cellButtonsShow(cell, true)
|
||||
# Setup current selection click event to display selection changing buttons
|
||||
$notificationPrefs.find('.notification-prefs-table a.change-selection').on 'click', (e) =>
|
||||
# Hide any/all other showing buttons
|
||||
e.preventDefault()
|
||||
cell = $(e.currentTarget).closest('td')
|
||||
@hideButtonsExceptCell(cell)
|
||||
@cellButtonsShow(cell, true)
|
||||
|
||||
# When selection button is clicked, the hidden radio button is changed. React to that change. Hide the control and focus the selection
|
||||
$notificationPrefs.find('.frequency').on 'change', (e) =>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ define [
|
|||
|
||||
tagName: 'form'
|
||||
|
||||
className: 'form-horizontal bootstrap-form'
|
||||
className: 'form-horizontal no-margin'
|
||||
|
||||
dontRenableAfterSaveSuccess: true
|
||||
|
||||
|
|
|
|||
|
|
@ -429,7 +429,7 @@ module ApplicationHelper
|
|||
hide = tab[:hidden] || tab[:hidden_unused]
|
||||
class_name = tab[:css_class].to_css_class
|
||||
class_name += ' active' if @active_tab == tab[:css_class]
|
||||
html << "<li class='section #{"hidden" if hide }'>" + link_to(tab[:label], path, :class => class_name) + "</li>" if tab[:href]
|
||||
html << "<li class='section #{"section-tab-hidden" if hide }'>" + link_to(tab[:label], path, :class => class_name) + "</li>" if tab[:href]
|
||||
end
|
||||
html << "</ul></nav>"
|
||||
html.join("")
|
||||
|
|
|
|||
|
|
@ -1,13 +1,8 @@
|
|||
@import compass
|
||||
|
||||
//variables
|
||||
@import 'bootstrap/variables'
|
||||
@import 'jqueryui/variables'
|
||||
@import 'blue/variables'
|
||||
@import 'variables'
|
||||
|
||||
//mixins
|
||||
@import 'bootstrap/mixins'
|
||||
@import 'mixins/misc'
|
||||
@import 'blue/mixins'
|
||||
@import 'mixins/bubbles'
|
||||
@import compass
|
||||
@import "compass/typography/text/ellipsis"
|
||||
@import 'mixins/main'
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
$iconSpritePath: "canvas_does_not_use_boostraps_default_sprit_based_icons_so_this_is_meaningless" !default
|
||||
$iconWhiteSpritePath: $iconSpritePath !default
|
||||
|
||||
@import 'bootstrap/variables'
|
||||
@import 'jqueryui/variables'
|
||||
|
||||
|
||||
$right_side_width: 286px
|
||||
$left_side_width: 175px
|
||||
$min_main_width: 510px
|
||||
$max_main_width: 1100px
|
||||
$main_background_color: #fff
|
||||
|
||||
$link_color: #396eb2
|
||||
|
||||
$identity-link-color: #fff
|
||||
$menu-border-color: #ccc
|
||||
|
|
@ -13,8 +17,6 @@ $menu-link-color: #456787
|
|||
$menu-background-color: #f3f4f5
|
||||
|
||||
$right_side_text_color: #595959
|
||||
$right_side_header_color: #fff
|
||||
|
||||
$right_side_margin: 13px
|
||||
|
||||
// section tabs
|
||||
|
|
@ -23,25 +25,13 @@ $section_tabs_color: #4b7092
|
|||
$section_tabs_hover_background_color: darken(#e4e7e9, 2%)
|
||||
$section_tabs_border_top_color: #C6C6C6
|
||||
$section_tabs_border_bottom_color: lighten($section_tabs_border_top_color, 4%)
|
||||
$section_tabs_hidden_color: #aaa
|
||||
$section_tabs_to_be_hidden_color: #888
|
||||
|
||||
|
||||
// Buttons
|
||||
$button-text-color: #525252
|
||||
$buttonset-border-radius: 4px
|
||||
|
||||
$ui-state-default-gradient-top: #ededed
|
||||
$ui-state-default-gradient-bottom: #c4c4c4
|
||||
$ui-state-active-gradient-top: red
|
||||
$ui-state-active-gradient-bottom: pink
|
||||
$ui-button-border-radius: 30px
|
||||
|
||||
|
||||
// gradiants
|
||||
$blue-box-background-top: #36bcff
|
||||
$blue-box-background-bottom: #238edc
|
||||
|
||||
// this is the blue color that we use all over the place when not in a gradiants
|
||||
$highlight-color: #06a9ee
|
||||
// light blue hover color
|
||||
|
|
@ -49,9 +39,20 @@ $hover-color: #E5F3FF
|
|||
// this is the grey color for when things are disabled, or meant to contrast with $highlight-color
|
||||
$diminutive-color: #acacac
|
||||
|
||||
$silver-gradient-top: #ededed
|
||||
$silver-gradient-bottom: #c4c4c4
|
||||
$masquerade-link-color: #ffa500
|
||||
|
||||
// canvas stuff
|
||||
$lightBackground: rgb(248, 250, 251)
|
||||
$borderColor: #a8adb3
|
||||
$borderRadius: 4px
|
||||
$toolbarBackground: #D7E7F5
|
||||
$toolbarBackgroundLight: #E8F1F9
|
||||
$listViewHeaderBackground: rgb(225, 230, 235)
|
||||
$listViewHeaderBackgroundLight: lighten($listViewHeaderBackground, 5%)
|
||||
$contentBoxPadding: 8px
|
||||
$listBorderColor: lighten($borderColor, 5%)
|
||||
$activeBG: #d6ecfc
|
||||
$dimmedOpacity: 0.4
|
||||
|
||||
$masquerade-link-color: #ffa500
|
||||
|
||||
|
|
@ -59,3 +60,5 @@ $masquerade-link-color: #ffa500
|
|||
$h1-font-size: 23px
|
||||
$h2-font-size: 14px
|
||||
$h3-font-size: 19px
|
||||
|
||||
$spacing-width: 20px
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
.right-side-h2-border{
|
||||
color: $gray;
|
||||
border-bottom: solid 1px $borderGray;
|
||||
border-bottom: solid 1px $borderColor;
|
||||
box-shadow: 0 1px 0 white;
|
||||
margin: $right_side_margin 0 0;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
margin: 1px 2px 2px 2px;
|
||||
width: auto;
|
||||
padding: 20px 20px 6px 6px;
|
||||
.label {
|
||||
.alert-label {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
marge-top: 5px;
|
||||
|
|
|
|||
|
|
@ -222,7 +222,7 @@
|
|||
border-bottom: 1px solid lighten($borderColor, 22%)
|
||||
&:hover
|
||||
.name
|
||||
color: darken($link_color, 12%)
|
||||
color: $linkColorHover
|
||||
a
|
||||
display: block
|
||||
line-height: 1.2
|
||||
|
|
@ -276,7 +276,7 @@
|
|||
background-position: -8px -41px
|
||||
|
||||
.customListOpen
|
||||
color: $link_color
|
||||
color: $linkColor
|
||||
float: right
|
||||
font-size: 11px
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
border-bottom: solid 1px #ccc
|
||||
display: none
|
||||
|
||||
#section-tabs li.hidden a
|
||||
#section-tabs .section-tab-hidden a
|
||||
color: #bbb
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "blue/variables"
|
||||
|
||||
#right-side-wrapper
|
||||
display: none
|
||||
position: relative
|
||||
|
|
@ -24,8 +22,10 @@
|
|||
font-weight: bold
|
||||
border-bottom: solid 1px #bbb
|
||||
box-shadow: 0 1px 0 white
|
||||
margin: $right_side_margin 0 0
|
||||
margin: $right_side_margin 0
|
||||
overflow: hidden
|
||||
line-height: 1.2em
|
||||
padding-bottom: 3px
|
||||
|
||||
.rs-match-list-indent
|
||||
padding-left: 31px
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
body, html
|
||||
height: 100%
|
||||
body
|
||||
background-image: url("/images/blue/bg.jpg")
|
||||
min-width: $min_main_width
|
||||
|
|
@ -64,7 +62,7 @@ body
|
|||
#main
|
||||
position: relative
|
||||
z-index: 10
|
||||
background-color: $main_background_color
|
||||
background-color: $bodyBackground
|
||||
border: 1px solid $listBorderColor
|
||||
border-top: 0
|
||||
margin-bottom: 40px
|
||||
|
|
@ -155,9 +153,10 @@ body
|
|||
.home a
|
||||
color: #ccc
|
||||
i
|
||||
font-size: 12px
|
||||
margin-right: -5px
|
||||
vertical-align: text-bottom
|
||||
&:before
|
||||
font-size: 12px
|
||||
|
||||
.ellipsis
|
||||
display: inline-block
|
||||
|
|
|
|||
|
|
@ -1,63 +0,0 @@
|
|||
a
|
||||
color: $link_color
|
||||
text-decoration: none
|
||||
// this is to fix a strange bug with firefox where if you made a link to an unvisited
|
||||
// url in tiny it would be the browsers default link color and have underline. the built-in
|
||||
// system stylesheet of firefox was overriding that a:link rule above.
|
||||
&:link:-moz-read-write
|
||||
color: $link_color !important
|
||||
text-decoration: none !important
|
||||
&:hover, &:active, &:focus
|
||||
text-decoration: underline
|
||||
&.external
|
||||
&:hover, &:focus, &:active
|
||||
text-decoration: none
|
||||
span
|
||||
text-decoration: underline
|
||||
span.ui-icon-extlink
|
||||
text-decoration: none
|
||||
span.ui-icon-extlink
|
||||
display: inline-block
|
||||
padding: 0
|
||||
vertical-align: middle
|
||||
.content_underline_links
|
||||
a
|
||||
text-decoration: underline
|
||||
&.external
|
||||
text-decoration: none !important
|
||||
span
|
||||
text-decoration: underline
|
||||
span.ui-icon-extlink
|
||||
text-decoration: none
|
||||
display: inline-block
|
||||
padding: 0
|
||||
vertical-align: middle
|
||||
|
||||
/* Tables
|
||||
-------------------------------------------------------------- */
|
||||
table.stylized
|
||||
margin-bottom: 1.4em
|
||||
width: 100%
|
||||
th
|
||||
font-weight: bold
|
||||
th, td, caption
|
||||
padding: 2px 5px 2px 2px
|
||||
tfoot
|
||||
font-style: italic
|
||||
caption
|
||||
background: #eee
|
||||
|
||||
table.striped
|
||||
thead th
|
||||
//for ie8
|
||||
background-color: #ddd
|
||||
//Better cause it just makes whatever it's on top of darker.
|
||||
background-color: rgba(0, 0, 0, 0.06 )
|
||||
tr.even td, tr:nth-child(2n) td
|
||||
//for ie8
|
||||
background-color: #FBFBFB
|
||||
//Better cause it just makes whatever it's on top of darker.
|
||||
background-color: rgba(0, 0, 0, 0.02 )
|
||||
table.bordered
|
||||
th, td
|
||||
border: 1px solid #ccc
|
||||
|
|
@ -1,7 +1,4 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@import "environment.sass";
|
||||
|
||||
// # encoding: UTF-8
|
||||
@media print {
|
||||
|
||||
// just add this class to anything you dont want to be printed
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
/* Sets up some sensible default typography.
|
||||
|
||||
/* Default font settings.
|
||||
The font-size percentage is of 16px. (0.75 * 16px = 12px) */
|
||||
html
|
||||
font-size: 100.01%
|
||||
body
|
||||
font-size: 75%
|
||||
color: #333
|
||||
font: 13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif
|
||||
|
||||
/* Headings
|
||||
-------------------------------------------------------------- */
|
||||
h1, h2, h3, h4, h5, h6
|
||||
font-weight: normal
|
||||
color: #444
|
||||
h1, h2
|
||||
font-size: 1.8em
|
||||
margin-bottom: 0.5em
|
||||
h3
|
||||
font-size: 1.5em
|
||||
line-height: 1
|
||||
margin-bottom: 1em
|
||||
h4
|
||||
font-size: 1.2em
|
||||
line-height: 1.25
|
||||
margin-bottom: 1.25em
|
||||
h5
|
||||
font-size: 1em
|
||||
font-weight: bold
|
||||
margin-bottom: 1.5em
|
||||
h6
|
||||
font-size: 1em
|
||||
font-weight: bold
|
||||
|
||||
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img
|
||||
margin: 0
|
||||
|
||||
/* Text elements
|
||||
-------------------------------------------------------------- */
|
||||
p
|
||||
margin: 0 0 1.5em
|
||||
img
|
||||
&.left
|
||||
float: left
|
||||
margin: 1.5em 1.5em 1.5em 0
|
||||
padding: 0
|
||||
&.right
|
||||
float: right
|
||||
margin: 1.5em 0 1.5em 1.5em
|
||||
|
||||
blockquote
|
||||
margin: 1.5em
|
||||
color: #666
|
||||
font-style: italic
|
||||
|
||||
strong
|
||||
font-weight: bold
|
||||
|
||||
em
|
||||
font-style: italic
|
||||
|
||||
dfn
|
||||
font-style: italic
|
||||
font-weight: bold
|
||||
|
||||
sup, sub
|
||||
line-height: 0
|
||||
|
||||
abbr, acronym
|
||||
border-bottom: 1px dotted #666
|
||||
|
||||
address
|
||||
margin: 0 0 1.5em
|
||||
font-style: italic
|
||||
|
||||
del
|
||||
color: #666
|
||||
|
||||
pre
|
||||
margin: 1.5em 0
|
||||
white-space: pre
|
||||
pre, code, tt
|
||||
font: 1em 'andale mono', 'lucida console', monospace
|
||||
line-height: 1.5
|
||||
|
||||
|
|
@ -1,320 +0,0 @@
|
|||
// Base styles
|
||||
// --------------------------------------------------
|
||||
|
||||
// Core
|
||||
.btn, .ui-button, .button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: $buttonPadding;
|
||||
margin: 0;
|
||||
font-size: $baseFontSize;
|
||||
line-height: $baseLineHeight;
|
||||
color: $grayDark;
|
||||
|
||||
//needed? (from stock jqueryui)
|
||||
text-decoration: none !important;
|
||||
zoom: 1;
|
||||
overflow: visible; /* the overflow property removes extra width in IE */
|
||||
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
font-family: "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
|
||||
|
||||
|
||||
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
||||
@include buttonBackground($btnBackground, $btnBackgroundHighlight);
|
||||
border: 1px solid $btnBorder;
|
||||
border-bottom-color: darken($btnBorder, 10%);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
// icons should be a little lighter than the text, per Kyle
|
||||
[class*=icon-], i[class^=icon-] {
|
||||
color: lighten( $grayDark, 15% );
|
||||
}
|
||||
|
||||
}
|
||||
.btn, .button {
|
||||
// jqueryui uses ui-corner-* classes to manage border radii
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
.btn:hover, .button:hover, .ui-button.ui-state-hover {
|
||||
color: $grayDark;
|
||||
text-decoration: none;
|
||||
background-color: darken($white, 10%);
|
||||
background-position: 0 -15px;
|
||||
|
||||
// transition is only when going to hover, otherwise the background
|
||||
// behind the gradient (there for IE<=9 fallback) gets mismatched
|
||||
@include transition(background-position .1s linear);
|
||||
}
|
||||
|
||||
// Focus state for keyboard and accessibility
|
||||
.btn:focus, .button:focus, .ui-button.ui-state-focus {
|
||||
@include tab-focus();
|
||||
}
|
||||
|
||||
// Active state
|
||||
.btn.active, .btn:active, .button.active, .button:active, .ui-button.ui-state-active {
|
||||
background-color: darken($white, 10%);
|
||||
background-color: darken($white, 15%) \9;
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
@include box-shadow(#{inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)});
|
||||
|
||||
border: 1px solid $btnBorder;
|
||||
border-bottom-color: darken($btnBorder, 10%);
|
||||
color: $grayDark;
|
||||
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
||||
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.btn.disabled, .btn[disabled], .button.disabled, .button[disabled], .ui-button.ui-state-disabled {
|
||||
cursor: default;
|
||||
background-color: darken($white, 10%);
|
||||
background-image: none;
|
||||
@include opacity(0.65);
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
|
||||
// Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
// Large
|
||||
.btn-large {
|
||||
padding: 9px 14px;
|
||||
font-size: $baseFontSize + 2px;
|
||||
line-height: normal;
|
||||
@include border-radius(5px);
|
||||
}
|
||||
.btn-large [class^="icon-"] {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
// Small
|
||||
.btn-small {
|
||||
padding: 3px 9px;
|
||||
font-size: $baseFontSize - 2px;
|
||||
line-height: $baseLineHeight - 2px;
|
||||
}
|
||||
|
||||
// Mini
|
||||
.btn-mini {
|
||||
padding: 2px 6px;
|
||||
font-size: $baseFontSize - 2px;
|
||||
line-height: $baseLineHeight - 4px;
|
||||
}
|
||||
|
||||
|
||||
// Alternate buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
// Set text color
|
||||
// -------------------------
|
||||
.btn-primary, .btn-warning, .btn-danger, .btn-success, .btn-info, .btn-inverse {
|
||||
&, &:hover {
|
||||
color: $white;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
}
|
||||
|
||||
// make icons within color-background buttons display in white
|
||||
[class*=icon-], i[class^=icon-] {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
}
|
||||
// Provide *some* extra contrast for those who can get it
|
||||
.btn-primary, .btn-warning, .btn-danger, .btn-success, .btn-info, .btn-inverse {
|
||||
.active { color: rgba(255,255,255,.75); }
|
||||
}
|
||||
|
||||
// Set the backgrounds
|
||||
// -------------------------
|
||||
.btn {
|
||||
// reset here as of 2.0.3 due to Recess property order
|
||||
border-color: #ccc;
|
||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
|
||||
}
|
||||
.btn-primary {
|
||||
@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
|
||||
}
|
||||
// Warning appears are orange
|
||||
.btn-warning {
|
||||
@include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight);
|
||||
}
|
||||
// Danger and error appear as red
|
||||
.btn-danger {
|
||||
@include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight);
|
||||
}
|
||||
// Success appears as green
|
||||
.btn-success {
|
||||
@include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight);
|
||||
}
|
||||
// Info appears as a neutral blue
|
||||
.btn-info {
|
||||
@include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight);
|
||||
}
|
||||
.btn-inverse {
|
||||
@include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight);
|
||||
}
|
||||
|
||||
|
||||
//// Cross-browser Jank
|
||||
//// --------------------------------------------------
|
||||
//
|
||||
//button.btn, input[type="submit"].btn {
|
||||
//
|
||||
// // Firefox 3.6 only I believe
|
||||
// &::-moz-focus-inner {
|
||||
// padding: 0;
|
||||
// border: 0;
|
||||
// }
|
||||
//
|
||||
//}
|
||||
|
||||
|
||||
|
||||
/*!
|
||||
* jQuery UI Button 1.8.21
|
||||
*
|
||||
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Button#theming
|
||||
*/
|
||||
.ui-button-icon-only { width: 2.2em; /* to make room for the icon, a width needs to be set here */
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
|
||||
.ui-button-icons-only { width: 3.4em; }
|
||||
button.ui-button-icons-only { width: 3.7em; }
|
||||
|
||||
//jqueryui expects the padding to be on the .ui-button-text not the button
|
||||
.ui-button-text-only {
|
||||
padding: 0;
|
||||
.ui-button-text { display: block; //line-height: 1.4;
|
||||
padding: $buttonPadding;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { display: inline-block; text-indent: -9999999px; }
|
||||
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
|
||||
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
|
||||
.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
|
||||
|
||||
// we dont support input.button
|
||||
// /* no icon support for input elements, provide padding by default */
|
||||
// input.ui-button { padding: .4em 1em; }
|
||||
|
||||
/*button icon element(s) */
|
||||
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
|
||||
.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
|
||||
.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
|
||||
.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
|
||||
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
|
||||
|
||||
/*button sets*/
|
||||
.ui-buttonset { margin-right: 7px; }
|
||||
.ui-buttonset .ui-button { margin-left: 0;
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
/* workarounds */
|
||||
button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
|
||||
|
||||
|
||||
|
||||
|
||||
////
|
||||
// Relics from g_util_buttons that I would like to phase out support for,
|
||||
// but because there is a ton of stuff that uses it all over the app, we can't yet.
|
||||
// PLEASE DONT USE!!
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
a.button, button.button {
|
||||
img {
|
||||
margin: 0 3px -3px 0 !important;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
em {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.small-button {
|
||||
@extend .btn-small;
|
||||
img { margin: 0 1px 0px 0 !important; }
|
||||
}
|
||||
.big-button { @extend .btn-large; }
|
||||
.button-default { @extend .btn-primary; }
|
||||
|
||||
.button-container { margin-top: 0.5em; }
|
||||
|
||||
.button-container-right-aligned {
|
||||
text-align: right;
|
||||
a.button, button.button {
|
||||
margin-right: 0;
|
||||
margin-left: 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
a.button-secondary,
|
||||
button.button-secondary {
|
||||
&, &:hover, &:active, &:focus {
|
||||
float: none;
|
||||
margin: 0 0.7em 0 0 !important;
|
||||
background: transparent none !important;
|
||||
border: 0px none !important;
|
||||
padding: 0 0 0 1em !important;
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
color: #d15545 !important;
|
||||
box-shadow: none;
|
||||
@include border-radius(0); }
|
||||
&:hover, &:active, &:focus {
|
||||
text-decoration: underline !important;
|
||||
color: #d12f19;
|
||||
outline: none; }
|
||||
&.disabled {
|
||||
text-decoration: none !important;
|
||||
cursor: default; }
|
||||
}
|
||||
|
||||
.textfield-inline-with-button {
|
||||
.small-button { margin: 0 0 0 2px; }
|
||||
input { width: 80%; }
|
||||
}
|
||||
|
||||
|
||||
#right-side {
|
||||
a, button {
|
||||
&.button-sidebar-wide {
|
||||
text-align: left;
|
||||
margin: 5px auto;
|
||||
display: block;
|
||||
/* 12px is the size of the padding on the button */
|
||||
// width: $right_side_width - $right_side_margin - $right_side_margin - 2px - 12px - 12px;
|
||||
}
|
||||
}
|
||||
button.button-sidebar-wide { width: $right_side_width - $right_side_margin - $right_side_margin; }
|
||||
}
|
||||
|
||||
|
||||
$triangle-edge-size: 5px;
|
||||
.ui-icon-droparrow {
|
||||
background-image: none;
|
||||
border: solid transparent;
|
||||
border-width: $triangle-edge-size $triangle-edge-size 0 $triangle-edge-size;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top-color: $button-text-color;
|
||||
margin-top: -$triangle-edge-size / 2 !important;
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import "icons";
|
||||
@import "borders";
|
||||
@import "gutters";
|
||||
@import "components";
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
@mixin bevelText {
|
||||
text-shadow: 0 1px 1px hsla(0, 100%, 100%, 0.75);
|
||||
}
|
||||
|
||||
@mixin header-text {
|
||||
color: $fcHeader;
|
||||
text-shadow: 0 1px 1px $textShadowHeader;
|
||||
}
|
||||
@mixin header-bg {
|
||||
@include vertical-gradient($gradientTopHeader, $gradientBottomHeader);
|
||||
box-shadow: inset 0 1px 0 hsla(0, 100%, 100%, 0.75);
|
||||
}
|
||||
|
||||
@mixin ui-widget-header-bg-and-text {
|
||||
border: 1px solid $borderColorHeader;
|
||||
@include header-text;
|
||||
@include header-bg;
|
||||
}
|
||||
|
||||
@mixin content-callout {
|
||||
@include gradient-vertical(lighten($contentCalloutColor, 4%), $contentCalloutColor);
|
||||
color: $blueDark;
|
||||
}
|
||||
|
||||
@mixin ellipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden; /* "overflow" value must be different from "visible" */
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@mixin box-with-header {
|
||||
border: solid 1px $borderColor;
|
||||
border-radius: 3px;
|
||||
@include box-shadow(0 1px 1px 0px lighten($borderColor, 20%));
|
||||
@include gradient-vertical($white, $lightBackground);
|
||||
|
||||
.box-header {
|
||||
& > * {
|
||||
padding: 8px 20px;
|
||||
}
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
@include content-callout();
|
||||
border-bottom: solid 1px $listBorderColor;
|
||||
color: $blueDark;
|
||||
|
||||
.box-subheader {
|
||||
color: $grayDark;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.box-content {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.box-header-column {
|
||||
display: table-cell;
|
||||
width: 100000px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
a.box-header-column {
|
||||
width: 0;
|
||||
color: #9babb6;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
border-left: 1px solid #c3ccd5;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
@include box-shadow(inset 0 1px 1px white);
|
||||
@include gradient-vertical($contentCalloutColor, darken($contentCalloutColor, 8%));
|
||||
text-decoration: none;
|
||||
border-left-color: $borderColor;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 3px; // prevent my corner from bleeding out when the hover bg is applied
|
||||
}
|
||||
i[class*="icon-"], i[class^="icon-"] {
|
||||
margin: 0 auto;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// global mixin for easy retina background images
|
||||
|
||||
@mixin bg-image($filename, $filetype, $rep: no-repeat, $bgx: 0, $bgy: 0, $bgcolor: none, $bgw: auto, $bgh: auto) {
|
||||
|
||||
background-color: $bgcolor;
|
||||
background-image: url('/images/' + $filename + '.' + $filetype);
|
||||
background-repeat: $rep;
|
||||
background-position: $bgx $bgy;
|
||||
|
||||
@media (min--moz-device-pixel-ratio: 1.5),
|
||||
(-o-min-device-pixel-ratio: 3/2),
|
||||
(-webkit-min-device-pixel-ratio: 1.5),
|
||||
(min-device-pixel-ratio: 1.5),
|
||||
(min-resolution: 1.5dppx) {
|
||||
background-image: url('/images/' + $filename + '@2x.' + $filetype);
|
||||
background-size: $bgw $bgh;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
// bootstrap overrides
|
||||
$gridColumnWidth: 62;
|
||||
$black: #000 !default;
|
||||
$gray: rgb(100, 103, 105) !default;
|
||||
$grayDarker: darken($gray, 15%) !default;
|
||||
$grayDark: darken($gray, 8%) !default;
|
||||
$grayLight: lighten($gray, 20%) !default;
|
||||
$grayLighter: lighten($gray, 50%) !default;
|
||||
$white: #fff !default;
|
||||
$activeBG: #D6ECFC;
|
||||
$blue: #4B92E9;
|
||||
$blueDark: #244979;
|
||||
$blueGray: #94ABB9;
|
||||
$inputDisabledBackground: transparent;
|
||||
|
||||
// canvas stuff
|
||||
$lightBackground: rgb(248, 250, 251);
|
||||
$borderColor: #a8adb3;
|
||||
$borderRadius: 4px;
|
||||
$contentCalloutColor: #dceaf7;
|
||||
$toolbarBackground: #D7E7F5;
|
||||
$toolbarBackgroundLight: #E8F1F9;
|
||||
$listViewHeaderBackground: rgb(225, 230, 235);
|
||||
$listViewHeaderBackgroundLight: lighten($listViewHeaderBackground, 5%);
|
||||
$contentBoxPadding: 8px;
|
||||
$listBorderColor: lighten($borderColor, 5%);
|
||||
$borderGray: #bbb;
|
||||
|
|
@ -1,511 +0,0 @@
|
|||
// Everything else
|
||||
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
|
||||
input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"],
|
||||
input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
|
||||
background-color: $inputBackground;
|
||||
border: 1px solid $inputBorder;
|
||||
@include border-radius($inputBorderRadius);
|
||||
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
||||
@include transition(#{border linear .2s, box-shadow linear .2s});
|
||||
padding: 4px 2px;
|
||||
|
||||
|
||||
// Focus state
|
||||
&:focus {
|
||||
border-color: rgba(0, 153, 255, 0.8);
|
||||
outline: 0;
|
||||
outline: thin dotted \9; /* IE6-9 */
|
||||
@include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 153, 255, 0.6)});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Forms.less
|
||||
// Base styles for various input types, form layouts, and states
|
||||
// -------------------------------------------------------------
|
||||
|
||||
|
||||
// GENERAL STYLES
|
||||
// --------------
|
||||
|
||||
// Make all forms have space below them
|
||||
.bootstrap-form {
|
||||
margin: 0 0 $baseLineHeight;
|
||||
|
||||
fieldset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Groups of fields with labels on top (legends)
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: $baseLineHeight * 1.5;
|
||||
font-size: $baseFontSize * 1.5;
|
||||
line-height: $baseLineHeight * 2;
|
||||
color: $grayDark;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
// Small
|
||||
small {
|
||||
font-size: $baseLineHeight * .75;
|
||||
color: $grayLight;
|
||||
}
|
||||
}
|
||||
|
||||
//// Set font for forms
|
||||
//label, input, button, select, textarea {
|
||||
// @include font-shorthand($baseFontSize, normal, $baseLineHeight); // Set size, weight, line-height here
|
||||
//}
|
||||
//input, button, select, textarea {
|
||||
// font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
|
||||
//}
|
||||
|
||||
// Identify controls by their labels
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
// Form controls
|
||||
// -------------------------
|
||||
|
||||
// Shared size and type resets
|
||||
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
|
||||
input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"],
|
||||
input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
|
||||
display: inline-block;
|
||||
height: $baseLineHeight;
|
||||
padding: 4px;
|
||||
margin-bottom: 9px;
|
||||
font-size: $baseFontSize;
|
||||
line-height: $baseLineHeight;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
// Reset appearance properties for textual inputs and textarea
|
||||
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
|
||||
input, textarea {
|
||||
width: 210px;
|
||||
}
|
||||
// Reset height since textareas have rows
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Position radios and checkboxes better
|
||||
input[type="radio"], input[type="checkbox"] {
|
||||
margin: 3px 0;
|
||||
*margin-top: 0; /* IE7 */
|
||||
line-height: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Reset width of input buttons, radios, checkboxes
|
||||
input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] {
|
||||
width: auto; // Override of generic input selector
|
||||
}
|
||||
|
||||
.webkit & input[type="search"] {
|
||||
-webkit-appearance: none;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
|
||||
// Make uneditable textareas behave like a textarea
|
||||
.uneditable-textarea {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Set the height of select and file controls to match text inputs
|
||||
select, input[type="file"] {
|
||||
height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
|
||||
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
// Make select elements obey height by applying a border
|
||||
select {
|
||||
width: 220px; // default input width + 10px of padding that doesn't get applied
|
||||
border: 1px solid #bbb;
|
||||
}
|
||||
select.date-select {
|
||||
width: auto;
|
||||
float: left;
|
||||
margin: 0 3px 0 0;
|
||||
}
|
||||
|
||||
// Make multiple select elements height not fixed
|
||||
select[multiple], select[size] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Focus for select, file, radio, and checkbox
|
||||
select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
|
||||
@include tab-focus();
|
||||
}
|
||||
|
||||
|
||||
|
||||
// CHECKBOXES & RADIOS
|
||||
// -------------------
|
||||
|
||||
// Indent the labels to position radios/checkboxes as hanging
|
||||
.radio, .checkbox {
|
||||
min-height: 18px; // clear the floating input if there is no label text
|
||||
padding-left: 18px;
|
||||
}
|
||||
.radio input[type="radio"], .checkbox input[type="checkbox"] {
|
||||
float: left;
|
||||
margin-left: -18px;
|
||||
}
|
||||
|
||||
// Move the options list down to align with labels
|
||||
.controls > .radio:first-child, .controls > .checkbox:first-child {
|
||||
padding-top: 5px; // has to be padding because margin collaspes
|
||||
}
|
||||
|
||||
// Radios and checkboxes on same line
|
||||
// TODO v3: Convert .inline to .control-inline
|
||||
.radio.inline, .checkbox.inline {
|
||||
display: inline-block;
|
||||
padding-top: 5px;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline {
|
||||
margin-left: 10px; // space out consecutive inline controls
|
||||
}
|
||||
|
||||
|
||||
|
||||
// INPUT SIZES
|
||||
// -----------
|
||||
|
||||
// General classes for quick sizes
|
||||
.input-mini { width: 60px; }
|
||||
.input-small { width: 90px; }
|
||||
.input-medium { width: 150px; }
|
||||
.input-large { width: 210px; }
|
||||
.input-xlarge { width: 270px; }
|
||||
.input-xxlarge { width: 530px; }
|
||||
|
||||
// Grid style input sizes
|
||||
input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input[class*="span"],
|
||||
// Redeclare since the fluid row class is more specific
|
||||
.row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"], .row-fluid .uneditable-input[class*="span"] {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
// Ensure input-prepend/append never wraps
|
||||
.input-append input[class*="span"], .input-append .uneditable-input[class*="span"], .input-prepend input[class*="span"],
|
||||
.input-prepend .uneditable-input[class*="span"], .row-fluid .input-prepend [class*="span"], .row-fluid .input-append [class*="span"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// GRID SIZING FOR INPUTS
|
||||
// ----------------------
|
||||
|
||||
@include gridInput($gridColumnWidth, $gridGutterWidth);
|
||||
|
||||
|
||||
|
||||
// DISABLED STATE
|
||||
// --------------
|
||||
|
||||
// Disabled and read-only inputs
|
||||
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
|
||||
cursor: not-allowed;
|
||||
background-color: $inputDisabledBackground;
|
||||
border-color: #ddd;
|
||||
}
|
||||
// Explicitly reset the colors here
|
||||
input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// FORM FIELD FEEDBACK STATES
|
||||
// --------------------------
|
||||
|
||||
// Warning
|
||||
.control-group.warning {
|
||||
@include formFieldState($warningText, $warningText, $warningBackground);
|
||||
}
|
||||
// Error
|
||||
.control-group.error {
|
||||
@include formFieldState($errorText, $errorText, $errorBackground);
|
||||
}
|
||||
// Success
|
||||
.control-group.success {
|
||||
@include formFieldState($successText, $successText, $successBackground);
|
||||
}
|
||||
|
||||
// HTML5 invalid states
|
||||
// Shares styles with the .control-group.error above
|
||||
input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
|
||||
color: #b94a48;
|
||||
border-color: #ee5f5b;
|
||||
&:focus {
|
||||
border-color: darken(#ee5f5b, 10%);
|
||||
@include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// FORM ACTIONS
|
||||
// ------------
|
||||
|
||||
.form-actions {
|
||||
padding: ($baseLineHeight - 1) 20px $baseLineHeight;
|
||||
margin-top: $baseLineHeight;
|
||||
margin-bottom: $baseLineHeight;
|
||||
background-color: $formActionsBackground;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
@include clearfix(); // Adding clearfix to allow for .pull-right button containers
|
||||
}
|
||||
|
||||
// For text that needs to appear as an input but should not be an input
|
||||
.uneditable-input {
|
||||
overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
|
||||
white-space: nowrap;
|
||||
cursor: not-allowed;
|
||||
background-color: $inputBackground;
|
||||
border-color: #eee;
|
||||
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
|
||||
}
|
||||
|
||||
// Placeholder text gets special styles; can't be bundled together though for some reason
|
||||
// (sass-edit) - need special mixin
|
||||
//@include rootPlaceholder();
|
||||
|
||||
|
||||
|
||||
// HELP TEXT
|
||||
// ---------
|
||||
|
||||
.help-block, .help-inline {
|
||||
color: $gray; // lighten the text some for contrast
|
||||
}
|
||||
|
||||
.help-block {
|
||||
display: block; // account for any element using help-block
|
||||
margin-bottom: $baseLineHeight / 2;
|
||||
}
|
||||
|
||||
.help-inline {
|
||||
display: inline-block;
|
||||
@include ie7-inline-block();
|
||||
vertical-align: middle;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// INPUT GROUPS
|
||||
// ------------
|
||||
|
||||
// Allow us to put symbols and text within the input field for a cleaner look
|
||||
.input-prepend, .input-append {
|
||||
margin-bottom: 5px;
|
||||
input, select, .uneditable-input {
|
||||
position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
|
||||
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
|
||||
*margin-left: 0;
|
||||
vertical-align: middle;
|
||||
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
||||
// Make input on top when focused so blue border and shadow always show
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
.uneditable-input {
|
||||
border-left-color: #ccc;
|
||||
}
|
||||
.add-on {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: $baseLineHeight;
|
||||
min-width: 16px;
|
||||
padding: 4px 5px;
|
||||
font-weight: normal;
|
||||
line-height: $baseLineHeight;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 $white;
|
||||
vertical-align: middle;
|
||||
background-color: $grayLighter;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.add-on, .btn {
|
||||
margin-left: -1px;
|
||||
@include border-radius(0);
|
||||
}
|
||||
.active {
|
||||
background-color: lighten($green, 30);
|
||||
border-color: $green;
|
||||
}
|
||||
}
|
||||
.input-prepend {
|
||||
.add-on, .btn {
|
||||
margin-right: -1px;
|
||||
}
|
||||
.add-on:first-child, .btn:first-child {
|
||||
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
||||
}
|
||||
}
|
||||
.input-append {
|
||||
input, select, .uneditable-input {
|
||||
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
||||
}
|
||||
.uneditable-input {
|
||||
border-right-color: #ccc;
|
||||
border-left-color: #eee;
|
||||
}
|
||||
.add-on:last-child, .btn:last-child {
|
||||
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
||||
}
|
||||
}
|
||||
// Remove all border-radius for inputs with both prepend and append
|
||||
.input-prepend.input-append {
|
||||
input, select, .uneditable-input {
|
||||
@include border-radius(0);
|
||||
}
|
||||
.add-on:first-child, .btn:first-child {
|
||||
margin-right: -1px;
|
||||
@include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
|
||||
}
|
||||
.add-on:last-child, .btn:last-child {
|
||||
margin-left: -1px;
|
||||
@include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// SEARCH FORM
|
||||
// -----------
|
||||
|
||||
.search-query {
|
||||
padding-right: 14px;
|
||||
padding-right: 4px \9;
|
||||
padding-left: 14px;
|
||||
padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
|
||||
margin-bottom: 0; // remove the default margin on all inputs
|
||||
@include border-radius(14px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// HORIZONTAL & VERTICAL FORMS
|
||||
// ---------------------------
|
||||
|
||||
// Common properties
|
||||
// -----------------
|
||||
|
||||
.form-search, .form-inline, .form-horizontal {
|
||||
|
||||
input,
|
||||
input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
|
||||
input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"],
|
||||
input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"],
|
||||
textarea, select, .help-inline, .uneditable-input, .input-prepend, .input-append {
|
||||
display: inline-block;
|
||||
@include ie7-inline-block();
|
||||
margin-bottom: 0;
|
||||
}
|
||||
// Re-hide hidden elements due to specifity
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.form-search label, .form-inline label {
|
||||
display: inline-block;
|
||||
}
|
||||
// Remove margin for input-prepend/-append
|
||||
.form-search .input-append, .form-inline .input-append, .form-search .input-prepend, .form-inline .input-prepend {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
// Inline checkbox/radio labels (remove padding on left)
|
||||
.form-search .radio, .form-search .checkbox, .form-inline .radio, .form-inline .checkbox {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
// Remove float and margin, set to inline-block
|
||||
.form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"],
|
||||
.form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] {
|
||||
float: left;
|
||||
margin-right: 3px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
// Margin to space out fieldsets
|
||||
.control-group {
|
||||
margin-bottom: $baseLineHeight / 2;
|
||||
}
|
||||
|
||||
// Legend collapses margin, so next element is responsible for spacing
|
||||
legend + .control-group {
|
||||
margin-top: $baseLineHeight;
|
||||
-webkit-margin-top-collapse: separate;
|
||||
}
|
||||
|
||||
// Horizontal-specific styles
|
||||
// --------------------------
|
||||
|
||||
.form-horizontal {
|
||||
// Increase spacing between groups
|
||||
.control-group {
|
||||
margin-bottom: $baseLineHeight;
|
||||
@include clearfix();
|
||||
}
|
||||
// Float the labels left
|
||||
.control-label {
|
||||
float: left;
|
||||
width: 140px;
|
||||
padding-top: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
// Move over all input controls and content
|
||||
.controls {
|
||||
// Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
|
||||
// don't inherit the margin of the parent, in this case .controls
|
||||
*display: inline-block;
|
||||
*padding-left: 20px;
|
||||
margin-left: 160px;
|
||||
*margin-left: 0;
|
||||
&:first-child {
|
||||
*padding-left: 160px;
|
||||
}
|
||||
}
|
||||
// Remove bottom margin on block level help text since that's accounted for on .control-group
|
||||
.help-block {
|
||||
margin-top: $baseLineHeight / 2;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// moving .form-actions out of .form-horizontal scope, so the right-aligned buttons can be applied across the app
|
||||
.form-actions {
|
||||
text-align: right;
|
||||
padding: 10px 10px 11px;
|
||||
}
|
||||
|
||||
// when .form-actions is in a modal box, make it look different per Kyle mockup
|
||||
.ui-dialog-content .form-actions {
|
||||
margin-bottom: 0;
|
||||
box-shadow: inset 0 1px 0 #fff;
|
||||
}
|
||||
|
|
@ -1,27 +1,88 @@
|
|||
//add variable modifications to the global _variables.sass
|
||||
//they will override bootstrap styles
|
||||
@import 'environment';
|
||||
|
||||
// CSS Reset
|
||||
@import "bootstrap/reset";
|
||||
|
||||
// Grid system and page structure
|
||||
@include gridFluid($fluidGridColumnWidth, $fluidGridGutterWidth);
|
||||
@import "bootstrap/scaffolding";
|
||||
@import "bootstrap/grid";
|
||||
@import "bootstrap/layouts";
|
||||
|
||||
// Base CSS
|
||||
@import "forms";
|
||||
@import "bootstrap/type";
|
||||
@import "bootstrap/code";
|
||||
@import "bootstrap/forms";
|
||||
@import "bootstrap/tables";
|
||||
|
||||
|
||||
// Components: common
|
||||
@import "bootstrap/close";
|
||||
//@import "bootstrap/sprites"; //we do our own icons
|
||||
@import "bootstrap/dropdowns";
|
||||
@import "bootstrap/wells";
|
||||
@import "bootstrap/component-animations";
|
||||
@import "bootstrap/close";
|
||||
|
||||
|
||||
// Components: Buttons & Alerts
|
||||
@import "bootstrap/alerts"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
|
||||
@import "bootstrap/buttons";
|
||||
//@import "bootstrap/button-groups"; //use jquerUI buttonsets
|
||||
@import "bootstrap/alerts";
|
||||
|
||||
// Components: Nav
|
||||
@import "bootstrap/navs"; // look at nav links on styleguide and on dashboard
|
||||
@import "bootstrap/navs";
|
||||
//these are just commented out because we dont use them yet, if you want them just uncomment.
|
||||
//@import "bootstrap/navbar";
|
||||
//@import "bootstrap/breadcrumbs";
|
||||
//@import "bootstrap/pagination";
|
||||
//@import "bootstrap/pager";
|
||||
|
||||
// Components: Popovers
|
||||
//@import "bootstrap/tooltip"; //want
|
||||
//@import "bootstrap/modals"; // use jqueryUI instead
|
||||
//@import "bootstrap/tooltip"; // we do our own
|
||||
@import "popovers";
|
||||
|
||||
|
||||
// Components: Misc
|
||||
@import "bootstrap/thumbnails";
|
||||
@import "bootstrap/labels-badges";
|
||||
//@import "bootstrap/progress-bars"; // use jqueryUI instead
|
||||
//@import "bootstrap/accordion"; // use jqueryUI instead
|
||||
//these are just commented out because we dont use them yet, if you want them just uncomment.
|
||||
//@import "bootstrap/carousel";
|
||||
//@import "bootstrap/hero-unit";
|
||||
|
||||
// Utility classes
|
||||
@import "bootstrap/utilities"; // Has to be last to override when necessary
|
||||
|
||||
|
||||
// RESPONSIVE CLASSES
|
||||
// ------------------
|
||||
@import "bootstrap/responsive-utilities";
|
||||
|
||||
|
||||
// MEDIA QUERIES
|
||||
// ------------------
|
||||
|
||||
// Large desktops
|
||||
@import "bootstrap/responsive-1200px-min";
|
||||
|
||||
// Tablets to regular desktops
|
||||
@import "bootstrap/responsive-768px-979px";
|
||||
|
||||
// I am enabling this for now to see how it goes, this might cause more problems then it helps
|
||||
// so we might want to turn this off. If we do, we also need to remove the part about it in
|
||||
// _overrides.scss -RS
|
||||
// Phones to portrait tablets and narrow desktops
|
||||
@import "bootstrap/responsive-767px-max";
|
||||
|
||||
|
||||
// RESPONSIVE NAVBAR
|
||||
// ------------------
|
||||
|
||||
|
||||
// From 979px and below, show a button to toggle navbar contents
|
||||
//@import "bootstrap/responsive-navbar"; //Uncomment if you want to use a responsive navbar
|
||||
|
||||
|
||||
@import "overrides";
|
||||
|
|
|
|||
|
|
@ -1,11 +1,118 @@
|
|||
// Instructure's bootstrap mods:
|
||||
|
||||
body {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
// make links in .alert be same color as alert text but bold
|
||||
.alert a {
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.nav-tabs.nav-stacked {
|
||||
background: $lightBackground;
|
||||
}
|
||||
// have to make labels inline-block by default,
|
||||
// boostrap makes them all block but we have a ton of
|
||||
// existing forms that count on them being inline.
|
||||
label { display: inline-block; }
|
||||
|
||||
// if you are making a bootstrap style form and need to get your labels to look right (be block),
|
||||
// add the class .bootstrap-form to the <form>. this is the only need for .bootstrap-form, you
|
||||
// dont need to add the .bootstrap-form class if you already have the .form-horizontal class.
|
||||
.form-horizontal label, .bootstrap-form label { display: block;}
|
||||
|
||||
//remove default bottom margin on a bootstrap form
|
||||
.bootstrap-form.no-margin {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
//get rid of bottom margin on any element (needed mostly for text inputs)
|
||||
.no-margin-bottom {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
//bootstrap makes all <select>s a certain width. provide a class to enable one to be auto width
|
||||
select.un-bootrstrapify {
|
||||
width: auto;
|
||||
border-radius: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
text-align: right;
|
||||
padding: 10px 10px 11px;
|
||||
|
||||
// when .form-actions is in a modal box, make it look different per Kyle mockup
|
||||
.ui-dialog-content & {
|
||||
margin-bottom: 0;
|
||||
box-shadow: inset 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
// when you want your non-modal .form-actions footer to not have any whitespace around it
|
||||
&.flush {
|
||||
margin-bottom: -1em;
|
||||
margin-left: -1em;
|
||||
margin-right: -1em;
|
||||
}
|
||||
}
|
||||
|
||||
// for checkboxes not wrapped in a label.checkbox, make them look decent,
|
||||
// should remove this eventually.
|
||||
input[type=checkbox] + label,
|
||||
input[type=radio] + label {
|
||||
vertical-align: -4px;
|
||||
}
|
||||
|
||||
// all the browsers render this differently, remove line-height so the text doesn't
|
||||
// get ridiculously misaligned.
|
||||
input[type=file] {
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
// modify the default bootstrap .table class to have the thead look like our .toolbars
|
||||
.table > thead {
|
||||
@include header-bg;
|
||||
@include header-text;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
// "bootstrap/responsive-767px-max" expects that the main content of the page will be from
|
||||
// edge to edge, we still have a left and right nav, so need to undo the padding it adds
|
||||
body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// if you have a page where the stuff in the #right-side is not needed or relevant on a mobile device,
|
||||
// you can do: '@body_classes << "right-side-optional"' to hide the #right-side on on small screens.
|
||||
// If there is something on the #right-side that is still useful on a small screen but you want to
|
||||
// get rid of the #right-side to make it easier to focus on the #content, copy it to the main page
|
||||
// and give it the class '.visible-phone'
|
||||
.right-side-optional {
|
||||
min-width: auto !important;
|
||||
#right-side-wrapper { display: none !important }
|
||||
#main { margin-right: 0 !important }
|
||||
}
|
||||
}
|
||||
|
||||
// gets rid of ugly border
|
||||
iframe#tool_content {
|
||||
border: none;
|
||||
}
|
||||
|
||||
// "ui.dialog you are so dumb. you are really dumb, for real"
|
||||
// ui.dialog cancels input events for any positioned element w/ a lower
|
||||
// z-index, even if the element is inside the dialog (in which case the
|
||||
// z-index is not actually lower. so dumb)
|
||||
.ui-dialog {
|
||||
.input-append, .input-prepend {
|
||||
input, select, .uneditable-input {
|
||||
&:focus {
|
||||
z-index: 1001;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// fixes bug in Cal1 where not-allowed cursor appears over checkboxes set to readonly
|
||||
.calendar_links input[readonly] { cursor: auto; }
|
||||
|
||||
|
|
|
|||
|
|
@ -1,71 +1,147 @@
|
|||
// Based on Twitter Bootstrap styles 2.1 but adapted to work on a jQueryUI tooltip
|
||||
// Based on stock bootstrap 2.2 styles but adapted to work on a jQueryUI tooltip
|
||||
//
|
||||
// POPOVERS
|
||||
// --------
|
||||
// Popovers
|
||||
// --------------------------------------------------
|
||||
|
||||
// Greater specificity on selection to help override default tooltip styles.
|
||||
.popover.ui-widget.ui-tooltip {
|
||||
text-align: left;
|
||||
z-index: $zindexPopover;
|
||||
display: none;
|
||||
.popover.ui-widget.ui-tooltip,
|
||||
.popover {
|
||||
position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// z-index: $zindexPopover;
|
||||
// display: none;
|
||||
// width: 236px;
|
||||
padding: 1px;
|
||||
background-color: $white;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
|
||||
background-clip: padding-box;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 6px;
|
||||
background-color: $popoverBackground;
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0,0,0,.2);
|
||||
@include border-radius($borderRadiusLarge);
|
||||
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
|
||||
|
||||
//attributes not part of bootstrap stylesheet that were added by us
|
||||
min-width: 280px;
|
||||
@include opacity(1);
|
||||
color: $grayDark; // override .ui-tooltip's white text color
|
||||
text-align: left; // override .ui-tooltip's text-align:center
|
||||
min-height: 90px; // keep arrow/carat from mixing with title
|
||||
font-size: $baseFontSize;
|
||||
}
|
||||
|
||||
.popover-title {
|
||||
margin: 0; // reset heading margin
|
||||
padding: 8px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
min-height: 90px; // keep arrow/carat from mixing with title
|
||||
@include opacity(1);
|
||||
min-width: 280px;
|
||||
color: #333;
|
||||
&.left { margin-left: 10px; }
|
||||
background-color: $popoverTitleBackground;
|
||||
border-bottom: 1px solid darken($popoverTitleBackground, 5%);
|
||||
@include border-radius(5px 5px 0 0);
|
||||
}
|
||||
|
||||
.arrow,
|
||||
.arrow:after {
|
||||
.popover-content {
|
||||
padding: 9px 14px;
|
||||
p, ul, ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$popoverArrowDistanceFromCorner: $popoverArrowOuterWidth;
|
||||
.popover {
|
||||
&:before, &:after {
|
||||
border-color: transparent transparent $popoverArrowOuterColor transparent;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
.arrow:after {
|
||||
z-index: -1;
|
||||
border-style:solid;
|
||||
border-width: $popoverArrowOuterWidth;
|
||||
width:0;
|
||||
height:0;
|
||||
content: "";
|
||||
top: -$popoverArrowOuterWidth * 2;
|
||||
left: $popoverArrowDistanceFromCorner;
|
||||
}
|
||||
&.left .arrow {
|
||||
&:after {
|
||||
border-bottom-color: $popoverTitleBackground;
|
||||
border-width: $popoverArrowWidth;
|
||||
top: -$popoverArrowWidth * 2;
|
||||
left: $popoverArrowDistanceFromCorner + 1;
|
||||
}
|
||||
&.right:before {
|
||||
left: auto;
|
||||
right: $popoverArrowDistanceFromCorner;
|
||||
}
|
||||
&.right:after {
|
||||
left: auto;
|
||||
right: $popoverArrowDistanceFromCorner + 1;
|
||||
}
|
||||
&.bottom:before {
|
||||
border-color: $popoverArrowOuterColor transparent transparent transparent;
|
||||
top: auto;
|
||||
bottom: -$popoverArrowOuterWidth * 2;
|
||||
}
|
||||
&.bottom:after {
|
||||
border-color: $popoverArrowColor transparent transparent transparent;
|
||||
top: auto;
|
||||
bottom: -$popoverArrowWidth * 2;
|
||||
}
|
||||
&.center:before {
|
||||
left: 50%;
|
||||
margin-left: -$popoverArrowOuterWidth;
|
||||
right: auto;
|
||||
}
|
||||
&.center:after {
|
||||
left: 50%;
|
||||
margin-left: -$popoverArrowWidth;
|
||||
right: auto;
|
||||
}
|
||||
&.middle:before {
|
||||
top: 50%;
|
||||
left: -10px;
|
||||
margin-top: -10px;
|
||||
border-right-color: $white;
|
||||
border-width: 10px 10px 10px 0;
|
||||
margin-top: -$popoverArrowOuterWidth;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
&.left .arrow:after {
|
||||
bottom: -11px;
|
||||
left: -1px;
|
||||
border-right-color: rgba(0, 0, 0, 0.25);
|
||||
border-width: 11px 11px 11px 0;
|
||||
&.middle:after {
|
||||
top: 50%;
|
||||
margin-top: -$popoverArrowWidth;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.popover-title {
|
||||
font-size: 18px;
|
||||
padding: 8px 14px;
|
||||
line-height: 1;
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: 1px solid #EBEBEB;
|
||||
border-radius: 5px 5px 0 0;
|
||||
&.horizontal:before {
|
||||
top: 50%;
|
||||
margin-top: -$popoverArrowOuterWidth;
|
||||
bottom: auto;
|
||||
left: -$popoverArrowOuterWidth * 2;
|
||||
right: auto;
|
||||
border-color: transparent $popoverArrowOuterColor transparent transparent;
|
||||
}
|
||||
.popover-content {
|
||||
padding: 14px;
|
||||
background-color: $white;
|
||||
border-radius: 0 0 5px 5px;
|
||||
@include background-clip(padding-box);
|
||||
p, ul, ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.horizontal:after {
|
||||
top: 50%;
|
||||
margin-top: -$popoverArrowWidth;
|
||||
bottom: auto;
|
||||
left: -$popoverArrowWidth * 2;
|
||||
right: auto;
|
||||
border-color: transparent $popoverArrowColor transparent transparent;
|
||||
}
|
||||
}
|
||||
&.right.horizontal:before {
|
||||
left: auto;
|
||||
right: -$popoverArrowOuterWidth * 2;
|
||||
border-color: transparent transparent transparent $popoverArrowOuterColor;
|
||||
}
|
||||
&.right.horizontal:after {
|
||||
left: auto;
|
||||
right: -$popoverArrowWidth * 2;
|
||||
border-color: transparent transparent transparent $popoverArrowColor;
|
||||
}
|
||||
&.bottom.horizontal:before {
|
||||
top: auto;
|
||||
bottom: $popoverArrowDistanceFromCorner;
|
||||
}
|
||||
&.bottom.horizontal:after {
|
||||
top: auto;
|
||||
bottom: $popoverArrowDistanceFromCorner + 1;
|
||||
}
|
||||
&.top.horizontal:before {
|
||||
top: $popoverArrowDistanceFromCorner;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,6 @@
|
|||
@import environment.sass
|
||||
|
||||
#editCalendarEventFull
|
||||
[name="description"]
|
||||
width: 100%
|
||||
min-height: 200px
|
||||
[name="title"]
|
||||
width: 100%
|
||||
font-size: 21px
|
||||
|
||||
.date_start_end_row
|
||||
+clearfix
|
||||
th, td
|
||||
|
|
|
|||
|
|
@ -9,11 +9,15 @@
|
|||
|
||||
.scheduler-content
|
||||
padding: 1em
|
||||
background-color: $main_background_color
|
||||
background-color: $bodyBackground
|
||||
border: 1px solid $listBorderColor
|
||||
.scheduler-header
|
||||
min-height: 27px
|
||||
margin-bottom: 10px
|
||||
|
||||
.scheduler-wrapper
|
||||
/* extra padding stops final dropdown from getting cut off */
|
||||
padding-bottom: 25px
|
||||
|
||||
/* the 'button' part is to beat g_util_button's specificity */
|
||||
button.single_item_done_button
|
||||
|
|
@ -63,6 +67,7 @@ button.single_item_done_button
|
|||
max-height: 150px
|
||||
overflow-x: hidden
|
||||
margin-bottom: 10px
|
||||
padding-top: 10px
|
||||
|
||||
.time-block-list-header, .time-block-list-body-wrapper
|
||||
width: 100%
|
||||
|
|
@ -96,7 +101,7 @@ button.single_item_done_button
|
|||
.date_field
|
||||
width: $date_column_width - 5 - 20
|
||||
.time_field
|
||||
width: $time_column_width - 10
|
||||
width: $time_column_width - 30
|
||||
|
||||
.error
|
||||
border: 1px solid #EE5F5B
|
||||
|
|
@ -161,11 +166,9 @@ button.single_item_done_button
|
|||
.ag_contexts_done
|
||||
float: right
|
||||
|
||||
.hidden
|
||||
display: none
|
||||
|
||||
.delete-block-link
|
||||
+accessible_text_replacement
|
||||
+hide-text
|
||||
display: block
|
||||
float: right
|
||||
background: url(/images/jqueryui/icon_sprite.png) 0px -16px no-repeat
|
||||
|
|
|
|||
|
|
@ -53,8 +53,10 @@
|
|||
cursor: pointer
|
||||
line-height: 22px
|
||||
position: relative
|
||||
&:hover
|
||||
background: #b5b5b5
|
||||
|
||||
.checkbox
|
||||
.context-list-toggle-box
|
||||
width: 11px
|
||||
height: 11px
|
||||
margin: 5px 11px 0 15px
|
||||
|
|
@ -63,18 +65,12 @@
|
|||
|
||||
.not-checked
|
||||
color: #888
|
||||
.checkbox
|
||||
.context-list-toggle-box
|
||||
border-color: #bbbbbb !important
|
||||
background-color: #e6e7e9 !important
|
||||
.settings
|
||||
visibility: hidden
|
||||
padding: 4px 0
|
||||
|
||||
.context-list-add
|
||||
position: absolute
|
||||
right: 5px
|
||||
.hovering .settings, .settings.ui-state-hover
|
||||
visibility: visible
|
||||
.hovering
|
||||
color: inherit
|
||||
background: #b5b5b5
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -91,8 +91,9 @@
|
|||
list-style-type: none
|
||||
float: right
|
||||
|
||||
.icon
|
||||
.icon, .al-trigger i
|
||||
color: $grayLight
|
||||
cursor: pointer
|
||||
|
||||
.context-module-toolbar-item
|
||||
float: right
|
||||
|
|
|
|||
|
|
@ -14,6 +14,14 @@ body
|
|||
.spinner
|
||||
width: 50px
|
||||
#actions
|
||||
/* start html5BP clearfix (because Canvas' .clearfix hides the dropdown)
|
||||
*zoom: 1
|
||||
&:before, &:after
|
||||
display: table
|
||||
content: ""
|
||||
&:after
|
||||
clear: both
|
||||
/* end clearfix */
|
||||
min-height: 42px
|
||||
background: #dddde1 url(/images/messages/actions-bg.png) 0 0 repeat-x
|
||||
border-top: 1px solid #eaeaec
|
||||
|
|
@ -502,6 +510,8 @@ ul.messages, ul.messages.private, ul.messages.private li:hover
|
|||
position: absolute
|
||||
right: 9999px
|
||||
top: 5px
|
||||
min-width: 50px
|
||||
text-align: right
|
||||
> a
|
||||
display: block
|
||||
background: transparent url(/images/messages/actions-dd-sprite.png) 0 0 no-repeat
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
@import environment.sass
|
||||
@import 'utilities/context_search'
|
||||
|
||||
#course_form .course_form
|
||||
#course_form .course_form
|
||||
display: none
|
||||
|
||||
#course_form.editing
|
||||
.course_form
|
||||
#course_form.editing
|
||||
.course_form
|
||||
display: inline
|
||||
.course_info, .edit_course_link, .move_course_link
|
||||
display: none
|
||||
|
||||
|
||||
#course_form .date_entry
|
||||
#course_form .date_entry
|
||||
width: 100px
|
||||
|
||||
.users-wrapper
|
||||
|
|
@ -23,6 +23,7 @@
|
|||
padding: 8px
|
||||
background-color: #F7F7F7
|
||||
border-bottom: 1px solid #CCC
|
||||
line-height: 1em
|
||||
|
||||
.pagination-loading
|
||||
padding: 8px
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
background-color: #06A9EE
|
||||
color: white
|
||||
|
||||
ul.user_list
|
||||
ul.user_list
|
||||
list-style: none
|
||||
padding: 0px
|
||||
margin: 0
|
||||
|
|
@ -43,7 +44,7 @@ ul.user_list
|
|||
li.none
|
||||
padding: 8px
|
||||
|
||||
ul.user_list li.user
|
||||
ul.user_list li.user
|
||||
min-height: 30px
|
||||
padding-left: 10px
|
||||
color: #444
|
||||
|
|
@ -63,13 +64,13 @@ ul.user_list li.user
|
|||
display: block
|
||||
position: relative
|
||||
|
||||
ul.user_list li.user:hover
|
||||
ul.user_list li.user:hover
|
||||
background-color: $hover-color
|
||||
|
||||
ul.user_list li.user .email
|
||||
ul.user_list li.user .email
|
||||
font-size: 0.8em
|
||||
margin-left: 10px
|
||||
|
||||
|
||||
ul.user_list li.user .associated_user
|
||||
display: none
|
||||
font-size: 0.8em
|
||||
|
|
@ -77,11 +78,11 @@ ul.user_list li.user .associated_user
|
|||
ul.user_list li.user.observer_enrollment .associated_user
|
||||
display: block
|
||||
|
||||
ul.user_list li.user .section
|
||||
ul.user_list li.user .section
|
||||
font-size: 0.8em
|
||||
margin-left: 10px
|
||||
|
||||
ul.user_list li.user .short_name
|
||||
ul.user_list li.user .short_name
|
||||
font-size: 0.8em
|
||||
margin-left: 10px
|
||||
margin-top: 2px
|
||||
|
|
@ -89,20 +90,20 @@ ul.user_list li.user .short_name
|
|||
ul.user_list li.user .associated_user_name:hover
|
||||
text-decoration: underline
|
||||
|
||||
ul.user_list li.user .enrollment_type
|
||||
ul.user_list li.user .enrollment_type
|
||||
font-size: 0.8em
|
||||
margin: -2px 10px 0px
|
||||
|
||||
ul.user_list li.user .links
|
||||
ul.user_list li.user .links
|
||||
float: right
|
||||
padding-right: 20px
|
||||
padding-top: 5px
|
||||
visibility: hidden
|
||||
|
||||
ul.user_list li.user .links a
|
||||
ul.user_list li.user .links a
|
||||
text-decoration: none
|
||||
|
||||
ul.user_list li.user:hover .links
|
||||
ul.user_list li.user:hover .links
|
||||
float: right
|
||||
padding-right: 20px
|
||||
visibility: visible
|
||||
|
|
@ -111,10 +112,6 @@ ul.user_list div.enrollment_type.pending
|
|||
color: #888
|
||||
font-style: italic
|
||||
|
||||
h3 .tally
|
||||
font-family: arial,sans-serif
|
||||
font-size: 12px
|
||||
padding-left: 5px
|
||||
|
||||
.add-course-users
|
||||
border: 1px solid #CCC
|
||||
|
|
@ -135,34 +132,34 @@ h3 .tally
|
|||
height: auto
|
||||
width: 98%
|
||||
|
||||
#sections
|
||||
#sections
|
||||
+reset-list
|
||||
max-width: 500px
|
||||
list-style-type: none
|
||||
|
||||
#sections .section
|
||||
#sections .section
|
||||
padding: 3px 2px
|
||||
|
||||
#sections .section .delete_section_link,
|
||||
#sections .section .edit_section_link,
|
||||
#sections .section .delete_section_link,
|
||||
#sections .section .edit_section_link,
|
||||
#sections .section .cant_delete_section_link
|
||||
|
||||
float: right
|
||||
|
||||
#sections .section .section_link
|
||||
#sections .section .section_link
|
||||
+opacity(0.3)
|
||||
|
||||
#sections .section:hover
|
||||
#sections .section:hover
|
||||
background-color: #eee
|
||||
|
||||
#sections .section:hover .section_link
|
||||
#sections .section:hover .section_link
|
||||
+opacity(1)
|
||||
|
||||
#sections .section .users_count
|
||||
#sections .section .users_count
|
||||
font-size: 0.8em
|
||||
padding-left: 5px
|
||||
|
||||
#edit_section_form
|
||||
#edit_section_form
|
||||
float: left
|
||||
|
||||
.nav_list
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
padding: 10px 0 10px 10px
|
||||
cursor: pointer
|
||||
display: table
|
||||
+unselectable
|
||||
+user-select(none)
|
||||
&:hover
|
||||
background: $hover-color
|
||||
.toggle-details
|
||||
|
|
@ -110,7 +110,7 @@ $ignore-col-width: 50px
|
|||
text-decoration: none
|
||||
|
||||
.fake-link
|
||||
color: $link_color
|
||||
color: $linkColor
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
|
|
@ -132,3 +132,4 @@ $dashboardIconSize: 32px
|
|||
line-height: $dashboardIconSize
|
||||
&:before
|
||||
color: #ccc
|
||||
font-size: $dashboardIconSize
|
||||
|
|
|
|||
|
|
@ -14,10 +14,16 @@
|
|||
.row
|
||||
:position absolute
|
||||
|
||||
//overrides Bootstrap .row class
|
||||
:margin-left 0
|
||||
:overflow visible
|
||||
// end override
|
||||
|
||||
|
||||
.cell
|
||||
:float left
|
||||
border: solid #ccc
|
||||
:line-height 1.4
|
||||
|
||||
// adding this line, and commenting out the negative margins, makes it look better in the new UI, tell me if anything breaks. RS
|
||||
border-width: 0 1px 1px 0
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@import environment.sass
|
||||
|
||||
body.with-right-side.with-left-side
|
||||
// toolbar needs it to be this wide
|
||||
min-width: 1110px
|
||||
|
||||
.hidden
|
||||
display: none !important
|
||||
|
||||
|
|
@ -40,7 +44,7 @@
|
|||
.ellipsis
|
||||
padding-right: 70px
|
||||
|
||||
.showMore .new-and-total-badge
|
||||
.new-and-total-badge
|
||||
float: right
|
||||
margin-top: 10px
|
||||
|
||||
|
|
@ -191,7 +195,7 @@
|
|||
height: 0px
|
||||
width: 0px
|
||||
border-style: solid
|
||||
border-color: transparent transparent transparent $link_color
|
||||
border-color: transparent transparent transparent $linkColor
|
||||
border-width: 5px
|
||||
vertical-align: middle
|
||||
.new-and-total-badge
|
||||
|
|
@ -381,6 +385,15 @@
|
|||
.bootstrap-form
|
||||
margin: 0
|
||||
|
||||
.headerBar
|
||||
+clearfix()
|
||||
|
||||
.headerBar-left
|
||||
float: left
|
||||
|
||||
.headerBar-right
|
||||
float: right
|
||||
|
||||
#filterResults
|
||||
|
||||
.entry
|
||||
|
|
@ -400,24 +413,7 @@
|
|||
min-height: 50px
|
||||
|
||||
.al-trigger
|
||||
background-color: whitesmoke
|
||||
background-image: -moz-linear-gradient(top, white, #e6e6e6)
|
||||
background-image: -ms-linear-gradient(top, white, #e6e6e6)
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#e6e6e6))
|
||||
background-image: -webkit-linear-gradient(top, white, #e6e6e6)
|
||||
background-image: -o-linear-gradient(top, white, #e6e6e6)
|
||||
background-image: linear-gradient(top, #ffffff, #e6e6e6)
|
||||
border-color: #ccc
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)
|
||||
border-radius: 4px
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFE6E6E6', GradientType=0)
|
||||
margin-left: 4px
|
||||
+opacity(1)
|
||||
padding: 6px 10px
|
||||
|
||||
.btn
|
||||
margin-bottom: 5px
|
||||
|
||||
.headerBar
|
||||
padding: 10px 10px 6px 14px
|
||||
|
|
@ -434,7 +430,7 @@
|
|||
z-index: 3
|
||||
background: #fff
|
||||
height: 33px
|
||||
min-width: 484px
|
||||
min-width: 623px
|
||||
border-color: $menu-border-color
|
||||
|
||||
[disabled]
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
// Since you've installed the xml file, you should set
|
||||
// $use-mozilla-ellipsis-binding to true before importing.
|
||||
$use-mozilla-ellipsis-binding: true;
|
||||
|
||||
@import "compass/typography/text/ellipsis";
|
||||
|
||||
// You can delete this sass file if you want, it's just an example of how to use the ellipsis mixin.
|
||||
// By default, ellipsis text is no-wrap. Pass false as the first argument if you don't want that.
|
||||
.ellipsis {
|
||||
@include ellipsis; }
|
||||
|
|
@ -56,6 +56,7 @@ ul.instTree li.leaf
|
|||
|
||||
.content_panel .header
|
||||
float: left
|
||||
margin: 0
|
||||
|
||||
.content_panel .header .name, .content_panel .header .display_name
|
||||
font-size: 1.2em
|
||||
|
|
@ -190,6 +191,7 @@ ul.instTree li.leaf
|
|||
|
||||
.files_content .folder_item .header
|
||||
float: left
|
||||
margin-bottom: 0
|
||||
|
||||
.files_content .folder_item .header .sub_header
|
||||
font-size: 0.8em
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import "environment.sass";
|
||||
@import "blue/mixins";
|
||||
|
||||
#groups {
|
||||
|
||||
|
|
@ -35,14 +34,14 @@
|
|||
}
|
||||
|
||||
.group_header {
|
||||
@include clearfix;
|
||||
@include buttonBackground($listViewHeaderBackgroundLight, $listViewHeaderBackground, $gray);
|
||||
border-bottom: 1px solid $listBorderColor;
|
||||
font-weight: bold;
|
||||
padding: 4px 12px;
|
||||
|
||||
$shadow: inset 0 1px 0 rgba(white, 0.75);
|
||||
|
||||
@include bevelText;
|
||||
@include buttonBackground($listViewHeaderBackgroundLight, $listViewHeaderBackground);
|
||||
text-shadow: none;
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.assignment_list {
|
||||
|
|
@ -103,8 +102,11 @@
|
|||
.points_uneditable .points { display: none; }
|
||||
.points_uneditable .no_points { display: inline; }
|
||||
|
||||
button { margin-bottom: 4px; }
|
||||
label, select { font-size: 0.8em; }
|
||||
|
||||
.input-append {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -112,6 +114,8 @@
|
|||
.group_assignment {
|
||||
min-height: 40px;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
@include clearfix;
|
||||
padding-bottom: 3px;
|
||||
&.last {
|
||||
border-bottom-width: 0px;
|
||||
}
|
||||
|
|
@ -346,3 +350,7 @@
|
|||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
table.full_assignment_table {
|
||||
select { width: 140px !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
@import environment
|
||||
|
||||
@import base/native
|
||||
@import base/typography
|
||||
|
||||
// ----------section, (or #id) based stylesheets. (this forms the layout, or structure of the interface)
|
||||
@import base/layout
|
||||
@import base/#header
|
||||
@import base/#left-side
|
||||
@import base/#right-side
|
||||
|
||||
|
||||
// ----------utility (or .class) based stylesheets.
|
||||
@import bootstrap_parts/main
|
||||
@import jqueryui/jquery.ui.all
|
||||
@import base/unified_buttons
|
||||
@import blue/main
|
||||
|
||||
// @import utilities.sass
|
||||
// @import pagination.sass
|
||||
// @import buttons.sass
|
||||
// @import table.sass
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
@import "environment";
|
||||
|
||||
// ----------utility (or .class) based stylesheets.
|
||||
@import "jqueryui/jquery.ui.all"; // we might need to load bootstrap's reset first, then jqueryui, then the rest of bootstrap
|
||||
@import "bootstrap_parts/main";
|
||||
@import "utilities/main";
|
||||
|
||||
// ----------section, (or #id) based stylesheets.
|
||||
// (this forms the layout, or structure of the interface)
|
||||
@import "base/layout";
|
||||
@import "base/#header";
|
||||
@import "base/#left-side";
|
||||
@import "base/#right-side";
|
||||
|
||||
@import "base/print";
|
||||
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
.content-imports-wrapper
|
||||
#zip_file
|
||||
font-size: 1.3em
|
||||
|
||||
.content-imports-instructions
|
||||
margin: 20px 0
|
||||
a
|
||||
font-size: 1.2em
|
||||
|
|
@ -98,7 +98,8 @@ $context_module_bg_color: #f2f3f4
|
|||
float: right
|
||||
a.add-small
|
||||
line-height: normal
|
||||
div.footer
|
||||
div.footer
|
||||
+clearfix
|
||||
padding: 13px 10px 2px
|
||||
margin-left: 15px
|
||||
color: #666
|
||||
|
|
@ -305,12 +306,6 @@ $context_module_bg_color: #f2f3f4
|
|||
border: 1px dashed #888
|
||||
margin: 3px 0
|
||||
|
||||
#add_context_module_form
|
||||
.criterion
|
||||
padding: 2px 5px
|
||||
&:hover
|
||||
background-color: #eee
|
||||
|
||||
#student_progression_list
|
||||
.student
|
||||
margin-bottom: 10px
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
@import environment.sass
|
||||
@import turnitin.sass
|
||||
|
||||
// DO NOT ADD ANYTHING TO THIS FILE
|
||||
// there is certainly a better place to put whatever it is that you were thinking
|
||||
// about putting here. Ask the UX team if you need advice.
|
||||
//
|
||||
// In fact, you will get a cookie for anything that you safely remove from this.
|
||||
|
||||
#instructure_ajax_error_box
|
||||
:display none
|
||||
:position fixed
|
||||
|
|
@ -46,7 +52,10 @@
|
|||
position: absolute
|
||||
right: 10px
|
||||
top: 50%
|
||||
margin-top: -8px
|
||||
margin-top: -11px
|
||||
color: white
|
||||
&:before
|
||||
vertical-align: top
|
||||
i
|
||||
display: inline-block
|
||||
vertical-align: middle
|
||||
|
|
@ -178,7 +187,7 @@
|
|||
ul.item_list
|
||||
:margin-top 0
|
||||
:list-style-type none
|
||||
:padding-left 15px
|
||||
:margin-left 15px
|
||||
&.limit_height
|
||||
:max-height 150px
|
||||
:overflow auto
|
||||
|
|
@ -356,6 +365,8 @@
|
|||
|
||||
table.summary
|
||||
width: auto
|
||||
th
|
||||
text-align: left
|
||||
th, td
|
||||
padding: 2px 8px
|
||||
vertical-align: top
|
||||
|
|
@ -379,12 +390,14 @@ form table.formtable
|
|||
:margin 0
|
||||
:padding 0
|
||||
:width auto
|
||||
input[type='text'], input[type='password']
|
||||
width: 217px
|
||||
table.formtable td
|
||||
vertical-align: top
|
||||
padding: 2px 3px
|
||||
|
||||
// this is here to revert bootstrap's default style on checkboxes.
|
||||
input[type="radio"], input[type="checkbox"]
|
||||
margin-top: 0
|
||||
|
||||
.courses, .groups, .accounts
|
||||
.name
|
||||
font-size: 1.1em
|
||||
|
|
@ -427,96 +440,6 @@ span.hint
|
|||
:color #666
|
||||
:font-size 0.8em
|
||||
|
||||
// #sidebar .assignment
|
||||
th
|
||||
:background-color #333
|
||||
:text-align left
|
||||
:color #ccc
|
||||
:padding 0.1em 0.5em
|
||||
:font-size 1.2em
|
||||
|
||||
a
|
||||
:color #ccc
|
||||
:text-decoration none
|
||||
|
||||
td
|
||||
:background-color #ccc
|
||||
:padding 0.1em 0.5em
|
||||
:font-size 1.5em
|
||||
|
||||
&.load_pending
|
||||
:background-image url(/images/ajax-loader-ccc.gif)
|
||||
:background-repeat no-repeat
|
||||
:background-position top left
|
||||
|
||||
a
|
||||
:color #333
|
||||
|
||||
&.grade
|
||||
:width 80px
|
||||
:text-align center
|
||||
:font-weight bold
|
||||
:background-color #333
|
||||
:color #aaa
|
||||
:font-style italic
|
||||
:font-size 0.8em
|
||||
|
||||
.total
|
||||
:margin 0
|
||||
:padding 0
|
||||
|
||||
.grade
|
||||
:display block
|
||||
:line-height 1
|
||||
:margin 0
|
||||
:padding 0
|
||||
:margin-top 0.2em
|
||||
:font-size 20px
|
||||
:color #eee
|
||||
:font-style normal
|
||||
|
||||
&.date
|
||||
:width 80px
|
||||
:text-align center
|
||||
:font-weight bold
|
||||
:background-color #333
|
||||
:color #aaa
|
||||
:font-style italic
|
||||
:font-size 0.8em
|
||||
|
||||
.duedate
|
||||
:display block
|
||||
:line-height 1
|
||||
:margin 0
|
||||
:padding 0
|
||||
:margin-top 0.2em
|
||||
:font-size 20px
|
||||
:color #eee
|
||||
:font-style normal
|
||||
|
||||
&.name
|
||||
:font-size 1.0em
|
||||
:color #000
|
||||
|
||||
&.comments
|
||||
:font-size 0.8em
|
||||
:color #000
|
||||
|
||||
&.today
|
||||
:background-color #FBAD00
|
||||
:color #333
|
||||
|
||||
.duedate
|
||||
:background-color #FBAD00
|
||||
:color #333
|
||||
|
||||
.attachments
|
||||
:width 90px
|
||||
:padding 0
|
||||
:vertical-align middle
|
||||
:text-align center
|
||||
:background-color #999
|
||||
|
||||
.event_pending
|
||||
+opacity(0.4)
|
||||
|
||||
|
|
@ -625,6 +548,7 @@ ul.group_list
|
|||
:border-top 1px solid #888
|
||||
:padding 10px
|
||||
// :position relative
|
||||
@include clearfix
|
||||
box-shadow: 0 0 10px #333
|
||||
.links
|
||||
float: right
|
||||
|
|
@ -655,8 +579,9 @@ ul.group_list
|
|||
.wizard_options_list
|
||||
:list-style-type none
|
||||
:margin 0 10px 0 0
|
||||
:line-height 1.8em
|
||||
:padding-left 5px
|
||||
li
|
||||
line-height: 1.8em
|
||||
|
||||
.option
|
||||
:cursor pointer
|
||||
|
|
@ -1384,56 +1309,9 @@ body.padless-content #content,#content.padless
|
|||
.custom_search_results_link
|
||||
font-size: 1.2em
|
||||
|
||||
fieldset
|
||||
border: 1px solid #ccc
|
||||
+border-radius(3px)
|
||||
padding: 5px 10px
|
||||
margin-bottom: 5px
|
||||
legend
|
||||
font-weight: bold
|
||||
margin-left: 20px
|
||||
h2.h-margin-top,h3.h-margin-top
|
||||
margin-top: 20px
|
||||
|
||||
#license_help_dialog
|
||||
#licence-help-options
|
||||
th
|
||||
vertical-align: top
|
||||
white-space: nowrap
|
||||
.option
|
||||
display: block
|
||||
color: inherit
|
||||
text-decoration: none
|
||||
margin: 0 2px
|
||||
padding: 4px 2px
|
||||
border: 2px solid #444
|
||||
+border-radius(5px)
|
||||
&:hover
|
||||
background-color: #eee
|
||||
&.selected
|
||||
background-color: #c3decf
|
||||
img
|
||||
vertical-align: middle
|
||||
|
||||
.licenses
|
||||
margin-top: 10px
|
||||
.license
|
||||
float: left
|
||||
display: none
|
||||
font-size: 1.2em
|
||||
font-weight: bold
|
||||
img
|
||||
vertical-align: middle
|
||||
&.active
|
||||
display: block
|
||||
.select
|
||||
float: left
|
||||
margin-right: 10px
|
||||
#option-explanations td
|
||||
font-size: 0.8em
|
||||
padding: 5px 5px 0
|
||||
vertical-align: top
|
||||
|
||||
form.user_content_post_form
|
||||
display: none
|
||||
|
||||
|
|
|
|||
|
|
@ -1,79 +0,0 @@
|
|||
/* Resets default browser CSS.
|
||||
pulled from blueprint's css reset.
|
||||
Based on Eric Meyer's reset http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
|
||||
|
||||
html, body, div, span, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, code,
|
||||
del, dfn, em, img, q, dl, dt, dd,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, dialog, figure, footer, header,
|
||||
hgroup, nav, section
|
||||
padding: 0
|
||||
font-weight: inherit
|
||||
font-style: inherit
|
||||
font-size: 100%
|
||||
font-family: inherit
|
||||
vertical-align: baseline
|
||||
|
||||
// dont reset border for tables so tinyMCE can do it's thing
|
||||
// and dont reset margin so setting html align="center" works for tiny tables
|
||||
html, body, div, span, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, code,
|
||||
del, dfn, em, img, q, dl, dt, dd,
|
||||
fieldset, form, label, legend,
|
||||
article, aside, dialog, figure, footer, header,
|
||||
hgroup, nav, section
|
||||
border: 0
|
||||
margin: 0
|
||||
|
||||
// reset-html5
|
||||
article, aside, dialog, figure, footer, header,
|
||||
hgroup, nav, section
|
||||
display: block
|
||||
|
||||
|
||||
body
|
||||
line-height: 1.5
|
||||
|
||||
/* NOTE: table border-spacing is purposely not being reset because TinyMCE relies on
|
||||
it not being there. Once you set border-spacing: 0 in css, there is no way to do
|
||||
table.user_content {border-spacing:auto} (there is no 'auto' or 'default' value for
|
||||
border-spacing) and you cannot override it with the cellspacing html attribute
|
||||
(which is what tinyMCE uses). But we can, and do, reset border-collapse which makes
|
||||
it so we dont have to add cellspacing=0 to all our tables.
|
||||
see: http://stackoverflow.com/questions/339923/how-to-set-cellpadding-cellspacing-in-css */
|
||||
table
|
||||
border-collapse: collapse
|
||||
.user_content,.mceContentBody
|
||||
table
|
||||
border-collapse: separate
|
||||
|
||||
|
||||
caption, th, td
|
||||
text-align: left
|
||||
font-weight: normal
|
||||
table, td, th
|
||||
vertical-align: middle
|
||||
|
||||
/* Remove possible quote marks (") from <q>, <blockquote>. */
|
||||
blockquote:before, blockquote:after, q:before, q:after
|
||||
content: ""
|
||||
blockquote, q
|
||||
quotes: "" ""
|
||||
|
||||
/* Remove annoying border on linked images. */
|
||||
a img
|
||||
border: 0 none
|
||||
|
||||
// reset-list-style
|
||||
// ol, ul
|
||||
list-style: none
|
||||
|
||||
|
||||
|
||||
// this is a test, I want to see if it makes things look good
|
||||
img
|
||||
vertical-align: text-bottom
|
||||
|
|
@ -6,6 +6,12 @@
|
|||
.ignoring
|
||||
:display $igno
|
||||
|
||||
// unfortunately, we used the same class name as bootstrap's .container, need to reset it's effects
|
||||
@mixin revert_bootstrap_container
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
width: auto
|
||||
|
||||
table.rubric
|
||||
:margin-top 20px
|
||||
:border-collapse collapse
|
||||
|
|
@ -23,6 +29,7 @@ table.rubric
|
|||
// :max-width 150px
|
||||
|
||||
.container
|
||||
+revert_bootstrap_container
|
||||
:position relative
|
||||
:font-size 0.9em
|
||||
|
||||
|
|
@ -82,9 +89,8 @@ table.rubric
|
|||
:padding 2px 8px
|
||||
|
||||
.container
|
||||
+revert_bootstrap_container
|
||||
:padding 5px 0
|
||||
|
||||
.container
|
||||
:position relative
|
||||
|
||||
.links
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
:margin-bottom 10px
|
||||
|
||||
a:hover, a:focus, a:active
|
||||
color: $link_color
|
||||
color: $linkColor
|
||||
thead th
|
||||
:text-align left
|
||||
:background-color #444
|
||||
|
|
|
|||
|
|
@ -1,246 +0,0 @@
|
|||
@import environment.sass
|
||||
@import utilities/admin_links.scss
|
||||
|
||||
.clear
|
||||
:clear both
|
||||
:display block
|
||||
:margin 0
|
||||
:padding 0
|
||||
:height 0px
|
||||
:font-size 0px
|
||||
|
||||
// Clearing floats without extra markup (from blueprint)
|
||||
Based on How To Clear Floats Without Structural Markup by PiE
|
||||
[http://www.positioniseverything.net/easyclearing.html]
|
||||
.clearfix:after
|
||||
content: "\0020"
|
||||
display: block
|
||||
height: 0
|
||||
clear: both
|
||||
visibility: hidden
|
||||
overflow: hidden
|
||||
.clearfix
|
||||
display: block
|
||||
|
||||
|
||||
.ui-icon-inline
|
||||
display: inline
|
||||
padding-left: 16px
|
||||
|
||||
.accessible_hide
|
||||
:outline none
|
||||
:text-indent -9999px
|
||||
:display inline-block
|
||||
|
||||
.unstyled_list
|
||||
:margin 0
|
||||
:padding 0
|
||||
:list-style none
|
||||
&.wide_spacing
|
||||
:line-height 1.7em
|
||||
|
||||
//
|
||||
makes a counter for a new and a total count, like the one used on discussion topics,
|
||||
could also be used for inbox and other places.
|
||||
if the .new-items or .total-items is blank it will just not show up at all so you dont
|
||||
need a conditional to hide/show it
|
||||
|
||||
sample markup:
|
||||
|
||||
<div class="new-and-total-badge">
|
||||
<span class="new-items">3</span>
|
||||
<span class="total-items">10</span>
|
||||
</div>
|
||||
|
||||
you can combine it with tooltips like this:
|
||||
|
||||
<div class="new-and-total-badge">
|
||||
<span class="tooltip new-items">
|
||||
<span class="tooltip_wrap">
|
||||
<span class="tooltip_text">3 new messages</span>
|
||||
</span>
|
||||
3
|
||||
</span>
|
||||
<span class="tooltip total-items">
|
||||
<span class="tooltip_wrap">
|
||||
<span class="tooltip_text">
|
||||
15 messages in this thread
|
||||
</span>
|
||||
</span>
|
||||
15
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
$new-total-padding: 5px
|
||||
$new-total-border-radius: 3px
|
||||
.new-and-total-badge
|
||||
.new-items, .total-items
|
||||
color: white
|
||||
border-radius: $new-total-border-radius
|
||||
padding: 0 $new-total-padding
|
||||
font-weight: bold
|
||||
font-size: 11px
|
||||
float: left
|
||||
color: white
|
||||
.new-items
|
||||
background-color: $highlight-color
|
||||
margin-right: -$new-total-border-radius
|
||||
padding-right: $new-total-padding + $new-total-border-radius
|
||||
.total-items
|
||||
background-color: $diminutive-color
|
||||
|
||||
|
||||
//
|
||||
code to make tooltips.
|
||||
here is some sample html to use this:
|
||||
|
||||
<a href="#" class="tooltip">
|
||||
<span class="tooltip_wrap">
|
||||
<span class="tooltip_text">The tip</span>
|
||||
</span>
|
||||
the thing to put tip on
|
||||
</a>
|
||||
|
||||
.tooltip
|
||||
:position relative
|
||||
:z-index 2
|
||||
:outline none
|
||||
&:hover, &:active, &:focus
|
||||
:outline none
|
||||
:text-decoration none
|
||||
.tooltip_wrap, .tooltip_text
|
||||
:visibility visible
|
||||
.tooltip_wrap, .tooltip_text
|
||||
:display block
|
||||
:visibility hidden
|
||||
.tooltip_wrap
|
||||
:background url(/images/tooltip_carat.png) no-repeat left bottom
|
||||
:bottom 15px
|
||||
:padding-bottom 3px
|
||||
:position absolute
|
||||
+opacity(0.9)
|
||||
// ie puts the tooltips too low.
|
||||
.ie &
|
||||
:bottom 25px
|
||||
.tooltip_text
|
||||
:background-color #444
|
||||
:background-position left bottom
|
||||
:color #fff
|
||||
:left 0px
|
||||
:max-width 250px
|
||||
:padding 2px 7px 2px
|
||||
:white-space nowrap
|
||||
+border-radius(5px)
|
||||
font-weight: normal
|
||||
|
||||
.right
|
||||
:right 0px
|
||||
:background-position right bottom
|
||||
|
||||
// used for the zip_file_upload form
|
||||
.ui-dialog-no-close-button
|
||||
.ui-dialog-titlebar-close
|
||||
display: none
|
||||
|
||||
.six-checkbox
|
||||
background: url(/images/six_state_checkbox.png) no-repeat left top
|
||||
width: 20px
|
||||
height: 20px
|
||||
display: inline-block
|
||||
cursor: pointer
|
||||
vertical-align: bottom
|
||||
.six-checkbox-disabled-checked
|
||||
background-position: 0 -109px
|
||||
cursor: auto
|
||||
.six-checkbox-disabled-unchecked
|
||||
background-position: 0 -162px
|
||||
cursor: auto
|
||||
.six-checkbox-default-checked
|
||||
background-position: 0 -215px
|
||||
.six-checkbox-default-unchecked
|
||||
background-position: 0 -268px
|
||||
.six-checkbox-checked
|
||||
background-position: 0 0px
|
||||
.six-checkbox-unchecked
|
||||
background-position: 0 -53px
|
||||
|
||||
table.zebra-stripes
|
||||
tbody
|
||||
th, td
|
||||
border-top: 1px solid #A6C9E2
|
||||
th
|
||||
text-align: left
|
||||
padding-left: 4px
|
||||
tr.odd
|
||||
background: #F5F8F9 url(/images/jqueryui/ui-bg_inset-hard_100_f5f8f9_1x100.png) repeat-x 50%
|
||||
color: #030F1B
|
||||
|
||||
.close_link
|
||||
display: block
|
||||
background: url(/images/close.png) 0 -0 no-repeat
|
||||
height: 16px
|
||||
width: 16px
|
||||
text-indent: -99999px
|
||||
overflow: hidden
|
||||
&:hover, &:focus
|
||||
background-position: 0 -16px
|
||||
|
||||
// this allows you to have a block-level element that does not have a defined with be horizontally centered.
|
||||
// usage:
|
||||
// <div class="centered-block">
|
||||
// <div class="centered-block-wrap">
|
||||
// <div class="centered-block-inner">
|
||||
// put your the element you want centered here
|
||||
.centered-block
|
||||
width: 100%
|
||||
overflow: hidden
|
||||
position: relative
|
||||
.centered-block-wrap
|
||||
clear: left
|
||||
margin: 0
|
||||
padding: 0
|
||||
position: relative
|
||||
left: 50%
|
||||
text-align: center
|
||||
.centered-block-inner
|
||||
display: block
|
||||
margin: 0
|
||||
padding: 0
|
||||
position: relative
|
||||
right: 50%
|
||||
text-align: left
|
||||
|
||||
//this used to be in _layout.sass but for sure did not belong there, I didnt want to get rid of it
|
||||
//because I didnt know if anything actually uses it -RS
|
||||
.small
|
||||
font-size: 11px
|
||||
|
||||
// CLOSE ICONS
|
||||
// -----------
|
||||
a.x-close-link
|
||||
float: right
|
||||
color: black !important
|
||||
font-size: 20px
|
||||
font-weight: bold
|
||||
line-height: 13.5px
|
||||
text-shadow: 0 1px 0 white
|
||||
text-decoration: none
|
||||
+opacity(.25)
|
||||
&:hover, &:focus
|
||||
color: black
|
||||
text-decoration: none
|
||||
+opacity(.60)
|
||||
|
||||
.loading.after:after
|
||||
width: image-width('ajax-loader-linear.gif')
|
||||
height: image-height('ajax-loader-linear.gif')
|
||||
background: url(/images/ajax-loader-linear.gif)
|
||||
content: ''
|
||||
display: inline-block
|
||||
margin-left: 7px
|
||||
|
||||
.loading.center
|
||||
background-image: url(/images/ajax-loader-linear.gif)
|
||||
background-position: center
|
||||
background-repeat: no-repeat
|
||||
|
|
@ -272,8 +272,8 @@ $cell_height: 33px
|
|||
height: 25px
|
||||
|
||||
.gradebook-cell-comment-label
|
||||
+accessible_text_replacement
|
||||
|
||||
+hide-text
|
||||
display: inline-block
|
||||
|
||||
.gradebook-cell-editable
|
||||
height: $cell_height - 1px -8px
|
||||
|
|
@ -318,7 +318,7 @@ $cell_height: 33px
|
|||
display: inline-block
|
||||
background: transparent
|
||||
.outof
|
||||
+unselectable
|
||||
+user-select(none)
|
||||
|
||||
text-align: left
|
||||
color: #888
|
||||
|
|
@ -332,7 +332,7 @@ $cell_height: 33px
|
|||
|
||||
$gradebook_checkbox_width: 16px
|
||||
.gradebook-checkbox
|
||||
+accessible_text_replacement
|
||||
+hide-text
|
||||
display: block
|
||||
position: absolute
|
||||
left: 50%
|
||||
|
|
|
|||
|
|
@ -49,25 +49,14 @@
|
|||
position: absolute
|
||||
left: 400px
|
||||
top: 0
|
||||
label
|
||||
display: block
|
||||
font-size: 16px
|
||||
margin-top: 10px
|
||||
textarea
|
||||
width: 100%
|
||||
height: 100px
|
||||
resize: none
|
||||
input
|
||||
width: 100%
|
||||
font-size: 13px
|
||||
small
|
||||
font-size: 10px
|
||||
display: block
|
||||
color: #555
|
||||
margin-top: -6px
|
||||
select
|
||||
font-size: 15px
|
||||
|
||||
.ui-state-error, .ui-state-highlight
|
||||
border-radius: 4px !important
|
||||
padding: 10px 10px 10px 35px
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@ a
|
|||
:border-bottom 1px solid #888
|
||||
ul
|
||||
:margin-top 0
|
||||
:padding-left 30px
|
||||
|
||||
#page_content
|
||||
.section
|
||||
|
|
@ -249,7 +248,7 @@ ul.submission_list.instTree li.submission.leaf
|
|||
li.active
|
||||
.section_url
|
||||
position: relative
|
||||
background-color: $main_background_color
|
||||
background-color: $bodyBackground
|
||||
margin-right: -1px
|
||||
position: relative
|
||||
z-index: 11
|
||||
|
|
@ -306,3 +305,7 @@ ul.submission_list.instTree li.submission.leaf
|
|||
:display inline
|
||||
.displaying_item
|
||||
:display none
|
||||
|
||||
.message-eportfolios
|
||||
clear: both
|
||||
padding: 10px 30px
|
||||
|
|
|
|||
|
|
@ -1,17 +1,20 @@
|
|||
@import environment.sass
|
||||
@import "environment"
|
||||
|
||||
@import g_reset.sass
|
||||
@import base/native.sass
|
||||
@import base/typography.sass
|
||||
@import "bootstrap/reset"
|
||||
@import "bootstrap/scaffolding"
|
||||
@import "bootstrap/type"
|
||||
|
||||
// the first line of public/javascripts/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/content.css
|
||||
// sets these to undesireable values, rather than modify that vendor file, we just override them here
|
||||
// to match the rest of the content in canvas
|
||||
body, td, pre
|
||||
margin: 0
|
||||
font-family: $baseFontFamily
|
||||
font-size: $baseFontSize
|
||||
color: $textColor
|
||||
|
||||
.mceContentBody
|
||||
margin: 5px
|
||||
td
|
||||
:padding 2px
|
||||
:min-width 20px
|
||||
p
|
||||
:margin-bottom 0
|
||||
|
||||
.mceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid
|
||||
border: 1px dashed #888
|
||||
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
@import "jquery.ui.selectable";
|
||||
@import "jquery.ui.accordion";
|
||||
@import "jquery.ui.autocomplete";
|
||||
//we do our own buttons
|
||||
//@import "jquery.ui.button";
|
||||
@import "jquery.ui.button";
|
||||
@import "jquery.ui.dialog";
|
||||
@import "jquery.ui.slider";
|
||||
@import "jquery.ui.tabs";
|
||||
|
|
|
|||
|
|
@ -1,38 +1,29 @@
|
|||
/*!
|
||||
* jQuery UI Button 1.8.21
|
||||
*
|
||||
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Button#theming
|
||||
*/
|
||||
//.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
|
||||
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
|
||||
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
|
||||
.ui-button-icons-only { width: 3.4em; }
|
||||
button.ui-button-icons-only { width: 3.7em; }
|
||||
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { @extend .ui-helper-hidden-accessible; }
|
||||
|
||||
/*button text element */
|
||||
.ui-button .ui-button-text { display: block; line-height: 1.4; }
|
||||
.ui-button-text-only .ui-button-text { padding: .4em 1em; }
|
||||
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
|
||||
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
|
||||
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
|
||||
.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
|
||||
/* no icon support for input elements, provide padding by default */
|
||||
input.ui-button { padding: .4em 1em; }
|
||||
// DONT USE .ui-button, USE .btn INSTEAD!
|
||||
// it remains only because our jqueryUI widgets
|
||||
// (like 'dialog', and 'buttonset') generate .ui-buttons
|
||||
// in their markup.
|
||||
|
||||
/*button icon element(s) */
|
||||
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
|
||||
.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
|
||||
.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
|
||||
.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
|
||||
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
|
||||
// make .ui-button mimic .btn styles
|
||||
.ui-button {
|
||||
position: relative;
|
||||
@extend .btn;
|
||||
&.ui-state-hover { @extend .btn:hover }
|
||||
&.ui-state-focus { @extend .btn:focus }
|
||||
&.ui-state-active { @extend .btn:active }
|
||||
&.ui-state-disabled { @extend .btn:active }
|
||||
}
|
||||
|
||||
/*button sets*/
|
||||
.ui-buttonset { margin-right: 7px; }
|
||||
.ui-buttonset .ui-button { margin-left: 0; margin-right: -5px; }
|
||||
.ui-buttonset {
|
||||
margin-right: 7px;
|
||||
.ui-button {
|
||||
margin-left: 0;
|
||||
margin-right: -5px;
|
||||
|
||||
// get rid of rounded borders except on left-most and right-most edges
|
||||
&:not(:first-of-type){ @include border-left-radius(0) }
|
||||
&:not(:last-of-type){ @include border-right-radius(0) }
|
||||
}
|
||||
}
|
||||
|
||||
/* workarounds */
|
||||
button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
|
||||
|
|
|
|||
|
|
@ -66,8 +66,7 @@
|
|||
padding: 5px 0;
|
||||
text-align: center;
|
||||
|
||||
input { padding: 2px; }
|
||||
.btn{ margin-top: -3px; }
|
||||
input, select { padding: 2px; margin-bottom: 0; }
|
||||
}
|
||||
.ui-datepicker-header {
|
||||
@extend .ui-dialog-titlebar;
|
||||
|
|
|
|||
|
|
@ -92,14 +92,12 @@ $kyle-menu-border-radius: 8px;
|
|||
box-shadow: 0px 2px 4px -1px rgba(0,0,0,.4);
|
||||
|
||||
a { color: #525252}
|
||||
.ui-menu-item {
|
||||
hr {
|
||||
margin: 0 2px;
|
||||
height: 0;
|
||||
border: 0;
|
||||
border-top: 1px solid #d4d5d7;
|
||||
border-bottom: 1px solid #f2f2f3;
|
||||
}
|
||||
hr {
|
||||
margin: 0 2px;
|
||||
height: 0;
|
||||
border: 0;
|
||||
border-top: 1px solid #d4d5d7;
|
||||
border-bottom: 1px solid #f2f2f3;
|
||||
}
|
||||
// have to use first-of-type instead of :first-child because the carat that gets inserted becomes
|
||||
// :first-child but the carat is not an <li>, so this gets the first <li> which is what we want.
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 180 B |
Binary file not shown.
|
Before Width: | Height: | Size: 178 B |
Binary file not shown.
|
Before Width: | Height: | Size: 120 B |
Binary file not shown.
|
Before Width: | Height: | Size: 105 B |
Binary file not shown.
|
Before Width: | Height: | Size: 111 B |
Binary file not shown.
|
Before Width: | Height: | Size: 110 B |
Binary file not shown.
|
Before Width: | Height: | Size: 119 B |
Binary file not shown.
|
Before Width: | Height: | Size: 101 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
|
|
@ -10,7 +10,7 @@
|
|||
border: solid #ccc
|
||||
border-width: 1px 0
|
||||
tfoot
|
||||
th, td
|
||||
th, td
|
||||
font-weight: bold
|
||||
.group_weight
|
||||
width: 50px
|
||||
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
// #TODO move these into their own file
|
||||
.headerBar {
|
||||
margin-bottom: 15px;
|
||||
|
||||
&.pinned {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
.js-assignment-overrides {
|
||||
overflow-x: auto;
|
||||
overflow: auto;
|
||||
|
||||
.remove-link .icon-end:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
|
@ -11,25 +12,24 @@
|
|||
}
|
||||
|
||||
.due-date-override-headers {
|
||||
min-width: 771px;
|
||||
padding: 0px 0px 10px 40px;
|
||||
min-width: 650px;
|
||||
|
||||
div {
|
||||
width: 160px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
div.due-date-header {
|
||||
width: 170px;
|
||||
width: 145px;
|
||||
}
|
||||
div.lock-header {
|
||||
width: 195px;
|
||||
}
|
||||
div.unlock-header {
|
||||
width: 170px;
|
||||
width: 142px;
|
||||
}
|
||||
}
|
||||
|
||||
.due-date-overrides {
|
||||
margin: 0 0 10px 0;
|
||||
|
||||
li.due-date-row {
|
||||
list-style-type: none;
|
||||
overflow: hidden;
|
||||
|
|
@ -44,25 +44,12 @@
|
|||
position: relative;
|
||||
margin-right: 10px;
|
||||
input {
|
||||
width: 160px;
|
||||
}
|
||||
.ui-datepicker-trigger {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 88px;
|
||||
}
|
||||
.datetime_suggest {
|
||||
height: 25px;
|
||||
}
|
||||
&.to:before {
|
||||
content: "to";
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.due-date-override-footer {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@
|
|||
padding: 1px 6px
|
||||
|
||||
#refresh_calendar_link
|
||||
+accessible_text_replacement
|
||||
+hide_text
|
||||
width: 20px
|
||||
height: 20px
|
||||
float: right
|
||||
|
|
@ -148,6 +148,7 @@
|
|||
.event-details-header,
|
||||
.event-details-content,
|
||||
.event-details-footer
|
||||
+clearfix
|
||||
padding: 10px 20px
|
||||
border-bottom: 1px solid #eee
|
||||
word-wrap: normal
|
||||
|
|
@ -180,7 +181,7 @@
|
|||
|
||||
/*replicate button styles to work for fullcalendar */
|
||||
.calendar .fc-button
|
||||
+unselectable
|
||||
+user-select(none)
|
||||
padding: $buttonPadding
|
||||
|
||||
//these are just ui-state-default colors
|
||||
|
|
@ -203,16 +204,12 @@
|
|||
&.fc-state-disabled
|
||||
opacity: 0.7 // purposely not handling ie8 because having transparency makes it look weird
|
||||
.fc-button-content
|
||||
color: $button-text-color
|
||||
color: $textColor
|
||||
text-shadow: #fff 0 1px 1px
|
||||
&.fc-corner-left
|
||||
+border-left-radius(4px)
|
||||
&.fc-corner-right
|
||||
+border-right-radius($buttonset-border-radius)
|
||||
|
||||
#delete_event_dialog
|
||||
textarea
|
||||
width: 100%
|
||||
+border-right-radius(4px)
|
||||
|
||||
#edit_appt_calendar_event_form
|
||||
p
|
||||
|
|
@ -75,3 +75,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
table#course_roles thead, table#account_roles thead {
|
||||
background: #fff;
|
||||
}
|
||||
|
|
@ -78,6 +78,10 @@ ul.outcome-level
|
|||
white-space: nowrap
|
||||
&:hover
|
||||
background: white
|
||||
|
||||
i[class*=icon-]:before, i[class^=icon-]:before
|
||||
vertical-align: baseline
|
||||
|
||||
&.selected
|
||||
a
|
||||
background-color: $toolbarBackgroundLight
|
||||
|
|
@ -123,7 +127,7 @@ table.criterion td
|
|||
|
||||
h5
|
||||
margin-bottom: 10px
|
||||
color: $link_color
|
||||
color: $linkColor
|
||||
font-weight: normal
|
||||
min-height: 1em
|
||||
&.total
|
||||
|
|
@ -155,9 +159,9 @@ table.criterion .insert
|
|||
text-decoration: none
|
||||
&:hover
|
||||
a
|
||||
color: $link-color
|
||||
color: $linkColor
|
||||
span
|
||||
border-top-color: $link-color
|
||||
border-top-color: $linkColor
|
||||
|
||||
.arrow-icon
|
||||
width: 0
|
||||
|
|
@ -169,3 +173,8 @@ table.criterion .insert
|
|||
border-top: 5px solid $grayLight
|
||||
display: block
|
||||
|
||||
.outcomes-points-label
|
||||
font-size: 11px
|
||||
|
||||
.outcomes-edit-row
|
||||
text-align: left
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import "environment";
|
||||
@import "blue/main";
|
||||
|
||||
/*-- element styles --*/
|
||||
dl {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ $kyle-blue: #0081e3
|
|||
border-bottom: 1px solid #6e6e70
|
||||
color: white
|
||||
text-shadow: 0px 1px 1px rgba(0,0,0,0.4)
|
||||
+unselectable
|
||||
+user-select(none)
|
||||
|
||||
h2
|
||||
// override styles from default fullcalendar.css
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
@mixin bevelText {
|
||||
text-shadow: 0 1px 1px hsla(0, 100%, 100%, 0.75);
|
||||
}
|
||||
|
||||
@mixin header-text {
|
||||
color: $fcHeader;
|
||||
text-shadow: 0 1px 1px $textShadowHeader;
|
||||
}
|
||||
@mixin header-bg {
|
||||
@include vertical-gradient($gradientTopHeader, $gradientBottomHeader);
|
||||
box-shadow: inset 0 1px 0 hsla(0, 100%, 100%, 0.75);
|
||||
}
|
||||
|
||||
@mixin ui-widget-header-bg-and-text {
|
||||
border: 1px solid $borderColorHeader;
|
||||
@include header-text;
|
||||
@include header-bg;
|
||||
}
|
||||
|
||||
// mixin for easy retina background images
|
||||
@mixin bg-image($filename, $filetype, $rep: no-repeat, $bgx: 0, $bgy: 0, $bgcolor: none, $bgw: auto, $bgh: auto) {
|
||||
|
||||
background-color: $bgcolor;
|
||||
background-image: url('/images/' + $filename + '.' + $filetype);
|
||||
background-repeat: $rep;
|
||||
background-position: $bgx $bgy;
|
||||
|
||||
@media (min--moz-device-pixel-ratio: 1.5),
|
||||
(-o-min-device-pixel-ratio: 3/2),
|
||||
(-webkit-min-device-pixel-ratio: 1.5),
|
||||
(min-device-pixel-ratio: 1.5),
|
||||
(min-resolution: 1.5dppx) {
|
||||
background-image: url('/images/' + $filename + '@2x.' + $filetype);
|
||||
background-size: $bgw $bgh;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import 'misc'
|
||||
@import 'blue'
|
||||
@import 'bubbles'
|
||||
|
|
@ -1,25 +1,3 @@
|
|||
|
||||
// Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity.
|
||||
//
|
||||
// @param $opacity
|
||||
// A number between 0 and 1, where 0 is transparent and 1 is opaque.
|
||||
|
||||
=opacity($opacity)
|
||||
// XXX consider only using the official property. I think -moz, -webkit, and -o support it.
|
||||
opacity: $opacity
|
||||
@if $experimental-support-for-microsoft
|
||||
$value: unquote("alpha(Opacity=#{round($opacity * 100)})")
|
||||
+experimental(filter, $value, not -moz, not -webkit, not -o, -ms, not -khtml, official)
|
||||
|
||||
// Make an element completely transparent.
|
||||
=transparent
|
||||
+opacity(0)
|
||||
|
||||
// Make an element completely opaque.
|
||||
=opaque
|
||||
+opacity(1)
|
||||
|
||||
|
||||
// use on a UL or a OL to reset
|
||||
=reset-list
|
||||
margin: 0
|
||||
|
|
|
|||
|
|
@ -1,134 +1,73 @@
|
|||
@import 'environment'
|
||||
@import 'bootstrap/_tables'
|
||||
|
||||
$grey: #888
|
||||
$darker_grey: darken($grey, 9%)
|
||||
$category_name: #396eb2 //#668
|
||||
$stripe_color: #eff3f4
|
||||
$hover_row: #F5F5F5
|
||||
.notification-prefs-table
|
||||
|
||||
/* Column striping */
|
||||
.table-columns-striped tr
|
||||
td:nth-child(2n),
|
||||
th:nth-child(2n)
|
||||
background: none repeat scroll 0 0 $stripe_color
|
||||
.ui-button
|
||||
padding: 1px
|
||||
|
||||
#notification-preferences
|
||||
td.comm-event-option > select
|
||||
+opacity(0)
|
||||
.group-name
|
||||
font-weight: bold
|
||||
margin-bottom: 0
|
||||
padding-top: 1em
|
||||
line-height: 1em
|
||||
|
||||
.notification-prefs-table
|
||||
border: 1px solid #DDD
|
||||
border-collapse: separate
|
||||
border-radius: 4px
|
||||
tr:not(:first-child) .comm-channel *
|
||||
display: none
|
||||
|
||||
caption
|
||||
color: $grey
|
||||
line-height: 0
|
||||
+opacity(0)
|
||||
.comm-channel
|
||||
text-align: center
|
||||
|
||||
h3.group-name
|
||||
font-weight: bold
|
||||
margin-bottom: 0
|
||||
.channel-addr
|
||||
font-weight: normal
|
||||
font-size: 0.8em
|
||||
|
||||
a.change-selection > span.ui-icon
|
||||
display: inline-block
|
||||
vertical-align: text-top
|
||||
.comm-event
|
||||
position: relative
|
||||
|
||||
tr
|
||||
th > div
|
||||
display: none
|
||||
th.channel-add a
|
||||
display: none
|
||||
// First row in table
|
||||
tr:first-child
|
||||
th > div
|
||||
display: block
|
||||
th.channel-add a
|
||||
display: block
|
||||
td, th
|
||||
border: none
|
||||
|
||||
// Grouping rows should be solid color but still support hover
|
||||
tr.grouping:not(:first-child) th
|
||||
background-color: inherit
|
||||
tr.grouping:hover
|
||||
background-color: $hover_row
|
||||
|
||||
th.comm-channel
|
||||
text-align: center
|
||||
|
||||
.user-preference > label
|
||||
display: inline
|
||||
|
||||
.channel-addr
|
||||
font-weight: normal
|
||||
font-size: 0.8em
|
||||
color: $grey
|
||||
|
||||
h3.group-name
|
||||
padding-top: 1em
|
||||
line-height: 1em
|
||||
color: $grey
|
||||
|
||||
td.comm-event
|
||||
font-size: 1.1em
|
||||
vertical-align: bottom
|
||||
.row-title-cell
|
||||
position: relative
|
||||
|
||||
div.row-title-cell
|
||||
position: relative
|
||||
td.comm-event-option
|
||||
text-align: left
|
||||
width: 110px
|
||||
|
||||
label
|
||||
font-size: 13px
|
||||
// By default, hide buttons and show selection text
|
||||
.event-option-selection
|
||||
display: block
|
||||
.event-option-buttons
|
||||
float: left
|
||||
display: none
|
||||
|
||||
td.comm-event-option
|
||||
text-align: left
|
||||
width: 110px
|
||||
.comm-event-option-contents
|
||||
position: relative
|
||||
min-height: 22px
|
||||
|
||||
// By default, hide buttons and show selection text
|
||||
.event-option-selection
|
||||
display: block
|
||||
.event-option-buttons
|
||||
float: left
|
||||
display: none
|
||||
label.ui-button
|
||||
padding: 0
|
||||
padding-top: 2px
|
||||
margin-left: 10px
|
||||
|
||||
div.comm-event-option-contents
|
||||
position: relative
|
||||
a
|
||||
&:hover, &:focus, &:active
|
||||
text-decoration: none
|
||||
select
|
||||
+opacity(0)
|
||||
outline: 0
|
||||
position: absolute
|
||||
top: 0px
|
||||
left: 0px
|
||||
|
||||
.event-option-selection
|
||||
padding-top: 2px
|
||||
margin-left: 10px
|
||||
|
||||
a
|
||||
color: $darker_grey
|
||||
&:hover, &:focus, &:active
|
||||
text-decoration: none
|
||||
select
|
||||
+opacity(0)
|
||||
outline: 0
|
||||
position: absolute
|
||||
top: 0px
|
||||
left: 0px
|
||||
div.user-preference
|
||||
margin-left: 1.1em
|
||||
|
||||
span.category-name
|
||||
color: $category_name
|
||||
|
||||
div.user-preference
|
||||
margin-left: 1.1em
|
||||
|
||||
.user-pref-check, label
|
||||
vertical-align: bottom
|
||||
|
||||
.notification-prefs-table.no-touch
|
||||
.no-touch &
|
||||
td.comm-event-option[data-selection='never'] .event-option-selection a.change-selection
|
||||
+opacity(0)
|
||||
&:hover, &:focus
|
||||
+opacity(0.35)
|
||||
|
||||
.notification-prefs-table.touch
|
||||
.touch &
|
||||
td.comm-event-option .event-option-selection a.change-selection
|
||||
span.drop-arrow
|
||||
float: right
|
||||
|
|
|
|||
|
|
@ -87,10 +87,10 @@
|
|||
text-align: center
|
||||
|
||||
.social
|
||||
+hide-text
|
||||
width: 30px
|
||||
height: 30px
|
||||
background-image: url(/images/social-icons.png)
|
||||
+accessible_text_replacement
|
||||
display: block
|
||||
|
||||
.message
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ $boxSizingBaseLineHeight: $baseLineHeight + 8;
|
|||
display: inline;
|
||||
margin-left: 10px;
|
||||
font-weight: normal;
|
||||
color: $blueGray;
|
||||
// color: $blueGray;
|
||||
}
|
||||
|
||||
[class*=icon-], [class^=icon-] {
|
||||
|
|
|
|||
|
|
@ -232,6 +232,7 @@ div#content
|
|||
.answer
|
||||
:padding 5px 5px
|
||||
:margin 0
|
||||
@include clearfix
|
||||
|
||||
&:last-child
|
||||
:border-bottom 0
|
||||
|
|
@ -261,6 +262,7 @@ div#content
|
|||
padding: 5px 10px
|
||||
overflow: hidden
|
||||
background-color: #eee
|
||||
clear: both
|
||||
&.question_bank_top
|
||||
.local_group_links
|
||||
display: none
|
||||
|
|
@ -393,6 +395,8 @@ div#content
|
|||
:clear left
|
||||
:padding 5px 20px
|
||||
|
||||
.button-container
|
||||
:clear both
|
||||
.question_text
|
||||
:margin-top 1.5em
|
||||
:margin-bottom 1.5em
|
||||
|
|
@ -1321,3 +1325,14 @@ ul#quiz_versions
|
|||
border: 1px solid #999
|
||||
margin: 18px 0 -1px
|
||||
@include background-image(linear-gradient(#f3f3f3, #e3e3e3))
|
||||
|
||||
#quiz_options_holder
|
||||
select
|
||||
width: auto
|
||||
margin-left: 3px
|
||||
input[type="text"]
|
||||
width: 90%
|
||||
margin-left: 3px
|
||||
&.hasDatepicker
|
||||
width: 45%
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@ fieldset
|
|||
margin-bottom: 5px
|
||||
legend
|
||||
font-weight: bold
|
||||
border: none
|
||||
width: auto
|
||||
margin-left: 20px
|
||||
font-size: 1.2em
|
||||
margin-bottom: 0
|
||||
table.details
|
||||
td
|
||||
padding: 1px 5px
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
@charset 'UTF-8'
|
||||
|
||||
/*
|
||||
Welcome to Compass.
|
||||
In this file you should write your main styles. (or centralize your imports)
|
||||
Import this file using the following HTML or equivalent:
|
||||
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
||||
|
||||
@import compass/reset
|
||||
|
||||
/*
|
||||
The *:focus rule is reset and suppresses link outlining.
|
||||
You _must_ remember to redefine your own outline, as it’s an important accessibility aid. E.g.
|
||||
*:focus
|
||||
outline: #ccc dotted medium
|
||||
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
.account > .header .edit_account
|
||||
display: none
|
||||
form
|
||||
margin: 0
|
||||
|
||||
.account > .header
|
||||
font-size: 1.2em
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
// override .ui-state-hover a styles
|
||||
.ui-selectmenu-menu a {
|
||||
color: $link_color;
|
||||
color: $linkColor;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ sample markup:
|
|||
|
||||
<div class="admin-link-hover-area">
|
||||
<div class="admin-links">
|
||||
<button class="al-trigger"><span class="al-trigger-inner">Manage (will be accessibly hidden)</span></button>
|
||||
<button class="al-trigger btn"><span class="screenreader-only">Manage (will be accessibly hidden)</span></button>
|
||||
<ul class="al-options">
|
||||
<li><a href="#"><span class="ui-icon ui-icon-pencil" />Edit</a></li>
|
||||
<li><a href="#"><span class="ui-icon ui-icon-trash" />Delete (from database)</a></li>
|
||||
|
|
@ -27,30 +27,6 @@ sample markup:
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
.al-trigger{
|
||||
@include opacity(.3);
|
||||
.ui-button-text{ padding: 0; font-size: 10px;}
|
||||
.al-trigger-inner {
|
||||
display: block;
|
||||
text-indent: -1000px;
|
||||
overflow: hidden;
|
||||
}
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
zoom: 1;
|
||||
border: 1px solid;
|
||||
box-shadow: none;
|
||||
border-color: #b6b6b6;
|
||||
padding: 3px 4px;
|
||||
@include vertical-gradient(#fafafa, #d3d4d8);
|
||||
@include border-radius(15px);
|
||||
border: 1px solid #c2c2c2;
|
||||
border-bottom-color: #bfbfbf;
|
||||
&:hover, &.ui-state-active {
|
||||
@include vertical-gradient(#ffffff, #dfdfdf);
|
||||
}
|
||||
&:active, &.ui-state-active { @include vertical-gradient(#a8a8a8, #c6c6c6) }
|
||||
}
|
||||
.al-options {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
|
@ -74,7 +50,6 @@ sample markup:
|
|||
margin: 0 !important;
|
||||
border: none;
|
||||
}
|
||||
.ui-icon {background-image: url(/images/jqueryui/ui-icons_ffffff_256x240.png); }
|
||||
}
|
||||
|
||||
.admin-link-hover-area:hover .al-trigger,
|
||||
|
|
@ -82,19 +57,9 @@ sample markup:
|
|||
.al-trigger.ui-state-active,
|
||||
.al-trigger:focus,
|
||||
.al-trigger:hover{
|
||||
@include opacity(1)
|
||||
@include opacity(1);
|
||||
}
|
||||
|
||||
//this should be in main jquery css along with other buttons but it is not a sass file yet
|
||||
$image: "cog-with-droparrow.png";
|
||||
.ui-icon-cog-with-droparrow, .al-trigger-inner {
|
||||
height: image-height($image);
|
||||
width: image-width($image);
|
||||
background-image: inline-image($image) !important;
|
||||
.al-trigger {
|
||||
padding: 4px;
|
||||
}
|
||||
.al-trigger:active .al-trigger-inner,
|
||||
.al-trigger.ui-state-active .al-trigger-inner,
|
||||
.ui-state-active .ui-icon-cog-with-droparrow{
|
||||
background-image: inline-image('cog-with-droparrow-active.png') !important
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
// this allows you to have a block-level element that does not have a defined with be horizontally centered.
|
||||
// usage:
|
||||
// <div class="centered-block">
|
||||
// <div class="centered-block-wrap">
|
||||
// <div class="centered-block-inner">
|
||||
// put your the element you want centered here
|
||||
.centered-block
|
||||
width: 100%
|
||||
overflow: hidden
|
||||
position: relative
|
||||
.centered-block-wrap
|
||||
clear: left
|
||||
margin: 0
|
||||
padding: 0
|
||||
position: relative
|
||||
left: 50%
|
||||
text-align: center
|
||||
.centered-block-inner
|
||||
display: block
|
||||
margin: 0
|
||||
padding: 0
|
||||
position: relative
|
||||
right: 50%
|
||||
text-align: left
|
||||
|
|
@ -1,8 +1,5 @@
|
|||
|
||||
|
||||
.toolbar {
|
||||
@extend .ui-widget-header;
|
||||
|
||||
padding: $contentBoxPadding / 2;
|
||||
font-size: $baseFontSize;
|
||||
line-height: $baseLineHeight;
|
||||
|
|
@ -12,56 +9,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.content-callout {
|
||||
@include content-callout();
|
||||
}
|
||||
|
||||
.content-box {
|
||||
background-color: $lightBackground;
|
||||
|
||||
& > * {
|
||||
padding-left: $contentBoxPadding;
|
||||
padding-right: $contentBoxPadding;
|
||||
}
|
||||
|
||||
// add soem space above first child
|
||||
& > *:first-child {
|
||||
padding-top: $contentBoxPadding;
|
||||
}
|
||||
|
||||
// embedded toolbar styles
|
||||
& > .toolbar {
|
||||
border-bottom: 1px solid $borderColor;
|
||||
& + * {
|
||||
padding-top: $contentBoxPadding;
|
||||
}
|
||||
}
|
||||
|
||||
&.border-round-b > .toolbar {
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
&.border-round-t > .toolbar,
|
||||
&.border-round > .toolbar {
|
||||
border-top-left-radius: $borderRadius;
|
||||
border-top-right-radius: $borderRadius;
|
||||
}
|
||||
|
||||
&.border-round-tl > .toolbar {
|
||||
border-top-left-radius: $borderRadius;
|
||||
}
|
||||
|
||||
&.border-round {
|
||||
border-radius: $borderRadius;
|
||||
}
|
||||
|
||||
// remove pading from list-view
|
||||
& > .list-view {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// List View
|
||||
.list-view {
|
||||
background-color: $lightBackground;
|
||||
|
|
@ -70,7 +17,8 @@
|
|||
& > header,
|
||||
// oldskool compat
|
||||
#section-tabs-header {
|
||||
@include buttonBackground($listViewHeaderBackgroundLight, $listViewHeaderBackground);
|
||||
@include buttonBackground($listViewHeaderBackgroundLight, $listViewHeaderBackground, $gray);
|
||||
margin-top: 0;
|
||||
padding: 4px 12px;
|
||||
font-weight: bold;
|
||||
$shadow: inset 0 1px 0 rgba(255,255,255,0.75);
|
||||
|
|
@ -143,36 +91,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
@include clearfix();
|
||||
overflow: visible;
|
||||
padding-left:0;
|
||||
|
||||
& > li {
|
||||
float: left;
|
||||
|
||||
& > a {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
margin-right: 2px;
|
||||
line-height: 4px; // keeps the overall height an even number
|
||||
color: $gray;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
|
||||
&.active, &:hover {
|
||||
color: $black;
|
||||
background: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-block {
|
||||
@include clearfix;
|
||||
|
||||
|
|
@ -192,52 +110,6 @@
|
|||
@include box-shadow(0 2px 4px rgba(0,0,0,.25))
|
||||
}
|
||||
|
||||
.box-with-header,
|
||||
.triangle-box,
|
||||
.triangle-box-with-header {
|
||||
@include box-with-header;
|
||||
}
|
||||
|
||||
.triangle-box,
|
||||
.triangle-box-with-header {
|
||||
position: relative; // for the triangle
|
||||
margin-left: 20px;
|
||||
|
||||
.box-header {
|
||||
// relative position to sit on top of the triangle
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// the triangle
|
||||
&:before {
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: -9px;
|
||||
@include rotate(45deg);
|
||||
border: solid 1px $borderColor;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
background: $white;
|
||||
.ie & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.triangle-box-with-header:before {
|
||||
@include box-shadow(0 1px 1px 0px lighten($borderColor, 30%));
|
||||
@include gradient-directional(lighten($contentCalloutColor, 4%), $contentCalloutColor, 45deg);
|
||||
}
|
||||
|
||||
.checkbox-inline {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.page-action-list {
|
||||
@include reset-list;
|
||||
a {
|
||||
|
|
@ -259,3 +131,4 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
a.external
|
||||
&:hover, &:focus, &:active
|
||||
text-decoration: none
|
||||
span
|
||||
text-decoration: underline
|
||||
.ui-icon-extlink
|
||||
text-decoration: none
|
||||
.ui-icon-extlink
|
||||
display: inline-block
|
||||
padding: 0
|
||||
vertical-align: middle
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue