<template>
  <div>
    <panel title="Box Model" padding-body="0" type="primary">
      <text class="box">Box</text>
    </panel>

    <panel title="border" type="primary">
      <panel title="border-width" type="">
        <div style="flex-direction: row;">
          <style-item style="border-style: solid;border-width: 2px;border-color: #333;" value=""></style-item>
          <style-item style="border-style: solid;border-width: 10px;border-color: #333;" value=""></style-item>
          <style-item style="border-style: solid;border-left-width: 4px;border-color: #333;" value=""></style-item>
          <style-item style="border-style: solid;border-bottom-width: 4px;border-color: #333;" value=""></style-item>
        </div>
      </panel>
      <panel title="border-color" type="">
        <div style="flex-direction: row;">
          <style-item style="border-style: solid;border-width: 4px;border-color: #333;" value=""></style-item>
          <style-item style="border-style: solid;border-width: 4px;border-color: #ddd;" value=""></style-item>
          <style-item style="border-style: solid;border-width: 4px;border-color: red;" value=""></style-item>
        </div>
      </panel>
      <panel title="border-style" type="">
        <tip type="warning" value="just support four edges" style="margin-bottom: 10px;"></tip>
        <div style="flex-direction: row;">
          <style-item style="border-style: solid;border-width: 4px;border-color: #333;" value=""></style-item>
          <style-item style="border-style: dashed;border-width: 4px;border-color: #333;" value="" type=""></style-item>
          <style-item style="border-style: dotted;border-width: 4px;border-color: #333;" value=""></style-item>
        </div>
      </panel>
      <panel title="border-radius" type="">
        <div style="flex-direction: row;">
          <style-item style="width: 75px;border-radius:38px" value=""></style-item>
          <style-item style="border-radius:20px" value=""></style-item>
          <style-item style="border-top-left-radius:20px;border-top-right-radius:20px" value=""></style-item>
          <style-item style="border-bottom-left-radius:20px;border-bottom-right-radius:20px" value=""></style-item>
        </div>
      </panel>
    </panel>
  </div>
</template>

<style scoped>
  .box {
    background-color: #f5f5f5;
    width: 260px;
    height: 260px;
    padding-left: 40px;
    padding-top: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    margin-left: 40px;
    margin-top: 40px;
    margin-right: 40px;
    margin-bottom: 40px;
    border-width: 40px;
    border-color: #333;
    border-style: solid;
  }
</style>

<script>
  module.exports = {
    components: {
      panel: require('../include/panel.vue'),
      tip: require('../include/tip.vue'),
      styleItem: require('./style-item.vue')
    }
  }
</script>