<template>
    <div class="ui container">
        <h1 class="ui croud header">Croud Style Guide</h1>

        <h2 class="ui header">Welcome!</h2>
        <p>The Croud Style Guide provides guidelines on how our applications should look, it is based on our company branding at present.</br> It shows an example of semantic ui elements in the style we should use them.</p>
        <p>The style guide also incorporates the Vue-Semantic Showcase, so you can quickly grab Vue-Semantic component code to use in your applications.</p>

        <source-block>find in variables/colours.sass</source-block>
        <h2 class="ui dividing header">Site</h2>

        <div class="ui three column stackable grid">
            <div class="column">
                <h1 class="ui croud header">Heading 1</h1>
                <h2 class="ui croud header">Heading 2</h2>
                <h3 class="ui croud header">Heading 3</h3>
                <h4 class="ui croud header">Heading 4</h4>
                <h5 class="ui croud header">Heading 5</h5>
                <p>Headings have our current branding font 'Pathway Gothic One' to add the yellow underlining add the class 'croud'</p>
            </div>

            <div class="column">
                <h2>Example body text</h2>
                <p>This is example body text, to find out more about Croud take a look at the <a target="_blank" href="http://croud.co.uk">Croud Website</a>.</p>
                <p><small>This line of text is meant to be treated as fine print.</small></p>
                <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
                <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
                <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
            </div>

            <div class="column">
                <div class="ui two column stackable padded middle aligned centered color grid">
                    <div class="sixteen wide black column">
                        <img class="logo" src="../../static/croud-logo.svg">
                    </div>
                    <div class="yellow column">#F3C91D <br>rgba(243, 201, 29, 1)</div>
                    <div class="green column">#6DD1BE <br>rgba(109, 209, 190, 1)</div>
                    <div class="red column">#EA6B65 <br>rgba(234, 107, 101, 1)</div>
                    <div class="purple column">#79508A <br>rgba(121, 80, 138, 1)</div>
                    <div class="blue column">#376688 <br>rgba(55, 102, 136, 1)</div>
                    <div class="black column">#272727 <br>rgba(39, 39, 39, 1)</div>
                    <div class="grey column">#8E979B <br>rgba(142, 151, 155, 1)</div>
                    <div class="column">#FFFFFF <br>rgba(255, 255, 255, 1)</div>
                </div>
            </div>

        </div>

        <h2 class="ui dividing header">Buttons</h2>

        <div class="ui stackable equal width grid">
            <div class="column">
                <p>Standard buttons should look as below with no rounding of borders, basic is the most comon style used on the Croud Website</P>
                <button class="ui basic black button">Basic</button>
                <button class="ui primary button">Primary</button>
                <button class="ui secondary button">Secondary</button>
                <button class="ui blue button">Action</button>
                <button class="ui button">Default</button>
                <button class="ui disabled button">Disabled</button>
                <button class="ui loading button">Loading</button>

                <div class="ui divider"></div>
                <p>Icon buttons should only contain an Icon as below, standard buttons should not contain an icon.</P>
                <button class="ui basic black icon button">
                    <i class="add icon"></i>
                </button>

                <button class="ui icon button">
                    <i class="add icon"></i>
                </button>
            </div>
        <div>
      </div>
    </div>

    <semantic-divider class="hidden"></semantic-divider>
    <div class="ui container">
        <h2 class="ui dividing header">Inputs</h2>
        <p>Inputs should have a square border, are fluid and they can be basic or include an icon or an action button/label, search boxes should search automatically where possible.</P>
        <div class="ui two column stackable grid">

          <div class="column">
              <div class="ui fluid input">
              <input type="text" placeholder="Standard input">
          </div>

          <div class="ui divider"></div>
          <div class="ui action fluid input">
              <input type="text" placeholder="Input with action">
              <div class="ui blue button">Add</div>

          </div>

          <div class="ui divider"></div>
              <div class="ui right labeled fluid input">
                  <input type="text" placeholder="Right labeled input">
              <div class="ui basic label">
                Label
              </div>
          </div>

          <div class="ui divider"></div>
          <semantic-dropdown :fluid="true" default_text="Dropdown input">
            <div class="item">one</div>
            <div class="item">two</div>
            <div class="item">three</div>
          </semantic-dropdown>
      </div>
      <div class="column">

          <div class="ui icon fluid input">
              <input type="text" placeholder="Input with icon">
              <i class="search icon"></i>
          </div>

          <div class="ui divider"></div>

          <div class="ui labeled fluid input">
          <div class="ui basic label">
            Label
          </div>
          <input type="text" placeholder="Left labeled input">
        </div>

        <div class="ui divider"></div>
        <div class="ui input fluid error">
            <input placeholder="Input with error" type="text">
        </div>
      </div>
    </div>

        <semantic-divider></semantic-divider>
        <formDropdown-showcase></formDropdown-showcase>
        <search-showcase></search-showcase>
        <checkbox-showcase></checkbox-showcase>
        <radio-showcase></radio-showcase>

    </div>

    <semantic-divider class="hidden"></semantic-divider>
    <h2 class="ui dividing header">Other</h2>

        <accordion-showcase></accordion-showcase>
        <modal-showcase></modal-showcase>
        <message-showcase></message-showcase>
        <statistic-showcase></statistic-showcase>
        <reveal-showcase></reveal-showcase>
        <loading-showcase></loading-showcase>
        <semLabel-showcase></semLabel-showcase>
        <divider-showcase></divider-showcase>
        <column-showcase></column-showcase>

    </div>
</template>

<script>
// import ColourSwatch from './ColourSwatch'
import SourceBlock from './SourceBlock'

export default {
    name: 'Guide',
    components: [
        SourceBlock,
    ],
    data() {
        return {
        }
    },
    methods: {
    },
    computed: {
    },
    watch: {
    },
}
</script>

<style scoped>
.logo {
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;
  margin-top: 5%;
  margin-bottom: 5%;
}
</style>
