<commit_before>/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
@import button
/* topdoc
  name: Button
  description: A simple button
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button">Button</button>
    <button class="topcoat-button" disabled>Button</button>
  examples:
    mobile button: http://codepen.io/Topcoat/pen/DpKtf
  tags:
    - desktop
    - light
    - mobile
    - button
*/
.topcoat-button {
    extend: %button;
    padding: var(padding);
    font-size: var(font-size);
    line-height: var(line-height);
    letter-spacing: var(letter-spacing);
    color: var(color);
    text-shadow: var(text-shadow);
    vertical-align: var(vertical-align);
    background-color: var(background-color);
    box-shadow: var(box-shadow);
    border: var(border);
    border-radius: var(border-radius);
}

.topcoat-button:hover {
    background-color: var(background-color--hover);
}

.topcoat-button:active {
    background-color: var(background-color--down);
    box-shadow: var(box-shadow--down);
}

.topcoat-button:focus {
    border: var(border--focus);
    box-shadow: var(box-shadow--focus);
    outline: 0;
}

.topcoat-button:disabled {
    extend: .button--disabled;
}

/* topdoc
  name: Quiet Button
  description: A simple, yet quiet button
  modifiers:
    :active: Quiet button active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button--quiet">Button</button>
    <button class="topcoat-button--quiet" disabled>Button</button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - quiet
*/
.topcoat-button--quiet {
    extend: .topcoat-button;
    extend: %button--quiet;
}

.topcoat-button--quiet:disabled {
    extend: .topcoat-button:disabled;
}

.topcoat-button--quiet:hover {
  extend: .topcoat-button:hover;
  text-shadow: var(text-shadow);
  border: var(border);
  box-shadow: var(box-shadow);
}

.topcoat-button--quiet:focus {
    extend: .topcoat-button:focus;
}

.topcoat-button--quiet:active {
    color: var(color);
    text-shadow: var(text-shadow);
    background-color: var(background-color--down);
    border: var(border);
    box-shadow: var(box-shadow--down);
}

/* topdoc
  name: Large Button
  description: A big ol button
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button--large" >Button</button>
    <button class="topcoat-button--large" disabled>Button</button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - large
*/
.topcoat-button--large {
    extend: .topcoat-button;
    font-size: var(font-size--large);
    font-weight: var(font-weight--large);
    line-height: var(line-height--large);
    padding: var(padding--large);
}

.topcoat-button--large:active {
    extend: .topcoat-button:active;
}

.topcoat-button--large:disabled {
    extend: .topcoat-button:disabled;
}

.topcoat-button--large:hover {
    extend: .topcoat-button:hover;
}

.topcoat-button--large:focus {
    extend: .topcoat-button:focus;
}

/* topdoc
  name: Large Quiet Button
  description: A large, yet quiet button
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button--large--quiet" >Button</button>
    <button class="topcoat-button--large--quiet" disabled>Button</button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - large
    - quiet
*/
.topcoat-button--large--quiet {
    extend: .topcoat-button--large;
    extend: %button--quiet;
}

.topcoat-button--large--quiet:active {
    extend: .topcoat-button--quiet:active;
}

.topcoat-button--large--quiet:disabled {
    extend: .button--disabled;
}

.topcoat-button--large--quiet:hover {
    extend: .topcoat-button--quiet:hover;
}

.topcoat-button--large--quiet:focus {
    extend: .topcoat-button:focus;
}

/* topdoc
  name: Call To Action Button
  description: A CALL TO ARMS, er, ACTION!
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button--cta" >Button</button>
    <button class="topcoat-button--cta" disabled>Button</button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - call to action
*/
.topcoat-button--cta {
    extend: .topcoat-button;
    border: var(border--cta);
    background-color: var(background-color--cta);
    box-shadow: var(box-shadow--cta);
    color: var(color--cta);
    font-weight: var(font-weight--cta);
    text-shadow: var(text-shadow--cta);
}

.topcoat-button--cta:hover {
    background-color: var(background-color--cta--hover);
}

.topcoat-button--cta:focus {
    extend: .topcoat-button:focus;
}

.topcoat-button--cta:active {
    background-color: var-background-color--cta--down;
    box-shadow: var-box-shadow--cta--down;
}

.topcoat-button--cta:disabled {
    extend: .topcoat-button:disabled;
}

/* topdoc
  name: Large Call To Action Button
  description: Like call to action, but bigger
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button--large--cta" >Button</button>
    <button class="topcoat-button--large--cta" disabled>Button</button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - large
    - call to action
*/
.topcoat-button--large--cta {
    extend: .topcoat-button--cta;
    font-size: var(font-size--large);
    font-weight: var(font-weight--large);
    line-height: var(line-height--large);
    padding: var(padding--large);
}

.topcoat-button--large--cta:hover {
    extend: .topcoat-button--cta:hover;
}

.topcoat-button--large--cta:focus {
    extend: .topcoat-button:focus;
}

.topcoat-button--large--cta:active {
    extend: .topcoat-button--cta:active;
}

.topcoat-button--large--cta:disabled {
    extend: .topcoat-button:disabled;
}

<commit_msg>Added proper import of button<commit_after>/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
@import "button";
/* topdoc
  name: Button
  description: A simple button
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button">Button</button>
    <button class="topcoat-button" disabled>Button</button>
  examples:
    mobile button: http://codepen.io/Topcoat/pen/DpKtf
  tags:
    - desktop
    - light
    - mobile
    - button
*/
.topcoat-button {
    extend: %button;
    padding: var(padding);
    font-size: var(font-size);
    line-height: var(line-height);
    letter-spacing: var(letter-spacing);
    color: var(color);
    text-shadow: var(text-shadow);
    vertical-align: var(vertical-align);
    background-color: var(background-color);
    box-shadow: var(box-shadow);
    border: var(border);
    border-radius: var(border-radius);
}

.topcoat-button:hover {
    background-color: var(background-color--hover);
}

.topcoat-button:active {
    background-color: var(background-color--down);
    box-shadow: var(box-shadow--down);
}

.topcoat-button:focus {
    border: var(border--focus);
    box-shadow: var(box-shadow--focus);
    outline: 0;
}

.topcoat-button:disabled {
    extend: .button--disabled;
}

/* topdoc
  name: Quiet Button
  description: A simple, yet quiet button
  modifiers:
    :active: Quiet button active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button--quiet">Button</button>
    <button class="topcoat-button--quiet" disabled>Button</button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - quiet
*/
.topcoat-button--quiet {
    extend: .topcoat-button;
    extend: %button--quiet;
}

.topcoat-button--quiet:disabled {
    extend: .topcoat-button:disabled;
}

.topcoat-button--quiet:hover {
  extend: .topcoat-button:hover;
  text-shadow: var(text-shadow);
  border: var(border);
  box-shadow: var(box-shadow);
}

.topcoat-button--quiet:focus {
    extend: .topcoat-button:focus;
}

.topcoat-button--quiet:active {
    color: var(color);
    text-shadow: var(text-shadow);
    background-color: var(background-color--down);
    border: var(border);
    box-shadow: var(box-shadow--down);
}

/* topdoc
  name: Large Button
  description: A big ol button
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button--large" >Button</button>
    <button class="topcoat-button--large" disabled>Button</button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - large
*/
.topcoat-button--large {
    extend: .topcoat-button;
    font-size: var(font-size--large);
    font-weight: var(font-weight--large);
    line-height: var(line-height--large);
    padding: var(padding--large);
}

.topcoat-button--large:active {
    extend: .topcoat-button:active;
}

.topcoat-button--large:disabled {
    extend: .topcoat-button:disabled;
}

.topcoat-button--large:hover {
    extend: .topcoat-button:hover;
}

.topcoat-button--large:focus {
    extend: .topcoat-button:focus;
}

/* topdoc
  name: Large Quiet Button
  description: A large, yet quiet button
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button--large--quiet" >Button</button>
    <button class="topcoat-button--large--quiet" disabled>Button</button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - large
    - quiet
*/
.topcoat-button--large--quiet {
    extend: .topcoat-button--large;
    extend: %button--quiet;
}

.topcoat-button--large--quiet:active {
    extend: .topcoat-button--quiet:active;
}

.topcoat-button--large--quiet:disabled {
    extend: .button--disabled;
}

.topcoat-button--large--quiet:hover {
    extend: .topcoat-button--quiet:hover;
}

.topcoat-button--large--quiet:focus {
    extend: .topcoat-button:focus;
}

/* topdoc
  name: Call To Action Button
  description: A CALL TO ARMS, er, ACTION!
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button--cta" >Button</button>
    <button class="topcoat-button--cta" disabled>Button</button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - call to action
*/
.topcoat-button--cta {
    extend: .topcoat-button;
    border: var(border--cta);
    background-color: var(background-color--cta);
    box-shadow: var(box-shadow--cta);
    color: var(color--cta);
    font-weight: var(font-weight--cta);
    text-shadow: var(text-shadow--cta);
}

.topcoat-button--cta:hover {
    background-color: var(background-color--cta--hover);
}

.topcoat-button--cta:focus {
    extend: .topcoat-button:focus;
}

.topcoat-button--cta:active {
    background-color: var-background-color--cta--down;
    box-shadow: var-box-shadow--cta--down;
}

.topcoat-button--cta:disabled {
    extend: .topcoat-button:disabled;
}

/* topdoc
  name: Large Call To Action Button
  description: Like call to action, but bigger
  modifiers:
    :active: Active state
    :disabled: Disabled state
    :hover: Hover state
    :focus: Focused
  markup:
    <button class="topcoat-button--large--cta" >Button</button>
    <button class="topcoat-button--large--cta" disabled>Button</button>
  tags:
    - desktop
    - light
    - mobile
    - button
    - large
    - call to action
*/
.topcoat-button--large--cta {
    extend: .topcoat-button--cta;
    font-size: var(font-size--large);
    font-weight: var(font-weight--large);
    line-height: var(line-height--large);
    padding: var(padding--large);
}

.topcoat-button--large--cta:hover {
    extend: .topcoat-button--cta:hover;
}

.topcoat-button--large--cta:focus {
    extend: .topcoat-button:focus;
}

.topcoat-button--large--cta:active {
    extend: .topcoat-button--cta:active;
}

.topcoat-button--large--cta:disabled {
    extend: .topcoat-button:disabled;
}


{'fraction_non_alphanumeric': 0.14542570068746694, 'fraction_numerical': 0.0013598247337009896, 'mean_word_length': 3.010299909118449, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1270165', 'n_tokens_mistral': 4571, 'n_tokens_neox': 4389, 'n_words': 954}