From 6a94e72ad27affc0d00bd298659bfa987ce33b0e Mon Sep 17 00:00:00 2001 From: Roberto von Schoettler Date: Fri, 14 Sep 2018 12:08:24 -0400 Subject: [PATCH] feat: adding tabbable events (#987) * Adding tabbable events * Adding button reset & Chrome's default outline for all browsers * Scoping button reset to .rbc-event * Moving reset to event.less --- src/EventCell.js | 4 ++-- src/less/event.less | 10 +++++++++- src/less/variables.less | 1 + 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/EventCell.js b/src/EventCell.js index c44a8f98c..200d08d68 100644 --- a/src/EventCell.js +++ b/src/EventCell.js @@ -70,7 +70,7 @@ class EventCell extends React.Component { return ( -
onDoubleClick && onDoubleClick(event, e)} > {typeof children === 'function' ? children(content) : content} -
+
) } diff --git a/src/less/event.less b/src/less/event.less index c46bf3764..31766eba4 100644 --- a/src/less/event.less +++ b/src/less/event.less @@ -1,11 +1,16 @@ @import './variables.less'; .rbc-event { + border: none; + box-shadow: none; + margin: 0; padding: @event-padding; background-color: @event-bg; border-radius: @event-border-radius; color: @event-color; cursor: pointer; + width: 100%; + text-align: left; .rbc-slot-selecting & { cursor: inherit; @@ -15,6 +20,10 @@ &.rbc-selected { background-color: darken(@event-bg, 10%); } + + &:focus { + outline: 5px auto @event-outline; + } } .rbc-event-label { @@ -44,4 +53,3 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; } - diff --git a/src/less/variables.less b/src/less/variables.less index 63d1a274e..87a54c074 100644 --- a/src/less/variables.less +++ b/src/less/variables.less @@ -16,6 +16,7 @@ @event-bg: #3174ad; @event-border: darken(#3174ad, 10%); +@event-outline: #3b99fc; @event-color: #fff; @event-border-radius: 5px; @event-padding: 2px 5px;